Abre cualquier archivo .svg o pega marcado <svg> sin procesar para inspeccionar su renderizado visual sobre cuadrícula transparente, fondo claro u oscuro mientras analizas los límites exactos de viewBox y el código fuente DOM — 100% localmente en tu navegador.
o haz clic para navegar
Descubre cómo diseñadores UI y desarrolladores frontend utilizan el Visor SVG para diagnosticar iconos blancos invisibles, límites viewBox recortados y código XML sobrecargado.
Los gestores de archivos del sistema muestran los iconos SVG blancos (#FFFFFF) sobre un fondo blanco, haciendo que parezcan vacíos o dañados. Cambiar el fondo del visor a Oscuro o Cuadrícula revela al instante la geometría nítida de trazos de 2 px y verifica la transparencia alfa.
El panel de Información del Archivo muestra al instante cuándo un SVG tiene ancho y alto fijos en píxeles sin un atributo viewBox adaptable, o cuándo coordenadas negativas provocan recortes antes de llevar el archivo a producción.
Renderiza animaciones CSS @keyframes y etiquetas SMIL <animate> en tiempo real mientras muestra el árbol DOM XML completo debajo. Detecta fácilmente bloques <metadata> redundantes o colores hexadecimales fijos y salta directo al Optimizador de SVG.
Sistemas operativos como el Explorador de Windows y Finder de macOS suelen fallar al mostrar miniaturas SVG, y abrir Adobe Illustrator solo para revisar un icono toma minutos. Esta herramienta resuelve tres flujos diarios:
Al exportar iconos blancos para interfaces en modo oscuro, abrir el archivo en una pestaña normal del navegador muestra una pantalla blanca vacía. Alterna entre Cuadrícula, Blanco, Negro y colores personalizados para auditar el contraste al instante.
Antes de incrustar un SVG en React, Vue o un catálogo de activos móviles, verifica de un vistazo su Ancho, Alto, cadena exacta de coordenadas ViewBox (min-x min-y width height) y peso en bytes.
¿Necesitas comprobar si un SVG usa currentColor, rellenos hexadecimales fijos (#3B82F6), contornos <path> frente a etiquetas <text>, o elementos <script> sospechosos? Inspecciona y copia el código fuente XML directamente en el panel inferior.
Nuestro analizador DOM del lado del cliente y el escenario de vista previa admiten una amplia gama de gráficos vectoriales y estructuras XML:
Arrastra y suelta cualquier archivo .svg exportado desde Figma, Adobe Illustrator, Inkscape, Sketch, Affinity Designer o software CAD.
Usa la pestaña "Pegar código SVG" para previsualizar cadenas SVG inline copiadas directamente desde código fuente HTML, componentes JSX o librerías de iconos.
Soporta completamente animaciones interactivas CSS @keyframes, transiciones, degradados (<linearGradient>, <radialGradient>), máscaras <clipPath> y elementos SMIL <animateTransform>.
Renderiza todas las primitivas vectoriales (<path>, <circle>, <rect>, <polygon>, <g>) e imágenes de mapa de bits data:image/*;base64 de forma segura dentro de un contenedor local aislado.
Suelta tu archivo .svg en la zona de subida, haz clic en "Cargar SVG de Ejemplo" para explorar la interfaz, o cambia a la pestaña "Pegar código SVG" para cargar marcado XML inline.
Utiliza los controles de Fondo de Vista Previa sobre el lienzo para probar cómo se comportan tus trazados vectoriales, sombras y rellenos semitransparentes sobre distintos colores de superficie.
Revisa el panel de Información del Archivo a la derecha para verificar el nombre exacto, tamaño en bytes, atributos width y height declarados y valores de coordenadas viewBox.
Desplázate al inspector de Código SVG para leer o copiar el marcado XML en bruto, o haz clic en "Convertir a PNG" / "Optimizar SVG" en el panel de Acciones para continuar tu flujo de trabajo.
Una vez verificada la integridad visual y la estructura DOM de tu SVG, aplica los resultados directamente:
Copia el código XML verificado desde el panel inspector inferior para pegarlo directamente en plantillas web, reemplazando colores hexadecimales fijos por fill="currentColor" para temas CSS dinámicos.
Confirma que ningún trazado quede recortado por el viewBox y que todos los bordes se rendericen limpiamente antes de pulsar "Convertir a PNG" para generar activos de alta resolución.
Si el panel de Código SVG revela miles de líneas de datos privados de Adobe Illustrator <i:pgf> o espacios de nombres sodipodi: de Inkscape, haz clic en "Optimizar SVG" para reducir el archivo entre un 40% y un 80%.
Si un SVG se ve en blanco, recortado o sin estilo dentro del visor, el inspector está revelando un problema subyacente en el código XML original:
O bien los trazados del SVG son de color blanco puro (#FFFFFF) sobre un fondo blanco, o bien las coordenadas del <path> están dibujadas fuera de los límites declarados por el atributo viewBox.
Primero, cambia el Fondo de Vista Previa a "Negro" o "Cuadrícula". Si sigue en blanco, revisa el panel de Código SVG para comparar los números viewBox="minX minY Ancho Alto" con las coordenadas <path d="M...">.
El SVG contiene nodos <text font-family="..."> activos que hacen referencia a una fuente tipográfica no instalada en tu ordenador o dispositivo local.
Busca etiquetas <text> en el panel de Código SVG. Para que el SVG se vea idéntico en cualquier dispositivo, vuelve a exportarlo desde tu programa de diseño activando "Convertir texto a contornos/trazados".
Las políticas de seguridad del navegador (CSP y CORS) bloquean las vistas previas aisladas de SVG para que no descarguen URLs de imágenes externas de terceros.
Incrusta cualquier subimagen de mapa de bits directamente dentro del SVG como cadenas inline data:image/png;base64,... en lugar de enlaces HTTP externos.
Comprende cuándo utilizar el Visor SVG frente a nuestro Optimizador de SVG o el Convertidor de SVG a PNG:
| Característica / Escenario | Visor e Inspector SVG (Esta Herramienta) | Optimizador de SVG (/svg-optimizer/) | Convertidor de SVG a PNG (/) |
|---|---|---|---|
| Propósito Principal | Vista previa visual multifondo, auditoría de dimensiones ViewBox e inspección de código DOM XML | Minificación automática y eliminación de metadatos XML redundantes para reducir el peso del .svg |
Rasterización de archivos vectoriales .svg o código XML a mapas de bits .png transparentes de 32 bits |
| Resultado / Entregable | Descarga del .svg original verificado, código fuente XML copiable y diagnóstico de metadatos |
Archivo vectorial .svg minificado listo para producción (40%–80% más ligero) |
Imagen .png de alta resolución (dimensiones en px personalizadas y metadatos de 300 DPI) |
| Prueba de Contraste de Fondo | Selector interactivo de fondo en Cuadrícula, Blanco, Negro y Hexadecimal para control de calidad | Vista previa comparativa lado a lado antes y después de optimizar | Composición permanente del fondo elegido (Transparente o color sólido) dentro del PNG exportado |
| Lectura de Dimensiones y ViewBox | Tabla de Información del Archivo con Nombre, Tamaño, Ancho, Alto y cadena exacta de ViewBox | Enfocado en Tamaño Original vs. Tamaño Optimizado y porcentaje de ahorro (%) | Enfocado en Ancho × Alto de píxeles de salida y resolución DPI de impresión |
Sí, es 100% seguro y privado. Nuestro Visor SVG Online se ejecuta íntegramente dentro de tu navegador web utilizando las APIs locales de JavaScript FileReader y análisis DOM. Tus archivos .svg y el código XML pegado nunca salen de tu ordenador y jamás se suben a ningún servidor remoto.
Piensa en viewBox="min-x min-y width height" como el sistema de coordenadas interno (lienzo virtual) donde se dibujan los trazados vectoriales, mientras que width y height definen el tamaño externo de visualización en pantalla. Si un SVG tiene un viewBox="0 0 100 100" válido, puede escalar limpiamente a 24 px o a 2000 px sin recortarse.
¡Sí! A diferencia de las miniaturas estáticas del Explorador de Windows o Finder de macOS, nuestro lienzo de vista previa en el navegador renderiza tanto animaciones CSS @keyframes como animaciones nativas SVG SMIL (<animate>, <animateTransform>) en tiempo real a 60 fotogramas por segundo.
Muchas herramientas de diseño exportan SVGs adaptables (responsive) únicamente con el atributo viewBox (omitiendo width y height fijos para que el gráfico escale al 100% de su contenedor CSS). Sin embargo, si el viewBox falta (N/A), recomendamos encarecidamente añadir viewBox="0 0 Ancho Alto" en la etiqueta <svg> para que escale correctamente.
Sí. Dentro del panel de "Acciones" situado justo al lado de la vista previa, puedes hacer clic en "Optimizar SVG" para limpiar y comprimir el código XML en nuestro Optimizador de SVG, o pulsar "Convertir a PNG" para exportar un PNG en alta resolución.
Cada página resuelve una necesidad específica. Conecta tu flujo de trabajo con nuestras utilidades locales.
Elimina metadatos de editores y comentarios para reducir el tamaño de archivos SVG entre un 40 % y un 80 % sin perder calidad.
Convierte vectores SVG a PNG transparentes de alta resolución con dimensiones personalizadas (px) y metadatos de 300 DPI.
Convierte decenas o cientos de archivos SVG simultáneamente a PNG, JPG o WebP y descárgalos en un archivo ZIP.
Crea paquetes completos de favicon.ico e iconos de aplicaciones para iOS, Android, macOS y Windows desde una sola imagen.