¿Qué es un archivo SVG y cómo se convierte?

Descargas un logo o un icono y en tu ordenador se guarda como logo.svg. Lo abres en un visor de fotos normal y ni siquiera aparece la vista previa. Intentas subirlo a algún sitio que espera una imagen "normal" y la web lo rechaza. Un archivo SVG no está roto: es simplemente un tipo de imagen completamente distinto a un JPG o un PNG, y entender esa diferencia es la clave para usarlo bien.

Qué es realmente un SVG#

SVG son las siglas de Scalable Vector Graphics (Gráficos Vectoriales Escalables), y el nombre describe exactamente lo que es: una imagen construida con formas matemáticas (líneas, curvas, puntos, rellenos), no con una cuadrícula de píxeles de color. Un JPG o un PNG guardan la imagen como una matriz fija de valores de píxel, así que si haces suficiente zoom verás bloques cuadrados. Un SVG guarda instrucciones para dibujar las formas, así que cualquier visor puede redibujarlo a cualquier tamaño, desde un favicon de 16 píxeles hasta una lona del tamaño de una pared, con bordes perfectamente nítidos cada vez.

Por dentro, un archivo SVG es texto plano, en concreto XML, por lo que puedes abrirlo con un editor de texto y leer literalmente las definiciones de las formas. Esto también significa que los SVG se comprimen extremadamente bien y pueden ser diminutos: un icono sencillo suele pesar apenas unos kilobytes, menos que el PNG equivalente.

Por qué el SVG está por todas partes en logos e iconos#

Tres propiedades convierten al SVG en la opción por defecto para casi todo lo que no sea una fotografía:

• Escalado infinito sin pérdida de calidad. Un logo tiene que verse nítido en una tarjeta de visita y en una valla publicitaria. Un solo SVG cubre ambos casos; un formato de mapa de bits necesitaría un archivo distinto en alta resolución para cada tamaño.
• Archivos diminutos para formas sencillas. Los iconos de color plano, los logos y las ilustraciones de línea se codifican de forma mucho más eficiente como trazados vectoriales que como cuadrículas de píxeles.
• Editable y estilizable con código. Al ser texto, los colores, trazos e incluso animaciones de un SVG se pueden controlar directamente con CSS y JavaScript, algo que ninguna imagen de mapa de bits permite.

Por eso casi todos los logos, iconos de navegación e ilustraciones de las webs se sirven en SVG, mientras que las fotos siempre van en JPG o WebP. Los formatos vectoriales y de mapa de bits no compiten por el mismo trabajo: están hechos para tipos de contenido completamente distintos.

En qué es malo el SVG#

La fortaleza del SVG es también su límite: solo funciona con imágenes formadas por figuras que se puedan describir. Una foto de un atardecer no tiene trazados limpios que describir, solo millones de valores de píxel únicos, así que las fotos dependen de formatos de mapa de bits como el JPG. Intentar "convertir" una foto a SVG no la reduce ni la afila; genera un archivo enorme lleno de miles de formas diminutas, o un trazado borroso y aproximado que pierde detalle. Usa SVG para gráficos que hayas dibujado, y formatos de mapa de bits para todo lo que hayas fotografiado.

Cómo convertir un SVG a PNG o JPG#

Convertir un archivo vectorial en uno de mapa de bits se llama rasterizar: renderizar las formas a un tamaño de píxel concreto y fijar el resultado en una cuadrícula de píxeles. Necesitarás rasterizar un SVG siempre que tengas que enviarlo a algún sitio que solo entiende imágenes "normales", como una publicación en redes sociales, una firma de correo o un formulario antiguo que rechaza archivos .svg.

El método gratuito más fiable no requiere instalar nada:

1. Abre el archivo SVG en un navegador (Chrome, Firefox y Edge renderizan SVG de forma nativa, solo tienes que arrastrar el archivo a una pestaña nueva).
2. Haz clic derecho sobre la imagen renderizada y elige "Guardar imagen como", seleccionando PNG.
3. Algunos navegadores solo guardan la imagen al tamaño por defecto del SVG. Para un tamaño de píxel concreto, abre el SVG en una herramienta gratuita como Figma o Inkscape, que te dejan exportar a la resolución que elijas.

Una vez tienes el PNG, suelen pasar dos cosas. Si el archivo es más grande de lo que necesitas para la web, pásalo por Comprimir imagen para reducirlo sin cambiar la calidad de forma visible, ya que incluso un icono exportado a alta resolución puede llevar más bytes de los necesarios. Si estás creando un favicon a partir de un logo, PNG a ICO convierte ese PNG exportado al formato .ico que esperan los navegadores y las barras de marcadores; exporta el SVG a 256x256 o más para que el icono se mantenga nítido en todos los tamaños que pidan Windows y los navegadores.

SVG frente a PNG frente a JPG, de un vistazo#

Si estás comparando PNG con otro formato de mapa de bits para tus propias imágenes, nuestra guía sobre el archivo WebP profundiza en esa comparación; la decisión entre vector y mapa de bits que vemos aquí es un paso previo, que se toma antes de llegar siquiera a PNG o JPG.

¿Es seguro abrir un archivo SVG?#

En general sí, con un matiz que conviene conocer: como el SVG está basado en XML y los navegadores permiten incrustar una etiqueta <script> dentro de él, un SVG malicioso puede técnicamente llevar código ejecutable. Esto casi nunca es un problema con un logo descargado de una fuente fiable, pero es la razón por la que algunos clientes de correo y plataformas CMS bloquean por defecto la subida de archivos SVG, y por la que conviene evitar abrir directamente en una pestaña del navegador un SVG de origen dudoso. Convertir primero ese SVG a PNG, usando una herramienta que solo rasteriza píxeles y no ejecuta scripts incrustados, elimina el riesgo por completo.

Preguntas frecuentes#

¿Qué programa abre un archivo SVG? Cualquier navegador moderno (Chrome, Firefox, Safari, Edge) abre y muestra un archivo SVG directamente al arrastrarlo a una pestaña nueva, y herramientas de diseño como Figma, Inkscape y Adobe Illustrator lo abren para editarlo.

¿Puedo convertir un SVG a PNG gratis? Sí, abrir el SVG en un navegador y guardar la imagen renderizada, o exportarlo desde una herramienta gratuita como Inkscape o Figma al tamaño de píxel que elijas, lo convierte a PNG sin necesidad de software de pago.

¿Por qué una web no me deja subir un archivo SVG? Muchos formularios de subida y plataformas CMS bloquean específicamente el SVG porque puede incrustar código de script ejecutable, un riesgo de seguridad que los formatos de mapa de bits no tienen, así que piden convertir primero el SVG a PNG o JPG.

¿Es el SVG mejor que el PNG? El SVG es mejor para logos, iconos e ilustraciones porque escala a cualquier tamaño sin difuminarse y ocupa poco; el PNG es mejor para fotografías, capturas de pantalla y cualquier imagen formada por detalle continuo de píxeles que no se pueda describir como formas.

¿Convertir un SVG a PNG pierde calidad? No se pierde ningún detalle si exportas el PNG a un tamaño de píxel suficientemente grande para su uso previsto, pero el PNG resultante queda fijado a esa resolución y se difuminará si lo agrandas más, a diferencia del SVG original.

¿Puedo editar los colores de un archivo SVG? Sí, como el SVG es texto plano, sus colores y formas se pueden editar directamente en un editor de texto, en una herramienta de diseño como Figma o Inkscape, o dinámicamente con CSS si está incrustado en una página web.

Ya sea que necesites un icono nítido en cualquier tamaño o simplemente un PNG que un formulario acepte, convertir un SVG solo requiere un paso de exportación. Con el archivo de mapa de bits en la mano, Comprimir imagen y PNG a ICO se encargan del resto: gratis, privado y funcionando por completo en tu navegador. O explora todas las guías de formatos de archivo del blog.