Escrito por Jamie Park — Diseñadora UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Creé SVG2PNG después de cansarme de que los activos de los clientes estuvieran alojados en servidores aleatorios. Más sobre mí →
He pasado más horas depurando errores de escalado de SVG de las que quiero admitir. El ícono que se ve perfecto en escritorio pero se recorta en móvil. El logo que mide 800px de ancho en la cabecera porque alguien eliminó el atributo width. “Escalable infinitamente” no significa “responsivo automáticamente”. Después de arreglar estos fallos en decenas de proyectos, esto es lo que realmente importa: MDN: viewBox, preserveAspectRatio, y saber cuándo SVG no es la herramienta adecuada.
El atributo MDN: viewBox define el sistema de coordenadas de tu SVG. Consta de cuatro valores: min-x min-y width height. Tenerlo bien definido es el 90% de la batalla para conseguir SVG responsivos.
<!-- ❌ Fixed dimensions — will not scale -->
<svg width="200" height="200">...</svg>
<!-- ✅ MDN: viewBox without fixed dimensions — fully responsive -->
<svg MDN: viewBox="0 0 200 200">...</svg>
<!-- ✅ Best practice: responsive SVG in an img tag -->
<img src="icon.svg" alt="" style="width:100%;max-width:200px">La regla es sencilla: siempre define MDN: viewBox, nunca establece atributos width/height en el elemento SVG a menos que necesites un tamaño fijo concreto. Deja que CSS controle las dimensiones de renderizado.
width="800" height="600" hardcodeados, elimina esos atributos: conserva solo el MDN: viewBox.preserveAspectRatio controla lo que ocurre cuando la relación de aspecto del contenedor del SVG no coincide con la del MDN: viewBox. Acepta dos valores: alineación y meet/slice.
<!-- Default: scales to fit, keeps proportions, centers in container -->
<svg MDN: viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<!-- Fill entire container, crop overflow (like background-size: cover) -->
<svg MDN: viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<!-- Stretch to fill, ignore proportions (rarely what you want) -->
<svg MDN: viewBox="0 0 100 100" preserveAspectRatio="none">Para gráficos de portada e ilustraciones decorativas, xMidYMid slice suele verse mejor: el SVG llena todo el espacio manteniendo sus proporciones. Para íconos y logos, el valor por defecto xMidYMid meet es el que necesitas.
SVG es insuperable para logos, íconos, ilustraciones y gráficos sencillos. Pero tiene sus límites:
/* Make an inline SVG scale with its container */
.inline-svg { width: 100%; height: auto; }
/* Constrain max size while remaining responsive */
.icon { width: 100%; max-width: 48px; height: auto; }
/* Color an SVG icon with CSS (only works with inline SVG) */
.icon:hover path { fill: #f97316; }
/* Hide decorative SVGs from screen readers */
<svg aria-hidden="true">...</svg>| Caso de uso | Formato | Por qué |
|---|---|---|
| Logotipo en la cabecera | SVG | Se ve nítido en cualquier resolución |
| Sistema de iconos | Sprite de SVG | Un solo archivo, iconos ilimitados, se colorean con CSS |
| Ilustración de hero (sencilla) | SVG | Archivo muy ligero, se escala hasta 4K sin perder calidad |
| Ilustración de hero (compleja) | PNG @2x | Se renderiza más rápido que un SVG muy pesado |
| Gráficos para correos electrónicos | PNG | Soporte universal en todos los clientes de correo |
| Publicación en redes sociales | PNG o JPG | Las plataformas no admiten SVG |
¿Necesitas exportar un diseño SVG como PNG para un caso de uso concreto? SVG2PNG convierte SVG a PNG, JPG o WebP a cualquier resolución — todo desde tu navegador, sin necesidad de subir archivos.
Escrito por Jamie Park — Diseñadora UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Creé SVG2PNG después de cansarme de que los activos de los clientes estuvieran alojados en servidores aleatorios. Más sobre mí →