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.

Herramientas SVG

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

Explorar otras categorías de herramientas

Minificar

Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.

Embellecer

Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.

Desminificar

Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.

Conversión

Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.

Preprocesadores CSS

Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.

Herramientas JSON

Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.

DevOps e Infra

Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.

CI/CD

GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.

Logs y observabilidad

JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.

Kubernetes

Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.

Red / IP

CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.

Seguridad y tokens

JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.

API y esquemas

Herramientas OpenAPI para formatear, validar y analizar tus specs.

Codificación

Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.

Utilidades para desarrolladores

Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.

Texto y Markdown

Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.

IA y LLM

Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.

Datos de prueba

Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.

Serialización

Serializa y deserializa estructuras PHP junto a los flujos JSON.