¿Qué es SVG? Una guía para principiantes

Published: August 2026

SVG significa Gráficos Vectoriales Escalables. Es un formato de imagen utilizado para representar gráficos con formas, líneas, curvas y otras instrucciones gráficas en lugar de depender solo de una cuadrícula fija de píxeles.

Debido a que los gráficos SVG se describen utilizando información vectorial, generalmente pueden hacerse mucho más grandes o más pequeños sin volverse borrosos o pixelados. SVG también se basa en XML, lo que significa que la información utilizada para construir el gráfico se almacena como texto que las computadoras y los navegadores pueden interpretar.

Esto hace que SVG sea especialmente útil para logotipos, iconos, ilustraciones, diagramas y otros gráficos que deben permanecer nítidos en diferentes tamaños.

Pero hay una distinción importante:

Poner una imagen dentro de un archivo SVG no necesariamente convierte esa imagen en un vector verdadero.

Si está convirtiendo un PNG o JPG a SVG, la imagen original basada en píxeles generalmente debe vectorizarse para que sus características visibles se recreen como formas y rutas vectoriales.

Vamos a desglosar lo que eso significa.

¿Qué significa SVG?

SVG = Gráficos Vectoriales Escalables.

Cada parte del nombre describe una característica importante del formato:

Escalable significa que el gráfico puede cambiar de tamaño sin estar vinculado a una resolución de píxeles fija.
Vector significa que el gráfico se puede representar mediante rutas, formas, coordenadas y curvas en lugar de solo píxeles.
Gráficos simplemente se refiere al contenido visual que se muestra.

SVG fue desarrollado como un estándar web abierto por el World Wide Web Consortium (W3C) y está basado en XML. El formato está diseñado para gráficos bidimensionales y puede funcionar junto con tecnologías web como CSS y JavaScript.

Un archivo SVG típico termina con: .svg

Por ejemplo: logo.svg, icon.svg, illustration.svg

¿Cómo funciona un archivo SVG?

Para entender SVG, es útil compararlo con una fotografía normal.

Un JPG o PNG generalmente almacena una imagen usando una cuadrícula de diminutos cuadrados de colores llamados píxeles.

Un SVG puede describir instrucciones tales como:

dibuja un círculo aquí;
crea una línea entre estos puntos;
rellena esta forma con azul;
dale a esta ruta un contorno negro;
dibuja una curva entre estas coordenadas.

El navegador o programa de gráficos lee esas instrucciones y renderiza la imagen.

Un círculo SVG muy simple podría contener un marcado como:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

En lugar de almacenar una fotografía de un círculo azul píxel por píxel, el archivo esencialmente describe cómo dibujar el círculo. SVG admite elementos gráficos que incluyen rectángulos, círculos, elipses, líneas, polígonos, rutas, degradados y otros efectos. Esta es la razón básica por la que SVG se comporta de manera diferente a formatos como PNG y JPEG.

SVG frente a imágenes rasterizadas: ¿Cuál es la diferencia?

Las imágenes digitales pueden representarse en términos generales como gráficos rasterizados o gráficos vectoriales.

Característica	SVG	PNG	JPG/JPEG
Tipo principal	Capaz de vector	Rasterizado	Rasterizado
Construido a partir de	Rutas, formas e instrucciones gráficas	Píxeles	Píxeles
Escala sin pixelación normal	Sí, para contenido vectorial	No	No
Bueno para logotipos	Excelente	Bueno en tamaños fijos	Generalmente no es ideal
Bueno para fotografías	Generalmente no es ideal	Posible	Excelente
Admite transparencia	Sí	Sí	Sin transparencia alfa estándar
Rutas vectoriales editables	Sí, cuando existe contenido vectorial real	No	No
Uso web común	Logotipos, iconos, ilustraciones	Gráficos transparentes, capturas de pantalla	Fotos

Las imágenes rasterizadas tienen una resolución de píxeles específica. Si las amplía mucho más allá de sus dimensiones originales, los píxeles individuales se vuelven más notorios.

Los gráficos vectoriales funcionan de manera diferente porque sus formas se pueden recalcular cuando la imagen cambia de tamaño. Adobe describe SVG como un formato vectorial que se puede cambiar de tamaño significativamente sin perder el tipo de calidad que normalmente se pierde al ampliar gráficos rasterizados.

¿Por qué las imágenes SVG pueden escalar sin perder calidad?

Imagínese dibujar un círculo de dos maneras diferentes.

Con una imagen rasterizada, podría almacenar miles de píxeles individuales que juntos parecen un círculo.

Con una imagen vectorial, podría almacenar instrucciones que describen:

el centro del círculo;
su radio;
su color de relleno;
su borde.

Si el círculo necesita ser diez veces más grande, el programa no necesita estirar los píxeles originales. Simplemente puede renderizar la forma matemática en las nuevas dimensiones. Esta propiedad a menudo se llama independencia de la resolución.

Es por eso que un logotipo vectorial creado correctamente se puede usar en un pequeño ícono de un sitio web y luego ampliarse para un diseño mucho más grande sin desarrollar los bordes en bloques asociados con imágenes rasterizadas ampliadas.

¿Para qué se utilizan los archivos SVG?

SVG funciona particularmente bien cuando una imagen consta de formas, líneas, contornos o áreas de color relativamente distintas reconocibles.

Logotipos

Los logotipos a menudo deben aparecer en muchos tamaños diferentes. El mismo logotipo podría usarse en el encabezado de un sitio web, una interfaz móvil, una presentación, material impreso, señalización o gráficos de marketing. El uso de ilustraciones vectoriales facilita mucho el cambio de tamaño sin tener que recrear el logotipo para cada tamaño.

Iconos

Los iconos de interfaz son otro caso de uso común de SVG. Las formas y rutas simples pueden permanecer limpias en pantallas con diferentes tamaños y densidades de píxeles.

Ilustraciones

Las ilustraciones planas, los dibujos lineales y los gráficos con formas claramente definidas pueden funcionar muy bien como archivos SVG.

Gráficos y diagramas

Debido a que SVG puede contener elementos gráficos individuales y texto, puede ser útil para diagramas, gráficos y otros gráficos estructurados. Los elementos SVG también se pueden diseñar y manipular utilizando tecnologías web.

Diseños de corte y manualidades

SVG también se usa comúnmente en flujos de trabajo donde el software necesita contornos o rutas reales en lugar de simplemente una imagen de esos contornos. Por ejemplo, las rutas vectoriales pueden ser útiles al preparar ilustraciones adecuadas para cortar, grabar y flujos de trabajo de diseño similares. Los requisitos exactos dependen del software y la máquina que se utilice.

Ventajas de los archivos SVG

Los SVG pueden escalar sin pixelación rasterizada normal: Esta es la ventaja más conocida de SVG. Cuando un SVG consta de rutas y formas vectoriales adecuadas, el gráfico se puede renderizar en diferentes dimensiones sin depender de una cuadrícula de píxeles fija.
Los elementos individuales se pueden editar: Un SVG estructurado correctamente puede contener rutas, formas, rellenos, trazos, grupos y elementos de texto separados. Eso hace que las ilustraciones vectoriales sean mucho más fáciles de modificar que una sola imagen rasterizada aplanada.
SVG está basado en texto: SVG utiliza el marcado XML para describir el contenido gráfico. Eso significa que un SVG se puede inspeccionar y editar utilizando herramientas basadas en texto, así como editores vectoriales visuales.
SVG funciona bien en la web: SVG fue diseñado específicamente para funcionar con tecnologías web. Se puede mostrar como una imagen y puede interactuar con CSS y JavaScript.
SVG puede ser eficiente para gráficos simples: Un icono o logotipo simple a menudo se puede representar de manera eficiente como una pequeña colección de rutas y formas. Sin embargo, las ilustraciones vectoriales complejas pueden producir archivos grandes.

Limitaciones de los archivos SVG

SVG es poderoso, pero no es el formato correcto para todas las imágenes.

SVG generalmente no es el mejor formato para fotografías

Una fotografía puede contener millones de cambios sutiles en el color, la iluminación y la textura. Intentar recrear cada detalle como formas vectoriales individuales puede dar como resultado ilustraciones extremadamente complicadas.

Los SVG complejos pueden contener demasiadas rutas

El software de vectorización puede recrear imágenes rasterizadas detalladas usando grandes cantidades de rutas y puntos de anclaje. El resultado puede ser técnicamente vectorial, pero puede ser difícil de editar e innecesariamente complejo.

Consejo profesional: Más rutas no significan automáticamente un mejor SVG. Un gráfico vectorial útil debe equilibrar la precisión visual con una geometría limpia y manejable. Si su archivo es demasiado complejo, aprenda cómo reducir los nodos SVG aquí.

¿Cada archivo SVG es realmente un vector?

No. Un archivo SVG puede contener gráficos vectoriales, imágenes rasterizadas o una combinación de ambos. La especificación SVG se adapta explícitamente a gráficos mixtos vectoriales/rasterizados.

Esto crea uno de los mayores conceptos erróneos sobre la conversión de PNG a SVG. Supongamos que tiene logo.png. Simplemente colocar ese PNG dentro de un contenedor SVG puede darle logo.svg, pero el logotipo visible puede seguir siendo fundamentalmente la misma imagen de píxeles. Ahora tiene un archivo SVG, pero es posible que no tenga una ilustración correctamente vectorizada.

Un flujo de trabajo real de rasterizado a vectorial intenta recrear características de la imagen rasterizada usando elementos vectoriales. Los usuarios informan con frecuencia haber exportado archivos que creían que eran vectores solo para descubrir que la salida no contenía geometría editable.

¿Cómo puede saber si un SVG está realmente vectorizado?

Abrir el archivo en un editor vectorial es una forma útil de inspeccionarlo. Con ilustraciones vectorizadas correctamente, normalmente debería poder seleccionar componentes vectoriales como rutas, formas o nodos.

Si todo el diseño se comporta como una sola imagen de mapa de bits incrustada, el SVG puede contener simplemente ilustraciones rasterizadas en lugar de una recreación vectorial útil.

Otra prueba simple es el zoom extremo. Una ruta vectorial debe continuar siendo renderizada a partir de su geometría subyacente en lugar de revelar la cuadrícula de píxeles ampliada de una imagen rasterizada incrustada.

¿Cómo se convierte PNG o JPG a SVG?

Aquí es donde la vectorización de imágenes se vuelve importante.

Los archivos PNG y JPG son formatos rasterizados. SVG puede representar rutas y formas vectoriales. Por lo tanto, producir un SVG vectorial genuino a partir de un PNG o JPG generalmente implica interpretar la imagen rasterizada y recrear su estructura visual como geometría vectorial. Ese proceso comúnmente se denomina vectorización de imágenes, conversión de raster a vector o trazado de imágenes.

Puede utilizar nuestro conversor gratuito en línea de PNG a SVG para manejar este proceso automáticamente.

Preguntas Frecuentes

¿Es SVG un archivo vectorial?

SVG es un formato de gráficos con capacidad vectorial diseñado para describir gráficos vectoriales, pero los archivos SVG también pueden contener contenido rasterizado. Por lo tanto, una extensión .svg por sí sola no garantiza que cada elemento visual dentro del archivo sea geometría vectorial.

¿Pierde calidad el SVG cuando se amplía?

Los elementos vectoriales adecuados dentro de un SVG se pueden renderizar en diferentes tamaños sin la pixelación normal creada al ampliar gráficos rasterizados. Una imagen rasterizada incrustada dentro de un SVG sigue siendo rasterizada y aún está sujeta a su resolución subyacente.

¿Es mejor SVG que PNG?

Depende de la imagen. SVG generalmente se adapta mejor a logotipos, íconos e ilustraciones escalables, mientras que PNG es útil para gráficos rasterizados, capturas de pantalla y otras imágenes basadas en píxeles.

¿Puedo convertir un PNG en un SVG?

Sí, pero hay una diferencia importante entre poner un PNG dentro de un archivo SVG y vectorizar el PNG en rutas vectoriales reales. Si su objetivo son ilustraciones vectoriales escalables y editables, normalmente desea una conversión de rasterizado a vectorial. Siga nuestra guía de PNG a SVG para aprender cómo.

¿Cuál es la diferencia entre SVG y vectorización?

SVG es un formato de archivo. La vectorización es un proceso. La vectorización toma información rasterizada de una imagen como PNG o JPG e intenta recrearla usando geometría vectorial. SVG es uno de los formatos en los que se puede almacenar la ilustración vectorial resultante.

Pensamientos Finales

SVG es más que una simple extensión de imagen. Es un formato de gráficos basado en XML capaz de describir imágenes utilizando rutas escalables, formas, texto y otros elementos gráficos. Eso lo hace particularmente útil para logotipos, íconos, ilustraciones y gráficos que necesitan funcionar en diferentes tamaños.

Lo más importante que debe recordar es lo siguiente: SVG es el formato. La vectorización es el proceso que puede convertir una imagen rasterizada en ilustraciones vectoriales almacenadas en ese formato.