Visor SVG en línea — Vista previa, zoom e inspector viewBox

Previsualiza tu SVG sobre fondo claro, oscuro o de cuadrícula, luego inspecciona width, height y viewBox sin salir del navegador.

Cargando…
Visor SVG — guía de vista previa e inspección
Previsualiza markup SVG pegado antes de publicarlo, compara la legibilidad en distintos fondos e inspecciona problemas de viewBox sin abrir una herramienta de diseño.

Notas para desarrolladores

Encaja como comprobación visual rápida antes de optimize, resize o conversión a JSX. El modo cuadrícula ayuda a detectar padding transparente no deseado. Width, height y viewBox se leen directamente del <svg> raíz. La v1 se centra en vista previa e inspección, no en flujos avanzados de pan/export.

Cuándo elegir esta herramienta

Previsualizar un SVG de handoff de diseño antes de incrustarlo en código. Comprobar si un icono desaparece sobre fondos oscuros. Confirmar valores de width/height/viewBox antes de correcciones responsive. Detectar márgenes transparentes alrededor de badges y logos de marketing.

Ejemplos prácticos

Vista previa del logo FastMinify en fondos claro y oscuro

Entrada de ejemplo

<svg width="480" height="144" viewBox="0 0 480 144" xmlns="http://www.w3.org/2000/svg"><rect width="480" height="144" rx="36" fill="#f97316"/></svg>

Salida

El visor ajusta el logo completo al 100 % de zoom y luego permite acercar y desplazar cuando el artwork desborda el área de vista previa.

Comprobación rápida de viewBox

Entrada de ejemplo

<svg width="480" height="144"><rect width="480" height="144" rx="36" fill="#f97316"/></svg>

Salida

Un viewBox faltante se ve de inmediato en el panel de inspección, lo que ayuda a decidir si resize-svg debe añadir uno.

Explorar herramientas SVG relacionadas

¿Hay que corregir el escalado a continuación? Abre resize SVG. ¿Quieres un asset más ligero? Usa optimize SVG o recorre el hub de herramientas SVG.

FAQ del visor SVG

Vista previa e inspección locales

¿Edita el SVG?

No — el visor sirve para vista previa e inspección. Usa resize-svg u optimize-svg cuando quieras cambiar el markup.

¿Por qué cambiar de fondo?

Ayuda a detectar artwork de bajo contraste, padding transparente e iconos que solo se ven bien en un tema.

¿Se sube mi SVG?

Nunca. El renderizado y la inspección ocurren en local en tu navegador.

Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.