Imágenes vectoriales vs. rasterizadas: ¿cuándo usar SVG?
Vectorial vs. rasterizada: cómo guarda cada una la imagen, por qué los logos van en SVG y las fotos nunca, y cuándo conviene convertir entre ambas.
La diferencia entre imágenes vectoriales y rasterizadas tiene que ver, en el fondo, con cómo se guarda una imagen. Una imagen rasterizada (PNG, JPG, WebP) es una cuadrícula fija de píxeles de colores, mientras que una imagen vectorial (SVG) es un conjunto de instrucciones de dibujo: formas, líneas, curvas y rellenos descritos con coordenadas. Esa única diferencia decide para qué sirve cada una. Los vectores se ven nítidos a cualquier tamaño y son ideales para logos, iconos y diagramas. Las imágenes rasterizadas capturan el detalle infinito y sutil de una fotografía. En esta guía te explicamos cuándo usar SVG, cuándo es mala idea y qué pasa de verdad cuando conviertes de un tipo al otro.
Qué es realmente una imagen rasterizada#
Una imagen rasterizada es un rectángulo de píxeles, cada uno con su propio color. Una foto de 1200 × 800 tiene exactamente 960.000 cuadraditos de color, ni uno más ni uno menos. PNG, JPG, WebP, GIF y HEIC son formatos rasterizados; se diferencian en cómo comprimen esos píxeles, no en la idea básica. (Si estás eligiendo entre los dos más comunes, nuestra guía PNG vs. JPG lo explica.)
Como el número de píxeles es fijo, una imagen rasterizada tiene un tamaño natural. Si la reduces, se descartan los píxeles que sobran. Si la amplías, el programa tiene que inventarse píxeles nuevos entre los existentes, y por eso un logo pequeño estirado en un banner se ve borroso o pixelado. La ventaja es que una cuadrícula de píxeles puede registrar todo lo que ve una cámara: piel, follaje, niebla, sombras y cada degradado intermedio.
Qué es realmente una imagen vectorial#
Una imagen vectorial no guarda píxeles. Guarda una descripción, algo así como "dibuja aquí un círculo con este radio, rellénalo de morado y luego traza esta curva por estos puntos". SVG (Scalable Vector Graphics) es el formato vectorial de la web: lo define la especificación SVG del W3C y lo admiten todos los navegadores modernos, como explica la documentación de SVG de MDN. Por dentro, un archivo SVG es texto plano (XML) que podrías abrir en un editor de texto.
Los píxeles solo aparecen en el momento en que la imagen se muestra, cuando el navegador o la aplicación dibuja esas instrucciones al tamaño que necesite. Por eso los vectores se escalan sin perder nitidez: un logo dibujado con un círculo y unas cuantas curvas se vuelve a dibujar perfectamente nítido en un móvil, en un monitor 4K o en un póster impreso. Y por eso los gráficos vectoriales sencillos suelen ser archivos diminutos, ya que describir unas pocas formas solo requiere unas pocas líneas de texto. Si quieres una introducción más completa al formato, lee nuestro artículo sobre qué es un archivo SVG.
Vectorial vs. rasterizada: comparación directa#
| Vectorial (SVG) | Rasterizada (PNG, JPG, WebP) | |
|---|---|---|
| Cómo se guarda | Formas, trazados y rellenos descritos con coordenadas | Una cuadrícula fija de píxeles de colores |
| Al ampliarla | Se mantiene nítida a cualquier tamaño | Se ve borrosa o pixelada por encima de su tamaño original |
| Ideal para | Colores planos, bordes limpios, formas simples | Fotos, degradados, texturas, detalle natural fino |
| Tamaño de archivo | Pequeño en gráficos simples, enorme en los complejos | Crece con el número de píxeles y el detalle |
| Edición | Cambias colores, formas y texto sin perder calidad | Se editan píxeles; la calidad puede degradarse |
| Usos típicos | Logos, iconos, ilustraciones, gráficos, archivos de corte | Fotografías, capturas de pantalla, documentos escaneados |
Cuándo necesitas SVG de verdad#
Elige un formato vectorial cuando la imagen esté hecha de formas, no capturada del mundo real, y tenga que verse bien a más de un tamaño:
- Logos. El mismo logo aparece como un favicon diminuto, en la cabecera de una web y en un banner impreso. Un solo SVG sirve para todo.
- Iconos y gráficos de interfaz. Se ven nítidos en pantallas de alta densidad, y los iconos sencillos suelen pesar menos en SVG que en PNG.
- Gráficos, diagramas e ilustraciones con colores planos y líneas limpias.
- Todo lo que controle una máquina. Las plotters de corte, las cortadoras de vinilo y los grabadores láser siguen trazados, así que necesitan contornos vectoriales, no píxeles.
- Gráficos que vas a seguir editando. Cambiar el color o el tamaño de un vector no lo degrada, por muchas veces que lo hagas.
Cuándo lo correcto es una imagen rasterizada#
Usa un formato rasterizado siempre que la imagen sea una fotografía o tenga detalle fotográfico:
- Fotos de cualquier cosa. Las escenas reales están formadas por millones de colores ligeramente distintos, justo lo que una cuadrícula de píxeles registra bien y lo que las formas no pueden describir de manera eficiente.
- Capturas de pantalla. Ya son píxeles, así que PNG las conserva tal cual.
- Escaneos y texturas, como papel, tela u obras pintadas, donde el grano es precisamente lo importante.
- Cualquier sitio que no acepte SVG. Muchos formularios de subida, redes sociales y aplicaciones de oficina piden PNG o JPG, incluso para un logo.
La regla práctica: si se dibujó, plantéate el vector. Si se fotografió, déjalo en raster.
Convertir entre vectorial y rasterizada#
Las dos direcciones no son simétricas, y de ahí viene casi toda la confusión.
De vectorial a rasterizada es fácil y, en la práctica, sin pérdidas. Como un SVG es un conjunto de instrucciones, un conversor puede dibujarlo al tamaño en píxeles que le pidas, así que obtienes un resultado nítido exactamente a las dimensiones que necesitas. Nuestro conversor de SVG a PNG te deja elegir una escala o un ancho y alto exactos, conserva la transparencia y funciona por completo en tu navegador. Nuestra guía sobre qué pasa al convertir un SVG a PNG explica los detalles, como la forma en que se decide el tamaño final.
De rasterizada a vectorial es vectorizar por trazado, no "desrasterizar". Nada puede recuperar el archivo vectorial original a partir de un PNG o un JPG; esa información desaparece en cuanto la imagen se convierte en píxeles. Lo que hace un trazador es agrupar los píxeles en zonas planas de color parecido y dibujar un contorno alrededor de cada una. En un logo que ya es un puñado de formas planas, el resultado puede ser casi perfecto. Nuestro conversor de PNG a SVG está pensado justo para eso: logos, dibujos de línea e ilustraciones sencillas.
Con una fotografía, el trazado sale mal. Cuando pasamos una foto de 14,1 KB por nuestro conversor de JPG a SVG, el resultado fue un SVG de 151,5 KB formado por 607 trazados: más de diez veces más grande y con manchas visibles al lado del original. La herramienta ahora cuenta primero los colores de tu imagen y te avisa cuando una foto va camino de acabar así. Si te preguntas por qué el tamaño se dispara, nuestro artículo sobre por qué un SVG vectorizado pesa más que el PNG lo explica paso a paso.
Preguntas frecuentes#
¿Cuál es la principal diferencia entre imágenes vectoriales y rasterizadas? Una imagen rasterizada guarda una cuadrícula fija de píxeles de colores, mientras que una imagen vectorial guarda formas y líneas como instrucciones matemáticas que se dibujan al mostrarla. Por eso los vectores se mantienen nítidos a cualquier tamaño y las imágenes rasterizadas se ven borrosas al ampliarlas por encima de su resolución original.
¿Es mejor SVG que PNG? SVG es mejor que PNG para logos, iconos y gráficos planos sencillos, y PNG es mejor para capturas de pantalla, fotos y cualquier imagen con detalle complejo. Ninguno es mejor en general; están pensados para tipos de imagen distintos.
¿Puedo convertir una foto a SVG? Puedes vectorizar una foto a SVG, pero el resultado suele ser mucho más pesado que el original y se ve manchado, porque las transiciones suaves de color de la foto se convierten en cientos de formas planas. Mantén las fotos en JPG, PNG o WebP.
¿Convertir un PNG a SVG lo hace escalable sin límite? Convertir un PNG a SVG solo lo hace escalable si la imagen es lo bastante sencilla para vectorizarse limpiamente, como un logo o un dibujo de línea. El trazador vuelve a dibujar los píxeles como formas, así que un trazado limpio escala bien y uno desordenado solo amplía las formas desordenadas.
¿Se pierde calidad al convertir SVG a PNG? Convertir SVG a PNG no pierde calidad al tamaño que exportas, porque el vector se vuelve a dibujar desde cero exactamente a ese tamaño en píxeles. Eso sí, después el PNG no se podrá ampliar como el SVG, así que expórtalo al tamaño más grande que vayas a necesitar.
¿Mi logo debería estar en SVG o en PNG? Tu logo debería tener un archivo maestro en SVG, porque escala limpiamente a cualquier tamaño, desde un favicon hasta una valla publicitaria. Exporta copias en PNG a partir de ese SVG para las plataformas y formularios que no aceptan SVG.
En resumen#
- Rasterizada (PNG, JPG, WebP) es una cuadrícula fija de píxeles: lo correcto para fotos, capturas de pantalla y escaneos.
- Vectorial (SVG) es un conjunto de instrucciones de dibujo: lo correcto para logos, iconos, diagramas y archivos de corte.
- Convierte un SVG en píxeles a cualquier tamaño con SVG a PNG. Vectoriza gráficos sencillos con PNG a SVG o JPG a SVG, y deja las fotos como fotos.
- Encontrarás más comparativas en nuestras guías de formatos de archivo, y todas las herramientas de imagen en el centro de herramientas de imagen.
Prueba las herramientas
Gratis, privado e instantáneo. Todo funciona en tu navegador.
