Todo el proceso, de una sola toma
24 SVG encontrados, recorrer
las vistas previas, descargar star.svg y luego llevarse los
veinticuatro en un ZIP. Sin maquetas: eso es la extensión, funcionando.01 — El problema
El navegador no te lo va a dar sin más
Un SVG es texto: unos cientos de bytes de coordenadas. Lo único que quieres es justo lo que la página pone más difícil conseguir.
El <svg> en línea no tiene menú de clic derecho propio. Un set de
iconos detrás de un background-image de CSS no se puede arrastrar. Una hoja de
sprites esconde cuarenta glifos dentro de un archivo. Así que la gente captura el icono y
lo calca, o rebusca el nodo en DevTools, y acaba con un mapa de bits de un
vector, borroso en cuanto se redimensiona.
star.svg — lo que quieres
star.png — lo que consigues
El vector ya está en la página. No deberías tener que redibujarlo para quedártelo.
02 — Cómo funciona
Cuatro movimientos, un popup
Todo ocurre en un panel de 360 px que baja de la barra de herramientas. Estos son los cuatro tiempos de la demo de arriba, uno a uno: cada grabación es la extensión real en la misma página en vivo.
-
Ábrelo y cuenta lo que encuentra
Pulsa el icono en cualquier página y el panel escanea el DOM mientras se abre:
<svg>en línea, vectores en<img>,background-imagede CSS y referencias<use>a sprites por igual. El contador sube hasta lo que encuentra:0 → 24 SVG encontrados.01 · detectarEl panel entra y el contador se asienta en 24 SVG encontrados. -
Previsualiza cada uno y recórrelos
Cada vector detectado recibe una vista previa limpia y aislada —por su cuenta, fuera de la página abarrotada—, así que ves exactamente lo que vas a guardar. Anterior y Siguiente recorren el set entero: lupa, corazón, estrella y los veintiuno que vienen detrás.
02 · vista previaRecorriendo las vistas previas: el nombre de archivo va detrás: search-24,heart-24,star-24. -
Descarga el original en un clic
Ponle nombre si quieres, pulsa Descargar el SVG actual y el archivo real aterriza en tus descargas: el marcado auténtico sacado de la página, con el
xmlnsreparado si faltaba para que abra en cualquier sitio. Una marca deGuardado star.svglo confirma.03 · descargaUn clic, y Guardado star.svg: el vector original, no una captura. -
O llévate la página entera en un ZIP
Descargar todo en ZIP empaqueta los SVG encontrados — los veinticuatro de aquí— en un solo archivo, sin duplicados y numerados desde
svg-1.svgcon un prefijo que puedes cambiar. Lo que no se haya podido obtener se nombra en la línea de estado en vez de omitirse en silencio. Un set de iconos entero, en un clic.04 · empaquetarTodos los vectores de la página, empaquetados: 24 SVG guardados.
listo Los vectores siempre estuvieron en la página. Ahora están en tus descargas.
03 — Los detalles
Qué detecta y qué conserva
Cuatro afirmaciones sobre cómo se comporta: de esas en las que solo reparas cuando una herramienta más simple lo hace mal.
- Todas las fuentes
-
En línea, imagen, fondo, sprite
Cuatro formas en que una página puede llevar un vector, y lee las cuatro: URI de datos,
<object>, fondos CSS y referencias<use>a sprites que la mayoría de los extractores se pierden por completo. - Fidelidad
-
El marcado original, no un redibujado
Lo que se guarda es el SVG que estaba en la página: sus trazados, su
viewBox, su propia precisión. Nítido a cualquier tamaño y todavía texto editable que puedes recolorear. - A escala
-
Uno, o todos de una vez
Nombra y guarda un icono suelto, o llévate la página entera en un ZIP sin duplicados. Coger un set de cuarenta iconos cuesta el mismo clic que coger uno.
- En el dispositivo
-
Sin servidor, sin cuenta, sin subidas
Todo se ejecuta en tu navegador, sobre la página que tienes delante. No se envía nada a ninguna parte: no hay adónde enviarlo. ¿Necesitas recolorear antes? Un enlace te lleva al SVG Color Changer.
04 — Cómo está hecha esta página
Cada fotograma de aquí es Remotion
Nada de esta página es una grabación de pantalla. El vídeo principal, los cuatro clips, cada póster y cada captura para la tienda se renderizan desde un mismo proyecto React.
Un pequeño kit en motion/src/kit reconstruye el popup, el marco del
navegador y un cursor con aire humano como componentes, todos bebiendo de un mismo tema:
la misma paleta monocroma que publica la extensión real. Una composición
promo de 24 segundos coreografía todo el flujo; los clips de arriba son
rangos de fotogramas recortados directamente de ella, y las imágenes fijas son fotogramas sueltos de
composiciones dedicadas. Cambia una palabra y todos los recursos se vuelven a renderizar a la vez,
desde un solo comando.
05 — Privacidad
No hay servidor
Sin backend, sin analítica, sin cuenta, sin subidas. La extensión lee la página en la que estás, solo cuando la abres, y escribe archivos en tu propio equipo.
Un SVG no tiene que salir nunca de tu navegador para guardarse: ya está ahí, y tú también. Ese es todo el modelo de confianza: no hay nada en medio, porque no hay medio. El único enlace saliente es opcional y lo pulsas tú: un salto al SVG Color Changer cuando quieras reestilizar antes de guardar.