¿Qué es SVG?

SVG es el formato estándar de imagen vectorial para la web. Sus siglas provienen del inglés Scalable Vector Graphics, que significa Gráficos Vectoriales Escalables. A diferencia de las fotografías y de la mayoría de los formatos de imagen tradicionales, un archivo SVG no guarda píxeles, sino figuras geométricas: líneas, círculos, rectángulos, curvas y trazos descritos por coordenadas matemáticas. Por eso puede agrandarse o reducirse a cualquier tamaño sin que se vea borroso, ocupa muy poco espacio y puede editarse con código, igual que una página web.

En este artículo se explica qué es SVG, en qué se diferencia una imagen vectorial de una imagen de mapa de bits, cuáles son sus principales ventajas, cómo se ve un archivo SVG por dentro, de qué formas puede usarse en una página web, cuándo conviene elegirlo y con qué herramientas se crea.

Qué significa SVG y para qué sirve

SVG es un formato de imagen basado en XML, creado y mantenido como estándar abierto por el W3C, el mismo organismo que define el HTML. En lugar de almacenar una retícula de puntos de color, un SVG describe la imagen con etiquetas de texto que indican qué figuras dibujar y en qué posición: un círculo con tal centro y tal radio, un rectángulo con tal esquina y tal tamaño, una curva que une tales puntos. El navegador lee esas instrucciones y dibuja la imagen en pantalla en tiempo real, sin necesidad de programas externos ni complementos.

Como es un estándar abierto, cualquier programa puede leer y escribir archivos SVG sin pagar licencias, y cualquier navegador moderno los muestra de forma nativa. Al ser texto estructurado, el SVG se comporta más como un documento que como una fotografía: se puede abrir en un editor de código, modificar un color cambiando un valor y el cambio se refleja al instante. Esa es la razón por la que un mismo archivo se ve nítido en la pantalla pequeña de un teléfono y también en una valla publicitaria: el navegador vuelve a calcular las figuras en cada tamaño.

Diferencia entre imagen vectorial e imagen de mapa de bits

Para entender qué es SVG conviene compararlo con los formatos que todos conocemos, como JPG o PNG. Esas imágenes son de mapa de bits, también llamadas rasterizadas: están formadas por una retícula de píxeles, y cada píxel guarda un color. Si se amplían demasiado, se empiezan a distinguir los cuadritos y la imagen se ve pixelada o borrosa, porque la información disponible no alcanza para definir más detalle del que ya tiene.

Una imagen vectorial como SVG funciona al revés: no almacena puntos de color, sino la descripción geométrica de cada figura. Un círculo se guarda como centro, radio y color de relleno, sin importar el tamaño al que se vaya a mostrar. Al ampliarlo, el programa simplemente recalcula la figura con las mismas proporciones y el resultado es igual de nítido. La siguiente tabla resume las diferencias principales:

Aspecto	SVG (vectorial)	Mapa de bits (JPG, PNG)
Unidad básica	Figuras geométricas y coordenadas	Píxeles de color
Escalado	Infinito, sin pérdida de calidad	Fijo; al ampliar se pixela
Peso del archivo	Muy ligero en gráficos simples	Crece con la resolución
Nitidez en cualquier tamaño	Siempre nítido	Solo a su resolución original
Edición con código	Sí, es texto legible	No, requiere programas de edición
Uso típico	Logos, iconos, ilustraciones, gráficos	Fotografías y escenas complejas

En resumen: el mapa de bits guarda el resultado de una imagen y el vectorial guarda la receta para dibujarla. Por eso el SVG se adapta a cualquier pantalla sin perder definición, mientras que una foto de mapa de bits solo se ve perfecta en el tamaño para el que fue creada.

Ventajas de usar SVG en la web

El formato SVG se ha convertido en la opción preferida para muchos elementos de diseño web porque reúne ventajas que ningún formato de mapa de bits ofrece a la vez:

Escalado perfecto: un mismo archivo sirve para un icono de 16 píxeles y para un banner de pantalla completa, sin generar versiones duplicadas ni perder nitidez.
Peso muy ligero: un icono o logotipo sencillo suele ocupar menos de un kilobyte, mucho menos que su equivalente en PNG, lo que acelera la carga de la página.
Editable con código: al ser texto, se puede cambiar el color, el grosor de un trazo o la forma de una figura con un simple editor y sin reabrir el programa de diseño.
Animable: las figuras SVG pueden animarse con CSS o con JavaScript, lo que permite crear transiciones, movimientos e interacciones sin usar video ni librerías pesadas.
Texto real dentro de la imagen: si un logo incluye palabras, el navegador las trata como texto seleccionable, lo que mejora la accesibilidad y el posicionamiento en buscadores.
Fondo transparente y efectos: admite transparencia, degradados, sombras, filtros y máscaras aplicados con CSS a figuras individuales.
Estándar y compatible: funciona en todos los navegadores modernos, se puede guardar como archivo, insertar en el HTML o generar desde JavaScript.

Cómo se ve un archivo SVG por dentro

Un archivo SVG es texto plano con extensión .svg que contiene etiquetas XML. Para hacerse una idea, este es un ejemplo muy sencillo: un círculo azul con un cuadrado blanco en el centro, dibujado en un lienzo de cien por cien unidades.

</svg>

Cada etiqueta tiene un significado claro. La etiqueta raíz svg define el lienzo y su sistema de coordenadas mediante el atributo viewBox, que indica el área visible; el atributo xmlns declara que se trata de un documento SVG. La etiqueta circle dibuja un círculo: cx y cy marcan la posición del centro, r el radio y fill el color de relleno. La etiqueta rect dibuja un rectángulo con su esquina superior izquierda en x e y, y con el ancho y el alto indicados en width y height. Existen muchas más etiquetas, como path para curvas complejas, line, polygon, ellipse o text, pero la idea siempre es la misma: figuras descritas por coordenadas y atributos.

Cómo usar SVG en una página web

Existen tres formas habituales de incluir un gráfico SVG en una página, y cada una tiene su uso recomendado:

Como archivo externo en una etiqueta img: se guarda el SVG en un archivo con extensión .svg y se referencia igual que cualquier otra imagen. Por ejemplo: <img src="logo.svg" alt="Logotipo de la empresa" />. Esta es la forma más sencilla y permite que el navegador guarde el archivo en caché, además de aportar el texto alternativo para accesibilidad. Como limitación, desde fuera no se puede modificar el interior del gráfico con CSS.
Insertado directamente en el HTML: se pega el código SVG dentro de la página, por ejemplo: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" /></svg>. Al formar parte del documento, cada figura se puede colorear, animar o estilizar con CSS y manipular con JavaScript, lo que lo hace ideal para iconos interactivos.
Como fondo CSS: se usa el SVG como imagen de fondo de un elemento, con reglas como .icono { background-image: url("icono.svg"); }. Resulta práctico para botones, fondos decorativos o agrupaciones de iconos, y admite ajustes de tamaño y posición desde la hoja de estilos.

Cuándo usar SVG y cuándo no

El SVG es la mejor opción para cualquier gráfico formado por formas planas, trazos y colores definidos. Los casos más habituales son:

Logotipos y marcas, que deben verse nítidos en tarjetas de visita, pantallas y vallas.
Iconos y pictogramas de interfaces, menús y botones.
Gráficos de datos, diagramas e infografías, que además pueden actualizarse con JavaScript.
Ilustraciones planas, elementos decorativos y mapas esquemáticos.

En cambio, el SVG no es adecuado para fotografías. Una foto contiene millones de tonos, degradados sutiles y texturas irregulares que no pueden describirse con unas pocas figuras: convertirla a vectorial produciría un archivo enorme, pesado y difícil de cargar, o una versión simplificada que pierde todo el realismo. Las cámaras capturan píxeles, así que para fotos conviene seguir usando formatos de mapa de bits como JPG, WebP o PNG. Como regla práctica: si la imagen es una foto o contiene texturas fotográficas, mapa de bits; si es un dibujo con formas y colores definidos, SVG.

Herramientas para crear y editar SVG

Cualquier SVG puede escribirse a mano en un editor de texto, porque al fin y al cabo es código. Para trabajos más complejos existen herramientas que dibujan por nosotros y exportan el resultado en este formato:

Editores vectoriales de escritorio: Inkscape es gratuito y de código abierto; Adobe Illustrator y Affinity Designer son opciones profesionales de pago.
Herramientas de diseño de interfaz: Figma y Penpot permiten diseñar iconos y componentes y exportarlos como SVG listos para la web.
Editores de código: programas como VS Code muestran el código SVG con colores y permiten previsualizarlo, útiles para ajustar detalles o generar gráficos con scripts.
Optimizadores: herramientas como SVGO limpian el código generado por los programas de diseño y reducen el peso del archivo, un paso recomendado antes de publicar.
Bibliotecas de iconos: colecciones de código abierto como Feather o Bootstrap Icons ofrecen miles de SVG listos para descargar y personalizar.

Una buena forma de aprender es tomar un icono SVG existente, abrirlo en un editor de código y cambiar colores, tamaños y posiciones para ver cómo responde cada atributo. En poco tiempo se comprende la lógica del formato y se empieza a sacar partido a su flexibilidad.

Conclusión

SVG es el formato de imagen vectorial estándar de la web: ligero, escalable sin límite, animable y editable con código, y compatible con todos los navegadores modernos. Para logotipos, iconos, gráficos e ilustraciones hechas de formas, es casi siempre la mejor elección; para fotografías, en cambio, siguen mandando los formatos de mapa de bits. Conocer qué es SVG y cuándo utilizarlo ayuda a crear páginas más rápidas, más nítidas y más fáciles de mantener.

Si quieres seguir aprendiendo sobre tecnología aplicada al trabajo cotidiano, en Kardex Tauro encontrarás más guías prácticas explicadas paso a paso.

Labels:

#svg #imagen vectorial #gráficos vectoriales