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.

Cargando…
Redimensionar SVG — guía de dimensiones y viewBox
Corrige exports SVG caprichosos inspeccionando width, height y viewBox, y reescribiendo las dimensiones con un escalado responsive predecible.

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

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Fast delivery badge</title> <desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text> </g> </g> </svg>

Salida

Pon width a 120 y deja la proporción activada para reducir el badge a la mitad conservando el viewBox.

Conservar la proporción desde el viewBox

Entrada de ejemplo

<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10"/></svg>

Salida

Define solo el ancho y deja activado el modo de proporción para inferir automáticamente la altura correspondiente.

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.

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.