Función — todas las fuentes · 3 de 4
Extrae un icono de un sprite SVG
Una hoja de sprites apila docenas de iconos en un archivo y pinta cada uno con <use href="#id">. Guárdalo de la forma obvia y obtendrás la hoja entera, o un vacío. SVG Downloader resuelve la referencia y te entrega ese único glifo.
El problema
Por qué un sprite te da la hoja entera o nada
Los sprites SVG son la forma de que los sets de iconos grandes sigan siendo rápidos. Cada icono se define una vez —normalmente como un <symbol> con un id, metido dentro de un único <svg> oculto— y cada sitio que muestra un icono escribe solo <use href="#chevron">. El navegador estampa una copia de ese símbolo allí donde esté la referencia. Rápido de cargar, y una trampa para extraer.
La trampa es que un elemento <use> no contiene dibujo. Es un puntero. Intenta guardar el icono que ves y estarás guardando una referencia vacía: un archivo que no dibuja nada por su cuenta porque el símbolo al que apunta no está dentro. Ve por el otro lado y guarda el sprite de origen, y te llevarás los cuarenta iconos soldados en un archivo, la mayoría definidos en coordenadas muy fuera de cualquier viewBox. Ninguno de los dos es el icono que querías.
Qué hace SVG Downloader en su lugar
Abre el popup y sigue los punteros. Por cada <use> que apunte a algún sitio del mismo documento —el habitual <use href="#chevron"> hacia un sprite en línea oculto—, busca el <symbol> o <g> referenciado y reconstruye un SVG completo e independiente para ese único glifo. Cada uno recibe su vista previa aislada, así que una hoja de cuarenta iconos se convierte en cuarenta vistas previas que puedes recorrer y guardar de una en una.
- La referencia resuelta. El
href(o el antiguoxlink:href) se sigue hasta su símbolo, y ese símbolo se clona dentro de un<defs>nuevo al principio del archivo guardado. El<use>se queda donde estaba y ahora resuelve contra marcado que el propio archivo lleva dentro, así que se dibuja bien en cualquier parte, sin sprite al lado. - Un glifo, no la hoja. Guardas el chevrón, no el chevrón más treinta y nueve vecinos. Cada referencia se extrae por separado y puedes escribir el nombre que quieras antes de guardarla, o llevarte el lote como un set numerado con Descargar todo en ZIP.
- O llévatelos todos. Cuando quieras el set completo, Descargar todo en ZIP extrae de una vez todos los símbolos referenciados, sin duplicados, en un solo archivo.
Qué obtienes
- Formato
- Un .svg limpio y conforme al estándar por glifo: el símbolo incrustado en un archivo autocontenido, con el espacio de nombres reparado.
- Referencias que lee
<use>que apunte dentro del mismo documento, víahrefy el antiguoxlink:href. Los archivos de sprite externos no se resuelven.- Dónde se ejecuta
- Por completo en tu navegador. Las referencias se resuelven en local: sin subidas, sin servidor, sin cuenta.
- También detecta
- SVG en línea, fondos CSS y ZIP de la página entera.
Conviene saber
Preguntas sobre los sprites SVG
¿Qué es exactamente un sprite SVG?
Un archivo SVG que define muchos iconos como elementos <symbol> separados, cada uno con su id. Las páginas referencian un icono con <use href="#id"> en vez de repetir su marcado. Es el equivalente, para sets de iconos, de una hoja de sprites CSS: una descarga, muchos glifos.
¿Por qué al guardar el icono me sale un archivo vacío?
Porque un elemento <use> no contiene dibujo: apunta a un símbolo definido en otro sitio. Copiada por su cuenta, esa referencia no tiene nada que dibujar. SVG Downloader resuelve primero el puntero hasta el símbolo real, así que el archivo que guardas sí dibuja el icono.
¿Funciona con un archivo de sprite externo, no solo con uno en línea?
No: los sprites externos no están soportados. Si la referencia apunta fuera del documento actual, como en <use href="/sprite.svg#cart">, ese <svg> se omite y se cuenta como omisión, en vez de entregártelo roto. Solo se resuelven las referencias del mismo documento —<use href="#cart"> hacia un sprite en línea oculto, que es como lo publica la mayoría de los sitios—. Si un sitio usa un sprite externo, abrir sprite.svg directamente te da la hoja de origen.
¿Y un símbolo que referencia a otro símbolo?
La resolución llega a un nivel de profundidad. Un <symbol> cuyo contenido incluya otro <use> apuntando a un segundo símbolo se queda sin resolver, así que esa pieza anidada no se dibujará en el archivo guardado. Es poco común —la mayoría de los sprites definen cada glifo plano—, pero conviene mirar la vista previa si un icono se ve a medias.
Saca un icono limpio de la hoja
Gratis, privado, y sigue la referencia que el navegador esconde.