Cómo Dominar Transformaciones SVG Avanzadas

Aprende a usar transformaciones SVG avanzadas, incluyendo contenedores, viewBox y grupos, con ejemplos prácticos y visuales para crear gráficos vectoriales dinámicos.

Tutorial visual de transformaciones SVG con ejemplos de contenedores, viewBox y grupos
Tutoriales SVG • Publicado por José Manuel Mateos Terrén • 2025-06-02

Transformaciones SVG Avanzadas: Contenedores, ViewBox y Grupos

En artículos anteriores, aprendimos a mover elementos dentro de un gráfico SVG, como rectángulos y grupos, modificando sus atributos x e y o usando transformaciones matriciales (puedes revisar el tutorial completo en este enlace). Ahora, vamos a dar un paso más allá: exploraremos transformaciones que afectan al contenedor del SVG, entenderemos el atributo viewBox y aplicaremos transformaciones a grupos y elementos simples.

1. Transformaciones fuera del SVG: El contenedor

Cuando incrustamos un SVG dentro de un documento HTML, este se comporta como cualquier otro elemento, como un <div> o un <p>. Esto significa que podemos aplicarle propiedades CSS como márgenes, transformaciones o posicionamiento, ya sea mediante CSS embebido, una hoja externa o dentro del SVG usando la etiqueta <style>. Estas transformaciones afectan al SVG como un todo, no a los elementos individuales dentro de él.

Por ejemplo, imagina que tienes un SVG dentro de un contenedor <div>. Puedes aplicar transformaciones CSS al SVG completo y mostrar su posición original con líneas discontinuas: 

<div style="width: 400px; height: 400px; border: 1px solid black; position: relative;">
    <svg width="200" height="200" style="position: absolute; top: 50px; left: 50px; transform: rotate(15deg); margin: 20px;">
        <rect x="10" y="10" width="180" height="180" fill="orange" />
    </svg>
    
</div>

Resultado visual:

En este caso, el SVG completo se gira 15 grados y se aplica un margen de 20px, todo desde el CSS del contenedor. Las líneas discontinuas grises muestran dónde estaba el rectángulo naranja antes de la transformación, en la posición original (10, 10) dentro del SVG. Si te gusta aprender programación avanzada, haz clic derecho en el ejemplo y selecciona "Inspeccionar" para ver el código subyacente y modificar manualmente las propiedades desactivando las casillas que afectan al elemento. Consulta la imagen Código de transformaciones para más detalles.

2. Entendiendo el atributo viewBox: Tu ventana al escenario SVG

El atributo viewBox es uno de los más importantes en SVG, y aunque puede parecer complicado, es muy fácil de entender si lo pensamos como una ventana o un escenario de teatro. Imagina que el SVG es un escenario donde se presentan tus dibujos (rectángulos, líneas, etc.), y el viewBox es la ventana a través de la cual el público (es decir, tú) ve ese escenario. La vista cambia dependiendo de si estás en la primera fila, cerca del escenario, o en la última, más lejos.

El viewBox tiene cuatro valores: viewBox="min-x min-y ancho alto". Estos valores definen qué parte del escenario se ve y cómo se ajusta al tamaño del SVG. Por ejemplo:

  • min-x y min-y: Es la posición desde donde empieza tu ventana (el punto superior izquierdo del escenario).
  • ancho y alto: Es el tamaño de la ventana, es decir, cuánto del escenario puedes ver.

Pongamos un ejemplo práctico sin usar viebox: 

<svg width="200" height="200" >
  <rect x="10" y="10" width="80" height="80" fill="lightblue" />
</svg>

Resultado visual:

Pongamos un ejemplo práctico para que lo veas en acción: 

<svg width="200" height="200" viewBox="0 0 100 100">
    <rect x="10" y="10" width="80" height="80" fill="lightblue" />
</svg>

Resultado visual:

Aquí, viewBox="0 0 100 100" significa que la ventana empieza en la posición (0, 0) del escenario y tiene un tamaño de 100x100 unidades. Aunque el SVG tiene un tamaño físico de 200x200 píxeles (definido por width y height), el viewBox hace que el escenario de 100x100 se estire para llenar ese espacio. Es como si "zoomearas" el escenario para que encaje en la ventana del SVG.

Si cambiamos el viewBox a viewBox="20 20 60 60", la ventana se moverá para mostrar solo una parte del escenario, desde la posición (20, 20) hasta (80, 80). Esto hace que el rectángulo se vea más pequeño o desplazado, dependiendo de cómo se ajusta. 

<svg width="200" height="200" viewBox="20 20 60 60">
    <rect x="10" y="10" width="80" height="80" fill="lightblue" />
</svg>

Resultado visual:

el viewBox no deja de ser un trasformador visual de todo el contenido de su interior como si hicieramos zoom o movieramos el contenido para hacerlo mas grande o mas pequeño

3. Transformaciones en grupos dentro de <svg>

Aunque ya lo vimos en tutoriales anteriores, es bueno recordar las funciones de agrupación de elementos. Los grupos (<g>) en SVG son como carpetas que agrupan varios elementos para que puedas aplicar transformaciones a todos ellos a la vez. Esto es útil cuando quieres mover, girar o escalar varios elementos sin tener que modificar cada uno por separado.

Con CSS, puedes aplicar transformaciones como:

  • transform: rotate(45deg); /* Gira */
  • transform: scale(1.5); /* Escala */
  • transform: translate(50px, 100px); /* Mueve */
  • transform: skew(30deg, 10deg); /* Inclina */
  • transform: rotateY(180deg); /* Giro 3D */

Afecta a cualquier <div>, <img>, <svg>, etc. transform-origin define el punto desde el que se aplica la transformación (por defecto es el centro del elemento): - transform-origin: center; (valor por defecto)- transform-origin: top left; desde la esquina superior izquierda - transform-origin: 0% 100%; desde esquina inferior izquierda Las animaciones las trataremos en temas aparte. 

<svg width="200" height="200" viewBox="0 0 200 200">
    <g transform="translate(50, 30) scale(1.2)">
        <rect x="10" y="10" width="50" height="50" fill="purple" />
        <rect x="70" y="10" width="50" height="50" fill="yellow" />
    </g>
</svg>

Resultado visual:

```

Artículos Relacionados