SVG para web: cuándo los vectores ganan a los píxeles — y cuándo no

Una diseñadora te envía un PNG de 3 megabytes de un logotipo que podría ser un archivo SVG de 800 bytes. Cada correo, cada carga de página paga por esa descarga: el teléfono del destinatario la decodifica, el cliente de correo la almacena en caché y nadie llega a notar que toda la imagen es un círculo, dos trazos y una forma. Esta guía trata de entender qué son realmente los gráficos vectoriales, cuándo el SVG gana de verdad al PNG, cuándo es una trampa y por qué aún necesitarás un PNG de vez en cuando.

El SVG es una receta, no un cuadro

Un PNG es un mapa de bits: una cuadrícula de píxeles de colores, cada uno un valor guardado. El SVG — Scalable Vector Graphics — es XML, texto plano que describe formas con geometría. Un rectángulo es <rect x="..." y="..." width="..." height="...">; un círculo es «centro en (12,12), radio 10»; un trazado es una secuencia de órdenes de trazar, línea y curva. El navegador lee esas instrucciones, calcula la geometría y dibuja a la resolución que la pantalla necesite. Acércate en un vector y no hay nada que difuminar; el navegador simplemente vuelve a ejecutar la operación con una escala mayor.

Un icono de insignia — un círculo azul con una marca de verificación blanca — es un ejemplo completo y real:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
  <circle cx="12" cy="12" r="10" fill="#2f6fed"/>
  <path d="M8 12.5l2.5 2.5L16 9.5" stroke="#ffffff" stroke-width="2" fill="none"/>
</svg>

Ese archivo entero pesa menos de 250 bytes. La misma forma exportada como PNG a 2x son 3–10 kilobytes; escalada a un logotipo de 512 píxeles, decenas de kilobytes. Y como el SVG es texto, se puede inspeccionar y comparar: ábrelo en cualquier editor, haz un grep, confírmalo en git y verás exactamente qué cambió. Un PNG es un muro de píxeles; un SVG es código fuente.

Cuándo el SVG gana sin discusión

El SVG gana de forma contundente en unas pocas situaciones. Si tu imagen son sobre todo formas planas con aristas limpias, el SVG no es un capricho: es mediblemente más ligero e infinitamente más nítido:

• Logos e iconos: trabajo geométrico y plano hecho de rellenos, trazos y trazados. El caso de uso canónico del SVG.
• Nitidez a cualquier zoom: el texto y las aristas se mantienen perfectos en un monitor 4K, en la esquina ampliada de un panel o impresos en un banner a 300dpi. Un PNG se difumina en cuanto supera su tamaño nativo.
• Archivos diminutos para formas simples: el tamaño sigue a la complejidad, no a la resolución; un icono típico sigue siendo una fracción del PNG.
• Tema con CSS: el SVG en línea hereda currentColor y reacciona a hover, foco y modo oscuro. Un PNG queda congelado en el momento de exportarse.
• Animación e interactividad: los elementos SVG forman parte del DOM: puedes hacer clic en ellos, animarlos con CSS o JavaScript y vincularlos a datos. Nada de eso existe en una imagen estática.

Cuándo el SVG es la herramienta equivocada

La misma lógica que hace diminuto al SVG para iconos lo hincha en fotografía. Una foto son millones de decisiones de color individuales; describirla como vectores significa miles de paradas de degradado y formas difuminadas, y el archivo supera a un JPEG equivalente mientras el navegador se esfuerza en cada fotograma. El trabajo con filtros pesados — sombras suaves, brillos, desenfoque en capas — casi siempre se sirve mejor como raster.

El costo oculto está en el renderizado. Un PNG se decodifica una vez y se copia a la pantalla; un SVG se vuelve a rasterizar al tamaño objetivo en cada pasada de diseño, cada zoom y cada fotograma de animación. Un SVG complejo en una página está bien. Cincuenta SVG de copos de nieve, cada uno envuelto en un filtro de desenfoque, se notan con tirones en una página que se desplaza. Mide el rendimiento antes de vectorizar cuanto veas:

viewBox, ancho y alto: quién decide el tamaño

La parte más confusa de un archivo SVG es la diferencia entre el tamaño de visualización y el sistema de coordenadas. Los atributos width y height (o las propiedades CSS) dicen qué tan grande debe dibujarse la imagen, en píxeles CSS. El viewBox dice cuán grande es el dibujo en sí: viewBox="0 0 24 24" significa «la obra mide 24 unidades de ancho y 24 de alto, comenzando en 0,0». El navegador divide el tamaño de visualización entre esas unidades y escala todo el dibujo — por eso un icono de 24 unidades se ve perfecto a 200 píxeles.

Con un viewBox presente, la proporción se mantiene por defecto. preserveAspectRatio="xMidYMid meet" es el valor por defecto y se comporta como object-fit: contain: la obra encaja, centrada, con espacio vacío si la proporción de la caja difiere; la variante slice se comporta como object-fit: cover. Vale la pena un hábito: no elimines los atributos width y height del archivo. Con un viewBox presente, los navegadores modernos dejan que el CSS los anule limpiamente, y conservar los atributos le da al navegador dimensiones intrínsecas antes de que llegue la hoja de estilos.

Cómo poner un SVG en una página: img, en línea o fondo

Dónde coloques el SVG determina qué se le permite hacer. Cuatro contenedores habituales:

La etiqueta <img> es la que trabaja: estática, cacheable y de carga en paralelo. También es deliberadamente inerte — en cuanto necesitas estados hover, currentColor o animación, tienes que incrustar el SVG y asumir el peso extra del HTML. Las imágenes de fondo encajan con la ilustración decorativa y repetida que el árbol de accesibilidad nunca debería ver. <object> sigue ejecutando scripts y recursos externos, que es exactamente por qué ha quedado obsoleto para iconos.

Trampas del SVG externo: CSP, cookies y scripts

Un SVG es texto, así que puede llevar un <script> dentro. Lo que ocurra después depende solo de dónde lo cargues. Dentro de <img src> el SVG se trata como una imagen estática: los scripts nunca se ejecutan y las referencias externas — fuentes, hojas de estilo, otras imágenes — se ignoran por seguridad. Ese es el contenedor seguro. Dentro de <object>, un <iframe> en línea o un documento navegado directamente, un SVG es un documento completo: los scripts se ejecutan y las cookies viajan. Un .svg de terceros en esa posición es código activo en tu página.

Content-Security-Policy asigna cada contenedor. img-src regula <img> y las imágenes de fondo; object-src regula <object> y <embed>; el SVG en línea dentro del HTML cae bajo el script-src y el style-src propios de la página. Y una política estricta que no liste el host del SVG rechazará el archivo sin más: un motivo más para autoalojar lo que incrustas en lugar de enlazar desde fuera.

Accesibilidad: title, desc y etiqueta

Un SVG no transmite ningún significado a un lector de pantalla hasta que se lo pongas. Dale al elemento role="img", un <title> como nombre, un <desc> para la descripción más larga y conéctalos con aria-labelledby:

<svg role="img" aria-labelledby="badgeTitle badgeDesc" viewBox="0 0 24 24">
  <title id="badgeTitle">Insignia verificada</title>
  <desc id="badgeDesc">Un círculo azul con una marca de verificación blanca</desc>
  <circle cx="12" cy="12" r="10" fill="#2f6fed"/>
  <path d="M8 12.5l2.5 2.5L16 9.5" stroke="#fff" stroke-width="2" fill="none"/>
</svg>

Dos hábitos más dan fruto. Usa elementos <text> reales en lugar de convertir el texto en trazados: los lectores de pantalla leen el texto real, y sigue siendo seleccionable y buscable. Y si un SVG es puramente decorativo, añade aria-hidden="true" (o déjalo como imagen de fondo) para que la tecnología de asistencia lo salte por completo.

Cuándo aún tienes que rasterizar a PNG

El vector no es universal. Bastantes canales de distribución reales rechazan o estropean el SVG, y la única respuesta segura es un PNG del tamaño adecuado:

• Clientes de correo: Outlook — sobre todo el motor de Windows — no representa el SVG de forma fiable; el email transaccional sigue usando PNG precisamente porque un mapa de bits es la única apuesta segura.
• Tarjetas de previsualización social: los robots de Open Graph y Twitter Card buscan tu og:image y la mayoría muestra un raster con fiabilidad; las previsualizaciones SVG suelen rechazarse o salir en blanco.
• Favicons: los navegadores modernos aceptan favicons .svg, pero los apple touch icons y las herramientas antiguas quieren PNG (apple-touch-icon.png) — se entregan ambos.
• Navegadores antiguos y WebViews: todo lo anterior a 2017, algunos WebViews integrados y quioscos heredados no soportan SVG en absoluto.
• Formularios de subida: los CMS, marketplaces y plataformas de diseño rechazan .svg por extensión porque puede contener scripts; el PNG pasa cualquier validador.

Rasteriza SVG a PNG — en tu navegador, en Convrs

El flujo más limpio conserva el SVG como fuente de verdad y rasteriza solo para el canal que lo exige. El conversor de SVG a PNG de Convrs convierte cualquier SVG en un PNG nítido dentro de tu navegador: pega o arrastra el archivo, elige el tamaño en píxeles (256, 512 o 1024 para un icono retina, por ejemplo) y descarga el resultado. La conversión corre por completo en la Canvas API de tu propia pestaña: el archivo nunca se sube y ningún servidor llega a verlo. Sin registro, sin cola; nada que confiar más allá del navegador que ya tienes.

Conserva el vector. Rasteriza donde el mundo lo exija. Y la próxima vez que una diseñadora te envíe un logotipo de 3 megabytes, ya sabrás exactamente qué decir.