La mayoría de las imágenes forman parte de tu contenido, pero los iconos son parte de tu interfaz de usuario. Deben escalar y adaptarse de la misma manera que el texto de tu IU escala y se adapta.
Gráficos vectoriales escalables
Cuando se trata de imágenes fotográficas, hay muchas opciones de formato de imagen: JPG, WebP y AVIF. Para las imágenes no fotográficas, puedes elegir entre el formato de Gráficos de red portátiles (PNG) y el formato de Gráficos vectoriales escalables (SVG).
Tanto los archivos PNG como los SVG son buenos para manejar áreas de color plano y permiten que tus imágenes tengan fondos transparentes.
Si usas un archivo PNG, es probable que debas crear varias versiones de la imagen en diferentes tamaños y usar el atributo srcset en el elemento img para que la imagen sea responsiva. Si usas una imagen SVG, es responsiva de forma predeterminada.
Los PNG (y JPG, WebP, y AVIF) son imágenes de mapas de bits. Las imágenes de mapa de bits almacenan información como píxeles. En un SVG, la información se almacena como instrucciones de dibujo. Cuando el navegador lee el archivo SVG, las instrucciones se convierten en píxeles. Lo mejor de todo es que estas instrucciones son relativas. Sin importar las dimensiones que uses para describir las líneas y formas, todo se renderiza con la nitidez correcta. En lugar de crear varios SVG de diferentes tamaños, puedes crear un SVG que funcione en todos los tamaños. No es necesario usar el atributo srcset.
<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">
XML se usa para escribir las instrucciones en un archivo SVG. Es un lenguaje de marcación, como HTML.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
Incluso puedes colocar SVG dentro de HTML.
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
<figcaption>
A description of the image.
</figcaption>
</figure>
Si incorporas un SVG de ese tipo, es una solicitud menos que debe realizar el navegador. No hay tiempo de espera para que la imagen se descargue porque llega con el código HTML... en el HTML. Además, como verás pronto, incorporar SVG de esta manera te da más control sobre su estilo.
Íconos y texto
Las imágenes de íconos suelen tener formas simples sobre un fondo transparente. SVG es ideal para los íconos.
Si tienes un botón o un enlace con texto y un icono dentro, el icono es presentacional. Lo importante es el texto. Cuando se usa un elemento img, un atributo alt vacío indica que la imagen es de presentación.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
Dado que el CSS se usa para presentaciones, puedes colocar el ícono en tu CSS como imagen de fondo.
<button class="menu">
Menu
</button>
.menu {
background-image: url(hamburger.svg);
background-position: 0.5em;
background-repeat: no-repeat;
background-size: 1em;
padding-inline-start: 2em;
}
Si colocas el archivo SVG dentro de tu código HTML, usa el atributo aria-hidden para ocultarlo de la tecnología de accesibilidad.
<button class="menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
Menu
</button>
Íconos independientes
Usa texto dentro de los botones y vínculos si deseas que su propósito sea claro. Puedes utilizar un ícono sin texto, pero no des por sentado que todos comprenden el significado de un ícono en particular. Si tienes dudas, prueba con usuarios reales.
Si decides usar un icono sin texto que lo acompañe, este dejará de ser presentacional. Una imagen de fondo en CSS no es una manera adecuada de mostrar el ícono. El ícono debe tener un nombre accesible en HTML.
Si usas un elemento img, el ícono obtiene su nombre de accesibilidad del atributo alt.
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
Otra opción es colocar el nombre de accesibilidad en el vínculo o botón y declarar que la imagen es de presentación. Usa el atributo aria-label para proporcionar el nombre accesible.
<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>
Si colocas el SVG dentro de tu HTML, usa el atributo aria-label del vínculo o botón para darle un nombre accesible y usa el atributo aria-hidden en el ícono.
<button aria-label="Menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
</button>
Cómo aplicar estilo a los íconos
Si incorporas los íconos SVG directamente en tu código HTML, puedes aplicarles estilos a algunas partes de la misma manera que a los demás elementos de tu página. No puedes hacerlo si usas un elemento img para mostrar tus íconos.
En el siguiente ejemplo, los elementos rect dentro del SVG tienen un valor fill de blue para coincidir con los estilos del texto del botón.
button {
color: blue;
}
button rect {
fill: blue;
}
También puedes aplicar los estilos hover y focus.
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
Recursos
- Si necesitas aplicar estilo a los SVG que son imágenes de fondo en tu CSS, lee el artículo de Una sobre cómo colorear fondos SVG.
- Sara Soueidan escribió sobre los botones de íconos accesibles.
- Scott O'Hara escribió sobre el marcado contextual de imágenes y SVG.
- Si usas una herramienta de diseño gráfico para exportar archivos SVG, utiliza SVGOMG para optimizar el resultado.
Los íconos son una parte importante del desarrollo de la marca de tu sitio. A continuación, descubrirás cómo hacer que otros aspectos de tu desarrollo de la marca sean responsivos mediante el poder de los temas.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre íconos
SVG puede controlar cualquier densidad de píxeles con un solo archivo o bloque de código <svg>.
.png o .jpg, SVG no necesita srcset ni un elemento <picture>.¿Qué ventajas tiene el código SVG que está directamente en el HTML?