Olvida las fuentes de iconos y los engorrosos sprites PNG.

¡Pásate a SVG!

SVG Sprites

En líneas generales, un sprite de imagen es una imagen individual que contiene otras imágenes. SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML con soporte extendido para la animación y el coloreado.

Sprite + SVG = SVG Sprite

Un sprite de imagen SVG es un archivo SVG que contiene varias imágenes (por ejemplo, iconos). Cada imagen SVG puede ser referenciada por un ID o una posición. Lo más común es definir cada SVG dentro del elemento <symbol>. Los sprites pueden utilizarse todas las veces que se quiera a lo largo de una o varias páginas web mediante el elemento SVG <use>. A diferencia de los símbolos SVG, las imágenes incluidas en un sprite SVG se distribuyen en una cuadrícula.

¡Todo el "sabor" de SVG en una sola imagen!

Accesible

SVG cuenta con elementos nativos accesibles (title, desc y text) y es compatible con los atributos WAI-ARIA.

Semántico

La semántica de la etiqueta <svg> por defecto indica que es una imagen. Sus elementos también son semánticos.

Escalable

Escala el icono como quieras, seguirá siendo nítido sin importar el tamaño ni la resolución de la pantalla.

Multicolor

Los iconos SVG pueden tener varios colores y se les pueden aplicar filtros y degradados.

Animable

Los SVG se pueden animar a través de CSS o Javascript.

Compatible

Soportado por la mayoría de los navegadores modernos. Hay mútiples opciones de respaldo si fueran necesarias.

No más emojis

Algunos navegadores móviles muestran emojis en lugar de iconos cuando las fuentes no se cargan.

Rendimiento

El coste de conseguir todas las imágenes será de una sola petición HTTP (o ninguna). La combinación con SVG resulta en una carga muy rápida.

Tamaño

En comparación con fuentes de iconos y gráficos PNG son muy ligeras.

Fácil manejo

Es fácil de usar, controlar y posicionar en todos los navegadores y dispositivos de manera homogénea.

Ampliable

Es muy fácil mantener y ampliar el sprite.

Ordenado

No más montones de imagenes o sprites PNG engorrosos. ¡Basta de perder el tiempo!

Múltiples estilos

Permite incluir iconos con diferentes estilos dentro del mismo archivo; es decir, puede tener iconos duotono junto con iconos jeroglíficos.

Compatibilidad

El método para utilizar los sprites SVG son los identificadores de fragmentos SVG. Con ellos se visualiza una parte del archivo SVG enlazando con una parte del SVG con ID propio utilizando los atributos de XLink o cambiando el valor del atributo viewbox para crear una "vista" de la imagen.

Soporte para los identificadores de fragmentos SVG en los navegadores principales

9.0	12.0	15.0	50.0	11.1	37.0	90.0
Para más información visita: Can I Use (abre una nueva pestaña)

Nota: las imágenes de sprite necesitan ser servidas desde el mismo dominio que sirve la página real para que funcionen. Algunos navegadores (como Firefox y Chrome) no muestran los iconos de sprites SVG externos al html, por razones de seguridad, a menos que el sitio web se ejecute en un servidor web.

Descarga

El sprite SVG de Captain Icons contiene un total de 372 iconos SVG de estilo cómic, divertidos y originales, del conjunto de iconos SVG creado por Mario del Valle. El sprite ha sido generado con la herramienta SVG Spreact. Ambos, tanto el conjunto de iconos original como el sprite, están bajo licencia Creative Commons Atribución-CompartirIgual.

Descargar

Cómo usar los iconos

Añadirlos al HTML

<svg class="icon">
    [<title>Breve descripción del contenido</title>]
    [<desc>Descripción en profundidad del contenido</desc>]
    <use xlink:href="[path/]sprite.svg#icon-id"></use>
</svg>

Se pueden añadir varios <use> dentro del mismo <svg> para hacer combinaciones de iconos.

Nota: xlink:href se puede utilizar por razones de retrocompatibilidad, aunque SVG 2 eliminó la necesidad del espacio de nombres xlink, por lo que, en su lugar, es recomendable utilizar href.

Darles estilo (CSS)

.icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: currentColor;
    [...]
}

Admite cualquier estilo o animación CSS compatible con SVG.

También se pueden aplicar clases a la etiqueta <use>.

Asegurar la compatibilidad con Internet Explorer (opcional)

svgforeverybody es un polyfill —fragmento de código (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa— creado por Jonathan Neal que añade soporte de contenido externo SVG para todos los navegadores. Entrará en juego cuando el navegador no sea capaz de renderizar las imágenes. Para poder utilizarlo, simplemente hay que subir el script al servidor y agregar el siguiente código al HTML con la ruta donde está alojado el script:

<!-- Incluye el script -->
<script src="/path/to/svg4everybody.js"></script>
<!-- Ejecuta el script -->
<script>svg4everybody();</script>

Para ampliar el soporte a Internet Explorer 6-8, incluye el script legacy dentro del <head>:

<head>
    <!-- Contenido del <head> -->
    <script src="/path/to/svg4everybody.legacy.js"></script>
</head>
<body>
    <!-- Contenido del <body> -->
    <script>svg4everybody();</script>
 </body>

Nota: con el fin de obtener los mejores resultados en Internet Explorer, establece X-UA-Compatible a ie=edge. Puede hacerse con una cabecera de respuesta del servidor o con el siguiente HTML en el <head>: <meta http-equiv="x-ua-compatible" content="ie=edge">

Ver referencias de los iconos en el sprite

Sobre nosotros

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet, velit in mollis luctus, massa risus sollicitudin ipsum, nec interdum orci dolor tempus justo. Nulla dapibus varius lectus a dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ultricies rhoncus tortor luctus mattis. Proin purus ante, commodo sollicitudin cursus vitae, molestie sed mi. Donec fringilla vehicula dapibus. In eget urna efficitur, dapibus mi vel, posuere lectus. Vestibulum egestas urna massa, imperdiet tristique ex efficitur placerat. Quisque a orci risus. Pellentesque consectetur felis sit amet sapien imperdiet, vel tristique leo suscipit. Mauris et nibh fermentum, rutrum lacus vitae, commodo massa. Cras luctus convallis neque, quis eleifend nisi dictum in. Nam in interdum purus. In vel tempor tortor, nec sodales turpis. Pellentesque erat felis, ultricies ac ante a, scelerisque porta magna. Donec rhoncus nisl ac metus vehicula, eget fringilla risus interdum.

Contacta con nosotros

Volver arriba