Redimensionar SVG en línea — Width, Height y viewBox
Inspecciona width, height y viewBox, luego corrige los exports SVG sin romper el responsive. Muy útil con archivos de handoff de diseño.
Notas para desarrolladores
Usa primero el viewBox existente para conservar la proporción. Si falta viewBox, puede inferirlo desde las dimensiones actuales. Encaja sobre todo con exports normales con width/height numéricos. Combínalo con validate-svg si también quieres orientación sobre title/desc.
Opciones
- Ancho
- Atributo width de destino. Déjalo vacío para conservar el ancho actual (o derivarlo de height + proporción).
- Alto
- Atributo height de destino. Déjalo vacío para conservar el alto actual (o derivarlo de width + proporción).
- Conservar proporción
- Cuando se define una dimensión, calcula la otra a partir de la proporción / viewBox existente.
- Asegurar viewBox
- Si falta viewBox, deriva uno desde width/height actuales para que el escalado siga siendo predecible.
Cuándo elegir esta herramienta
Corregir SVG que escalan mal en layouts responsive. Normalizar exports de diseño sobredimensionados antes de publicarlos. Añadir viewBox a assets antiguos que solo declaran width/height. Generar un badge inline más pequeño sin reexportar desde Figma.
Ejemplos prácticos
Badge de marketing con metadatos
Entrada de ejemplo
Salida
Conservar la proporción desde el viewBox
Entrada de ejemplo
Salida
Explorar herramientas SVG relacionadas
¿Necesitas salida CSS codificada? Prueba SVG a Data URI. Valida la accesibilidad con validate SVG o recorre el hub de herramientas SVG.
FAQ de redimensionar SVG
Dimensiones y escalado responsive
¿Por qué importa el viewBox?
Define el sistema de coordenadas interno que permite al SVG escalar de forma predecible en layouts responsive.
¿Puede inferir dimensiones faltantes?
Puede inferir un width o height faltante cuando ya existe una proporción válida.
¿Corrige todos los exports rotos?
Cubre los casos habituales de width/height/viewBox, pero transforms inusuales pueden seguir necesitando revisión manual.
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.
- 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.
- Codificación
Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.
- Serialización
Serializa y deserializa estructuras PHP junto a los flujos JSON.
- Herramientas JSON
Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.
- 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.
- 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 color y CSS
Comprobación de contraste WCAG pegada localmente con sintaxis de color CSS moderna — vistas de par y matriz, nunca se sube.
- 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.
- Herramientas HTTP
cURL, mensajes HTTP, URLs, HAR y Cookie / Set-Cookie pegados en el navegador — formatear e inspeccionar, nunca se envían.
- Herramientas SEO / Web
Genera meta tags, Open Graph y Twitter Card localmente — vistas simuladas desde tus entradas, nunca fetch de tu sitio en vivo.
- 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.
- Etiquetas de código de barras
Dibuja etiquetas Code 128, EAN-13 y UPC-A en el navegador — descarga PNG y SVG, no es un lookup GS1.