Descripción general fundamental de cómo crear un ícono de página adaptable
En esta publicación, compartiré ideas sobre cómo crear un ícono de página adaptable con o 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 pulir un proyecto web. Se muestra en las pestañas del navegador de escritorio y
también en "Guardar para más adelante" lectores, otras entradas de blog que se vinculen a tu sitio
más. Tradicionalmente, esto se hacía con el tipo de archivo .ico, pero recientemente
los navegadores han permitido el uso de
SVG, un formato vectorial Usando
progresivo
mejora
puedes publicar íconos de página .ico compatibles y actualizar a una .svg si
disponibles.
SVG puede aumentar y reducir la escala verticalmente sin pérdida de calidad y, potencialmente, pueden tener un tamaño muy pequeño, también pueden tener CSS incorporados, incluso consultas de medios incorporadas. Esto significa que, si se usa un ícono de página SVG en una app de lectura o en las barras de favoritos, existe la posibilidad de que el usuario obtenga un tema relevante (claro u oscuro) debido a los estilos de preferencia oscuros que se proporcionan en la o SVG. Luego, el SVG se adapta usando su estilo incorporado para usuarios claros y oscuros. preferencias.
Marca
el lenguaje de marcado SVG es
XML con
una extensión de tipo de archivo .svg que permite almacenar tipos más dinámicos de
código.
Comienza por hacer 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. Ajustamos el tamaño de viewBox 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 SVG. A menudo, esto significa abrir el SVG en un editor de código, que el código no es generalmente amigable para los seres humanos. Aquí hay una excelente guía que te guiará a través de la exportación y la optimización de SVG herramientas de diseño.
El material gráfico de este desafío de GUI llegó de un diseñador que lo hizo con Adobe Ilustrador. Me sentí muy y la optimizó. Lo ejecuté a través de SVGOMG y edité la cruz a mano.
Este es un ejemplo del grupo de rutas del material gráfico skull del mío, después de limpiar
de la siguiente manera:
<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 el ID legible por humanos
selectores, como
#eyes-and-nose y
clases como
.favicon-stroke Esto lo hice para preparar CSS.
No es necesario agregar IDs y clases para que tu SVG sea un ícono de página adaptable.
Vincula el SVG del ícono de página desde HTML
En la etiqueta <head> de tu código 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 es posible que el nuevo ícono tenga un aspecto idéntico a la versión de .ico, verifica que se esté usando.
que se usan. Abre el panel Network de Herramientas para desarrolladores. Filtra por imágenes y busca
ícono de página:
Estilos
Al igual que con HTML, puedes agregar una etiqueta <style> al lenguaje de marcado para usarla en comparación con ella.
alcance del documento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
La versión de tema claro será el color predeterminado de mi SVG de ícono de página. El estilos que escribí que eran principalmente colores de trazo y 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 viene lo más divertido: diseñar la versión con el tema oscuro de tu ícono de página. El los estilos para eso 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 resultado fue 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>
Elegí cambiar los bordes púrpura brillante por un lindo gris oscuro y frío (#343a40),
cambió el color del hueso del cráneo de blanco a gris frío claro (#adb5bd), pero
izquierdo 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. Crear una demostración, twittearme vínculos y la agregaré. a la sección de remixes de la comunidad.