Descripción general fundamental de cómo crear un ícono de página adaptable
En esta publicación, quiero compartir las ideas sobre cómo crear un ícono de página adaptable con SVG. Prueba la demostración.
Si prefieres ver un video, aquí tienes una versión de YouTube de esta publicación:
Descripción general
Un ícono de página personalizado es una excelente manera de perfeccionar un proyecto web. Se muestra en las pestañas del navegador para computadoras, dentro de los lectores de la opción “Guardar para más adelante”, en otras entradas de blog que vinculan a tu sitio y mucho más. Tradicionalmente, esto se hacía con el tipo de archivo .ico, pero recientemente los navegadores permitieron el uso de SVG, un formato de vectores. Con la mejora progresiva, puedes publicar íconos de página de .ico compatibles y actualizar a .svg si está disponible.
SVG puede aumentar y reducir la escala sin pérdida de calidad y puede tener un tamaño muy pequeño. También pueden tener CSS incorporado, incluso consultas de medios incorporadas. Esto significa que, si se usa un ícono de página SVG en una app de lector o en las barras de favoritos, existe la posibilidad de que el usuario obtenga un ícono relevante para el tema (oscuro o claro) debido a los estilos de preferencias oscuros que se proporcionan dentro del SVG. Luego, el SVG se adapta con su estilo incorporado a las preferencias del usuario claras y oscuras.
Marca
El lenguaje de marcado SVG es XML con una extensión de tipo de archivo .svg que le permite contener tipos de código más dinámicos.
Comienza por crear favicon.svg
Crea un archivo nuevo llamado favicon.svg y agrega lo siguiente:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Este es mi archivo SVG. Agregué el tamaño del viewBox que sea relevante para mi material gráfico:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Cómo agregar formas y rutas
A continuación, agrega el código de ruta de acceso SVG. A menudo, esto significa abrir el SVG en un editor de código, pero ese código en general no es compatible con las personas. Aquí hay una excelente guía que te ayudará a exportar y optimizar SVG desde las herramientas de diseño.
El material gráfico de este desafío de la GUI provino de un diseñador que lo creó en Adobe Illustrator. Lo optimicé en gran medida. Lo ejecuté en SVGOMG y, luego, lo edité a mano.
Este es un ejemplo del grupo de rutas de arte de skull del mío, después de limpiarlo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
Observa los selectores de ID legibles, como #eyes-and-nose, y las clases, como .favicon-stroke. Los edito manualmente como preparación para el estilo CSS
No es necesario agregar IDs ni clases para que tu SVG sea un ícono de página adaptable.
Vincular el SVG del ícono de página desde HTML
En la etiqueta <head> de tu HTML, después del ícono de página .ico, agrega lo siguiente:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Dado que el nuevo ícono puede parecer idéntico a la versión de .ico, verifica que se esté usando. Abre el panel Red de Herramientas para desarrolladores. Filtra por imágenes y busca el ícono de página:
Estilos
Al igual que HTML, puedes agregar una etiqueta <style> al lenguaje de marcado para usarla en el alcance del documento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
La versión con tema claro será el color predeterminado de mi SVG de ícono de página. Los estilos para los que escribí eran, en su mayoría, de trazos y colores de relleno:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
Ahora, lo más divertido es aplicar diseño a la versión con tema oscuro de tu ícono de página. Los diseños se incluirán en una consulta de medios dentro de la etiqueta de estilo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
El mío terminó así:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
Decidí cambiar los bordes púrpura brillante por un lindo gris oscuro fresco (#343a40), cambié el color del hueso de la calavera de blanco a un gris claro frío (#adb5bd), pero
dejé el sombrero con detalles rosa.
Conclusión
Ahora que sabes cómo lo hice, ¿cómo lo harías 🙂
Diversifiquemos nuestros enfoques y aprendamos todas las formas de desarrollar en la Web. Crea una demostración, twittea vínculos y la agregaré a la sección de remixes de la comunidad a continuación.