El Capturador de SVG descubre cada SVG en una página web — elementos SVG en línea, referencias a archivos .svg externos, sprites SVG (patrones use/symbol) y data URIs SVG. Previsualiza cada SVG en diferentes tamaños, verifica la transparencia contra fondos claros y oscuros, copia el marcado SVG sin procesar o descarga archivos SVG optimizados.
Los SVGs están en todas partes en los sitios web modernos — logos, íconos, ilustraciones, gráficos decorativos, visualizaciones de datos — pero extraerlos es sorprendentemente difícil. Los SVGs en línea están incrustados directamente en el HTML y no se pueden "guardar como imagen". Los sprites SVG usan referencias use/symbol que no se resuelven a archivos independientes. Los SVGs externos cargados mediante img src o CSS no se pueden inspeccionar sin abrir la pestaña de red. El Capturador de SVG maneja todas estas fuentes automáticamente. Escanea el DOM en busca de SVGs en línea, resuelve referencias de sprites a sus definiciones completas de symbol, encuentra URLs de SVG externos y decodifica data URIs SVG. Cada SVG se muestra en una galería con una vista previa en vivo, y puedes alternar entre fondos claro, oscuro y a cuadros para verificar la transparencia. Copia el código SVG sin procesar para incorporarlo en tus componentes, o descarga el SVG como un archivo listo para usar en tu proyecto.
Encuentra SVGs de todas las fuentes de la página: elementos <svg> en línea en el DOM, archivos .svg externos cargados a través de etiquetas img u object, SVGs de CSS background-image, referencias de sprite use/symbol (resueltas a SVGs completos) y SVGs codificados en data URI base64.
Previsualiza cada SVG en diferentes tamaños (original, 2x, 4x) contra tres fondos: oscuro, claro (blanco) y a cuadros. El fondo a cuadros revela áreas de transparencia que podrían ser invisibles sobre un fondo de un solo color.
Haz clic en "Copiar SVG" para obtener el marcado SVG completo — viewBox, paths, groups y todos los atributos incluidos. Pega directamente en tu HTML, JSX, plantilla Vue o archivo de sprite SVG. El código es limpio y está correctamente formateado.
Descarga SVGs individuales como archivos .svg con declaraciones XML y codificación adecuadas. Los archivos se nombran según el ID del SVG, el nombre de clase o el aria-label — no con nombres genéricos de "download.svg".
Cada SVG muestra su tipo de fuente (en línea, externo, sprite, data URI), dimensiones del viewBox, tamaño de archivo y dónde se encontró en el DOM. Útil para entender cómo el sitio implementa su estrategia de SVG.
Cuando una página usa sprites SVG con referencias use href="#icon-name", el Capturador de SVG resuelve cada referencia a la definición completa del symbol — dándote el SVG independiente completo, no solo el elemento use.
Visita un sitio web con un excelente sistema de íconos y obtén el conjunto completo de íconos SVG. El Capturador de SVG encuentra íconos en sprites, SVGs en línea y archivos externos — recopilando la biblioteca completa de íconos independientemente de cómo esté implementada.
¿Necesitas el logo SVG de una empresa para una página de asociaciones, caso de estudio o kit de prensa? La mayoría de los logos en sitios web modernos son SVGs. El Capturador de SVG los encuentra y extrae en su calidad vectorial original — infinitamente escalables.
Estudia cómo los sitios web de producción implementan ilustraciones, animaciones o visualizaciones de datos SVG complejas. Copia el código SVG sin procesar para inspeccionar cómo se estructuran los paths, cómo se configura el viewBox y cómo se aplican las animaciones CSS.
¿Cambiando a un nuevo sistema de íconos? Obtén SVGs del sitio de referencia, suéltalos en tu sprite SVG o sistema de íconos basado en componentes. Código SVG limpio con valores viewBox adecuados listos para integración.
Revisa cómo se implementan los SVGs en tu sitio — ¿son en línea (bueno para manipulación), externos (bueno para caché) o sprites (bueno para eficiencia)? El Capturador de SVG muestra el tipo de fuente para cada SVG, ayudándote a optimizar tu estrategia de SVG.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Capturador de SVG. La herramienta escanea la página en busca de todas las fuentes SVG y construye la galería.
Aparece una cuadrícula de miniaturas SVG mostrando cada SVG encontrado en la página. Cada entrada muestra el nombre del SVG, tipo de fuente y dimensiones del viewBox.
Haz clic en cualquier SVG para abrir una vista previa más grande. Alterna entre fondos oscuro, claro y a cuadros. Redimensiona la vista previa para ver cómo escala el SVG.
Haz clic en "Copiar SVG" para obtener el marcado sin procesar para incorporarlo en tu código, o "Descargar" para guardarlo como un archivo .svg independiente en tu dispositivo.
Regresa a la galería para explorar más SVGs. El distintivo de conteo muestra el número total encontrado en la página.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
