Manejar el popup

Paso a paso

De la página al archivo

1. Abre el popup. Ve a la página que contiene el SVG y pulsa el botón de SVG Downloader. Solo entonces lee la pestaña: escanea el DOM actual al abrirse, así que deja que la página termine de cargar primero.
2. Lee el recuento. El popup indica cuántos SVG ha encontrado. Ese número cubre las cuatro fuentes: <svg> en línea, vectores en <img> y <object> incluidos los URI data:, SVG en background-image de CSS y referencias <use> a sprites del mismo documento.
3. Pasa las vistas previas. Cada SVG se dibuja aislado, sacado de la página abarrotada para que puedas verlo de verdad. Usa Anterior y Siguiente para recorrerlos y llegar al que quieres.
4. Pon un nombre (opcional). Escribe un nombre para el SVG actual y se guardará exactamente así. Déjalo en blanco y recurrirá a un svg-1.svg numerado, con el prefijo que hayas puesto en las opciones de la extensión.
5. Descarga el SVG actual. Pulsa Descargar el SVG actual para guardar solo el que está en pantalla. El archivo es el marcado original con el xmlns reparado, así que abre en Figma, Illustrator, VS Code y cualquier navegador.
6. O descárgalo todo en un ZIP. Pulsa Descargar todo en ZIP para empaquetar de una vez todos los SVG detectados, numerados desde svg-1.svg en el orden de la página. El archivo va sin duplicados, y lo que no se haya podido obtener aparece en la línea de estado del popup —Descargados 8 de 10 SVG. Omitidos: 3, 7.— en lugar de desaparecer en silencio.

Lo que garantiza el popup

• El vector original, no una captura. Cada descarga es el SVG que estaba en la página —sus trazados, su viewBox, su precisión—, así que se mantiene nítido a cualquier tamaño y sigue siendo texto editable.
• Un espacio de nombres reparado. El SVG en línea suele omitir xmlns porque lo aporta el navegador. Guardado en un archivo suelto no abriría; SVG Downloader lo añade automáticamente.
• Nada sale de tu equipo. La detección, la vista previa y la descarga se ejecutan en tu dispositivo. No hay subidas, ni cuenta, ni llamadas de analítica: consulta la política de privacidad.
• Los fallos se muestran, no se tragan. La línea de estado nombra lo que se ha omitido, así que el recuento que lees es uno sobre el que puedes actuar.

Lo que no detecta

Conviene conocer tres límites, y el popup te avisa cuando aprietan. Un <use> que apunta a un archivo de sprite externo —<use href="/sprite.svg#cart">— no se resuelve, y ese <svg> se omite; solo se siguen las referencias del mismo documento, con un nivel de profundidad. En páginas de más de 10.000 elementos se omite el escaneo de background-image de CSS por velocidad, así que solo verás las otras tres fuentes. Y la recolección se limita a 2.000 SVG en línea, dejando fuera cualquier SVG cuyo marcado pase de unos 2 MB.

Recolorear después de guardar

Muchos iconos heredan su color del CSS mediante currentColor, así que un archivo guardado puede verse negro por su cuenta. Si quieres un color concreto grabado, usa el salto opcional a SVG Color Changer: el único enlace saliente de la extensión, y solo cuando lo pulsas. Recolorea allí y luego guarda el resultado.

Adónde ir después

Para un trabajo concreto, las guías son más directas: descargar un SVG de cualquier web, llevártelo todo en un ZIP o sacar uno de un fondo CSS. ¿Te has atascado? Las preguntas frecuentes cubren el icono negro, el archivo que no abre y lo demás.