¿Cómo funciona un SVG?

Introducción

En el diseño web moderno, los gráficos no solo sirven para decorar. También ayudan a comunicar ideas, mejorar la experiencia de usuario, crear identidad visual y hacer que una interfaz se sienta más viva.

Entre los formatos más útiles para gráficos web está SVG, siglas de Scalable Vector Graphics. A diferencia de una imagen PNG o JPG, un SVG no está construido con píxeles, sino con instrucciones matemáticas que describen formas, trayectorias, colores y posiciones.

Esto hace que los SVG puedan escalar sin perder calidad, editarse directamente con código y animarse con CSS o JavaScript. Por eso son ideales para iconos, logotipos, ilustraciones técnicas, diagramas, microinteracciones y gráficos interactivos.

¿Qué es un SVG?

Un archivo SVG es un formato de imagen basado en vectores. En lugar de guardar una cuadrícula de píxeles, guarda una estructura XML con elementos como círculos, rectángulos, líneas, polígonos, textos y rutas.

Esa estructura permite que el navegador dibuje el gráfico en tiempo real. Como el dibujo se basa en coordenadas y fórmulas, puede crecer o reducirse sin perder nitidez. Por eso un icono SVG puede verse bien tanto en una pantalla pequeña como en una pantalla de alta resolución.

Ejemplo básico de SVG

Este ejemplo dibuja un círculo rojo con borde negro:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="3"
        fill="red"
    />
</svg>

Los atributos cx y cy definen el centro del círculo. r define el radio. stroke controla el borde y fill controla el color de relleno.

¿Cómo funciona un SVG?

Los SVG funcionan como documentos XML. Cada forma dentro del gráfico es un elemento con atributos. El navegador interpreta esos elementos y los dibuja en un área llamada viewport.

Además del tamaño visible, un SVG puede definir un viewBox, que funciona como un sistema de coordenadas interno. Esto es muy importante porque permite que el gráfico se escale de forma proporcional sin deformarse.

Formas básicas

Dentro de un SVG puedes usar elementos como:

• <circle> para círculos.
• <rect> para rectángulos.
• <line> para líneas.
• <polygon> para polígonos.
• <path> para trazos complejos.
• <g> para agrupar elementos.

Ejemplo: carita feliz en SVG

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow" />
    <circle cx="70" cy="80" r="10" fill="black" />
    <circle cx="130" cy="80" r="10" fill="black" />
    <path
        d="M 60 120 Q 100 160 140 120"
        stroke="black"
        stroke-width="4"
        fill="transparent"
    />
</svg>

En este caso, el elemento <path> dibuja la sonrisa. Los paths son una de las partes más poderosas de SVG porque permiten crear curvas, trazos orgánicos, iconos y formas muy detalladas.

¿Por qué usar SVG en diseño web?

SVG tiene varias ventajas frente a formatos tradicionales como PNG, JPG o GIF, especialmente cuando hablamos de interfaces, iconos y elementos visuales que necesitan adaptarse a diferentes tamaños de pantalla.

¿Es posible animar un SVG?

Sí. Un SVG se puede animar de varias formas. Puedes usar CSS para animaciones simples, JavaScript para interacciones más avanzadas o SMIL para animaciones declaradas directamente dentro del SVG.

La elección depende del tipo de animación. Si solo necesitas rotar, mover, cambiar opacidad o escalar, CSS suele ser suficiente. Si necesitas control detallado, eventos, secuencias o interacciones complejas, JavaScript es mejor opción.

Animación de SVG con CSS

CSS es una de las formas más limpias de animar SVG cuando el movimiento es simple. Puedes usar @keyframes, transform, opacity, stroke-dasharray o stroke-dashoffset.

Ejemplo: rotación continua

<style>
    .rotate {
        transform-box: fill-box;
        transform-origin: center;
        animation: rotar 4s linear infinite;
    }

    @keyframes rotar {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
</style>

<svg class="rotate" width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow" />
    <circle cx="70" cy="80" r="10" fill="black" />
    <circle cx="130" cy="80" r="10" fill="black" />
    <path d="M 60 120 Q 100 160 140 120" stroke="black" stroke-width="4" fill="transparent" />
</svg>

Para este tipo de movimientos sencillos, CSS suele ser suficiente y evita depender de librerías externas.

Animación de SVG con JavaScript

Cuando necesitas animaciones más complejas o interactivas, JavaScript ofrece más control. Puedes modificar atributos del SVG, responder a eventos del usuario o usar librerías como GSAP o anime.js.

En el siguiente ejemplo conceptual, anime.js anima la altura de una lengua dentro de una carita SVG:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<script>
    anime({
        targets: "#tongue",
        height: [0, 20],
        duration: 500,
        easing: "easeInOutQuad",
        direction: "alternate",
        loop: true,
        delay: 500
    });
</script>

<svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow" />
    <circle cx="70" cy="80" r="10" fill="black" />
    <circle cx="130" cy="80" r="10" fill="black" />
    <path d="M 60 120 Q 100 160 140 120" stroke="black" stroke-width="4" fill="transparent" />
    <rect id="tongue" x="85" y="140" width="30" height="0" fill="red" rx="5" ry="5" />
</svg>

JavaScript es especialmente útil cuando la animación depende de interacción: hover, scroll, clics, datos dinámicos o secuencias que deben sincronizarse con otros elementos de la interfaz.

Animación SVG con SMIL

SMIL permite declarar animaciones directamente dentro del SVG usando elementos como <animate> o <animateTransform>. Es una técnica muy compacta porque no necesita CSS externo ni JavaScript.

Ejemplo: cambio de color

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue">
        <animate
            attributeName="fill"
            values="blue;red;blue"
            dur="2s"
            repeatCount="indefinite"
        />
    </circle>
</svg>

Aunque SMIL todavía puede ser útil para animaciones simples, en proyectos web modernos suele ser más común usar CSS o JavaScript por compatibilidad, control y facilidad de integración con otros componentes.

Buenas prácticas al usar SVG

Los SVG son muy poderosos, pero conviene usarlos con cuidado para mantener rendimiento, accesibilidad y seguridad.

Conclusión

SVG es uno de los formatos más útiles para diseño y desarrollo web porque combina precisión visual, escalabilidad y control mediante código. No es una imagen tradicional: es una estructura vectorial que el navegador puede interpretar, estilizar y animar.

A lo largo del artículo vimos qué es un SVG, cómo funciona, cómo se construyen formas básicas y cómo se pueden aplicar animaciones con CSS, JavaScript o SMIL.

Para proyectos web modernos, SVG es ideal para iconos, logotipos, diagramas, efectos visuales y microinteracciones. Bien usado, puede mejorar la identidad visual de una página sin sacrificar rendimiento.

La clave está en elegir la técnica correcta: CSS para animaciones simples, JavaScript para interacciones avanzadas y optimización constante para mantener el sitio ligero, limpio y accesible.

Recursos adicionales

• Documentación oficial de SVG en MDN
• anime.js
• GreenSock Animation Platform
• SVGOMG para optimizar SVG
• Guía de animaciones SVG con SMIL