¿Qué es un archivo SVG? (Y cómo abrirlo, usarlo y crear uno)

Un archivo SVG (Scalable Vector Graphics) es una imagen hecha de matemáticas y código en lugar de una cuadrícula de píxeles. Como guarda la imagen como formas (líneas, curvas y rellenos) en vez de puntos de color, se mantiene nítida a cualquier tamaño, desde un icono diminuto de app hasta un cartel publicitario completo, y el archivo suele ser pequeño. Probablemente ya te has encontrado con SVGs como logotipos, iconos de sitios web y archivos de corte para Cricut.

Esta es una guía simple para cualquiera que acaba de encontrarse con uno: qué es realmente un SVG, qué contiene, para qué sirve y para qué no, cómo abrir uno y cómo crear uno a partir de una imagen que ya tienes. No necesitas conocimientos de desarrollo web.

La versión rápida

• Un SVG guarda una imagen como formas descritas en código, no como píxeles, así que escala a cualquier tamaño sin verse borroso.
• Es excelente para logotipos, iconos, ilustraciones simples y trabajos para Cricut o impresión. No es una buena opción para fotos.
• Abre uno en cualquier navegador web, una app de diseño (Illustrator, Inkscape, Figma, Canva) o incluso un editor de texto plano.
• Crea uno diseñándolo en software vectorial, o convirtiendo una imagen que ya tienes en un SVG.

SVG frente a una imagen normal (PNG o JPG)

Un PNG o JPG es una imagen rasterizada: una cuadrícula fija de píxeles de colores, como un mosaico. Si haces suficiente zoom, ves los cuadros; por eso un logotipo guardado como PNG se vuelve borroso cuando lo agrandas.

Un SVG es una imagen vectorial: un conjunto de instrucciones que dice "dibuja un círculo aquí, rellénalo de naranja, dibuja esta curva allá". Como la imagen se vuelve a dibujar a partir de esas instrucciones cada vez, se ve nítida a cualquier tamaño. Esa única diferencia es todo su atractivo. (Para ver un desglose completo de cuándo usar cada uno, consulta PNG vs SVG.)

Qué hay realmente dentro de un archivo SVG

Esta es la parte que sorprende a mucha gente: un SVG es texto. Abre uno en Notepad o en cualquier editor de código y podrás leerlo. Por debajo es XML, un formato de texto con etiquetas, donde cada forma es una línea de código. Un SVG simple de un círculo naranja se ve así:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Ese es el archivo completo. circle dibuja la forma, cx/cy la ubican, r define el radio y fill define el color. Como es texto plano, un SVG es diminuto, un navegador puede renderizarlo al instante y puedes ajustar un color cambiando una palabra. SVG es un estándar abierto que el W3C mantiene desde finales de la década de 1990, y todos los navegadores modernos lo admiten.

Para qué se usan los SVG

Los SVG brillan en cualquier lugar donde un gráfico necesite mantenerse nítido en distintos tamaños o editarse como formas:

• Logotipos. Un solo SVG funciona en una tarjeta de presentación y en una pancarta sin necesitar un archivo separado para cada tamaño.
• Iconos y gráficos para sitios web. Botones, flechas e ilustraciones simples se mantienen nítidos en cualquier pantalla y cargan rápido.
• Cricut y máquinas de corte. SVG es el formato estándar de archivo de corte. La máquina sigue los trazados para cortar vinilo, papel o HTV. (Preparar archivos SVG para Cricut cubre esto de principio a fin.)
• Impresión y señalética. Un vector escala a cualquier tamaño físico sin pixelarse.

Para qué no sirven bien los SVG

Los SVG están hechos para arte gráfico plano, así que no son una buena opción para fotografías. Una foto contiene millones de colores mezclados con sutileza y sin regiones planas, y obligarla a convertirse en formas te da una versión posterizada, parecida a una pintura, o un archivo enorme y desordenado. Si estás pensando en vectorizar una foto, lee primero qué pasa realmente cuando conviertes una foto a SVG. Para conservar detalle fotográfico real, quédate con JPG o PNG.

Cómo abrir un archivo SVG

Tienes tres opciones sencillas, según lo que quieras hacer:

• Solo verlo: arrastra el archivo a cualquier navegador web. Se renderiza al instante, sin software adicional.
• Editar visualmente: ábrelo en una app de diseño como Inkscape (gratis), Illustrator, Figma o Canva. (Cómo editar un SVG explica cómo cambiar colores y modificar formas.)
• Ver o ajustar el código: ábrelo en un editor de texto plano como Notepad o VS Code.

Algo que suele confundir: el Explorador de archivos de Windows no muestra una miniatura para los SVG de forma predeterminada, así que el archivo puede verse en blanco en la carpeta. Eso no significa que esté roto. Ábrelo en un navegador y aparecerá bien.

Cómo crear un SVG

Hay dos caminos, y el correcto depende de cuál sea tu punto de partida.

Diseñarlo desde cero. Dibuja tu logotipo, icono o ilustración en software vectorial (Inkscape, Illustrator, Figma o Canva) y expórtalo como SVG. Esto te da el resultado más limpio porque el archivo fue vectorial desde el principio.

Convertir una imagen que ya tienes. Esto es lo que la mayoría de la gente necesita en realidad. Si tu logotipo o arte solo existe como PNG o JPG, lo conviertes en SVG vectorizándolo, es decir, redibujando los píxeles como formas editables. (Qué es la vectorización de imágenes explica el proceso.)

Cómo se ve esto con PerfectVector

Si tienes un PNG o JPG y necesitas un SVG real, esa es la ruta de conversión, y es lo que hace PerfectVector. Sube un logotipo, icono o ilustración plana y reconstruye el arte como un SVG limpio, con pocos nodos y colores editables, listo para la web, impresión o una máquina de corte. Puedes convertir tu imagen en un SVG y revisar el resultado por tu cuenta. Convierte tus primeras imágenes gratis, sin tarjeta de crédito.

Funciona mejor con las mismas cosas para las que el propio SVG es bueno: arte gráfico plano y logotipos. Con una foto detallada, ningún conversor te dará un vector fotográfico real, y te lo diremos en lugar de fingir lo contrario.

Una nota rápida de seguridad

Como un SVG puede contener código, en teoría puede llevar un script, igual que una página web. Ver uno en un navegador o en una app de diseño es seguro, y los SVG de fuentes de confianza están bien. Solo trata un SVG aleatorio de una fuente desconocida como tratarías cualquier archivo desconocido, y no insertes uno en tu sitio web sin saber de dónde viene.

Preguntas frecuentes

¿Para qué se usa un archivo SVG? Para logotipos, iconos de sitios web, botones, ilustraciones simples y archivos de corte para máquinas como Cricut. En cualquier lugar donde un gráfico necesite mantenerse nítido en distintos tamaños o editarse como formas, un SVG es una gran opción. Se usa mucho en la web porque los archivos son pequeños y escalan sin perder calidad.

¿Cómo abro un archivo SVG? Arrástralo a cualquier navegador web para verlo, ábrelo en una app de diseño como Inkscape, Illustrator, Figma o Canva para editarlo visualmente, o ábrelo en un editor de texto como Notepad para ver el código. Ten en cuenta que el Explorador de archivos de Windows no muestra una miniatura para los SVG de forma predeterminada, así que un icono que parece en blanco no significa que el archivo esté roto.

¿Cómo creo un archivo SVG? Puedes diseñarlo en software vectorial (Inkscape, Illustrator, Figma o Canva) y exportarlo como SVG, o convertir una imagen que ya tienes, como un logotipo PNG o JPG, en un SVG vectorizándola. Diseñar desde cero da el resultado más limpio; convertir es la ruta rápida cuando solo tienes un archivo rasterizado.

¿Un archivo SVG es un archivo vectorial? Sí. SVG significa Scalable Vector Graphics, y guarda las imágenes como formas vectoriales en lugar de píxeles. Precisamente por eso escala a cualquier tamaño sin perder calidad.

¿Cuál es la diferencia entre un SVG y un PNG o JPG? Un PNG o JPG está hecho de píxeles y se vuelve borroso cuando lo agrandas más allá de su resolución. Un SVG está hecho de formas y se mantiene nítido a cualquier tamaño. PNG y JPG son mejores para fotos; SVG es mejor para logotipos, iconos y gráficos.

¿Puedo abrir un archivo SVG en Microsoft Word u Office? Sí. Microsoft 365 y las versiones recientes de Office te permiten insertar archivos SVG e incluso cambiarles el color o el estilo dentro de un documento, algo útil para logotipos e iconos en informes y presentaciones.

---

Un SVG es simplemente una imagen construida con formas y código en lugar de píxeles, y eso es lo que permite que se mantenga nítida en todas partes y siga siendo editable. Si la tuya por ahora solo existe como PNG o JPG, conviértela en un SVG limpio y tendrás un archivo que puedes escalar, recolorear y cortar sin que nunca se vuelva borroso.