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 
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 viewBox:
<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 transformador visual de todo el contenido de su interior como si hiciéramos zoom o moviéramos el contenido para hacerlo más grande o más 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:
En este ejemplo, el grupo <g> contiene dos rectángulos. La transformación translate(50, 30) scale(1.2) se aplica a ambos rectángulos juntos: se mueven 50 unidades a la derecha y 30 hacia abajo, y se escalan al 120% de su tamaño original.
4. Transformaciones en etiquetas simples dentro de <svg>
Finalmente, podemos aplicar transformaciones directamente a elementos individuales dentro del SVG, como rectángulos o líneas, usando el atributo transform. Esto es lo que vimos en el tutorial anterior (puedes revisarlo aquí), pero ahora lo combinaremos con lo que hemos aprendido.
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="50" height="50" fill="green" transform="translate(20, 20) scale(1.5)" />
<rect x="80" y="80" width="50" height="50" fill="red" transform="skewX(20)" />
</svg>Resultado visual:
Aquí, el primer rectángulo se mueve 20 unidades a la derecha y abajo, y se escala al 150%, mientras que el segundo rectángulo se inclina 20 grados horizontalmente con skewX(20). Como ves, cada elemento puede tener su propia transformación independiente.
5. Combinando transformaciones para efectos más complejos
Una vez que entiendes cómo funcionan las transformaciones individuales, puedes combinarlas para crear efectos más interesantes. En SVG, puedes encadenar transformaciones en el atributo transform, y el orden en que las apliques afecta el resultado final. Vamos a ver cómo combinar translate, scale y skew en un grupo y en un elemento individual.
Combinando transformaciones en un grupo
En este ejemplo, aplicaremos un desplazamiento, un escalado y una inclinación a un grupo que contiene dos rectángulos:
<svg width="200" height="200" viewBox="0 0 200 200">
<g transform="translate(30, 20) scale(1.3) skewX(15)">
<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:
Aquí, el grupo se desplaza 30 unidades a la derecha y 20 hacia abajo con translate(30, 20), se escala al 130% con scale(1.3), y se inclina 15 grados horizontalmente con skewX(15). Todas estas transformaciones se aplican a ambos rectángulos dentro del grupo.
Combinando transformaciones en un elemento individual
Ahora, combinemos transformaciones en un solo rectángulo, aplicando desplazamiento, escalado y una inclinación vertical:
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="50" height="50" fill="teal" transform="translate(40, 30) scale(1.5) skewY(20)" />
</svg>Resultado visual:
En este caso, el rectángulo se desplaza 40 unidades a la derecha y 30 hacia abajo con translate(40, 30), se escala al 150% con scale(1.5), y se inclina 20 grados verticalmente con skewY(20). El orden de las transformaciones importa: primero se aplica el desplazamiento, luego el escalado y finalmente la inclinación.
6. Transformaciones matriciales
Las transformaciones matriciales ofrecen un control avanzado sobre las transformaciones usando la función matrix, que aplica una transformación 2D personalizada basada en una matriz 3x3. Esta función toma seis parámetros: a, b, c, d, e, f, que corresponden a los componentes de la matriz de transformación. Es útil para combinaciones complejas o cuando necesitas precisión matemática.
Ejemplo de transformación matricial en un rectángulo
Vamos a aplicar una transformación matricial que combine desplazamiento, escalado y rotación en un solo rectángulo. Los valores de la matriz se calculan como sigue: a y d para escalado, b y c para rotación, y e y f para desplazamiento.
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="50" height="50" fill="brown" transform="matrix(1.2, 0.3, -0.3, 1.2, 30, 20)" />
</svg>Resultado visual:
En este ejemplo, la matriz matrix(1.2, 0.3, -0.3, 1.2, 30, 20) aplica un escalado (valores diagonales), una leve rotación (valores fuera de la diagonal), y un desplazamiento (últimos dos valores). Esto transforma el rectángulo de manera personalizada desde su posición original.
Cómo trabajamos las transformaciones en creadorlogos.com
¿Cómo podrás trabajar online con transformaciones desde nuestro creador de logotipos? En creadorlogos.com, puedes usar todo tipo de transformaciones en los elementos que coloques. A continuación, te doy un paso a paso para que lo hagas:
Paso 1: Añade elementos
Añade cualquier tipo de elemento que desees: texto, iconos, figuras primitivas como círculos o cuadrados, a través de nuestro menú de botones a la derecha. Consulta la imagen 
para verlo.
Paso 2: Selecciona los objetos
Una vez que tengas los objetos, puedes seleccionarlos haciendo clic sobre ellos o desde los botones que se generarán a la derecha. Mira la imagen 
para más detalles.
Paso 3: Ajusta las capas
Sube o baja los elementos para que la visualización sea correcta usando las flechas del elemento. Ten en cuenta que los elementos de arriba se superpondrán sobre los de abajo, y puedes manejarlo subiendo o bajando las capas. Consulta la imagen 
.
Paso 4: Aplica transformaciones
Con el elemento seleccionado, es el momento de aplicar transformaciones. Como te enseñé en el tutorial anterior, usa la estrella de movimiento para generar movimientos, escalas y giros desde el centro del elemento o desde una de sus esquinas, pixel a pixel o con movimientos más largos. Consulta la imagen 
.
Paso 5: Lista de transformaciones
Aquí tienes las transformaciones que puedes realizar:
- Mover: Derecha, izquierda, arriba, abajo del elemento seleccionado. Si activas el botón "botón hijo", podrás hacer transformaciones solo al path seleccionado y no al elemento completo (esta opción no se guardará, solo sirve como visualización). La cantidad de movimiento depende del potenciómetro seleccionado en la parte superior de la estrella.
- Girar: Derecha o izquierda, dependiendo del potenciómetro para aumentar grados por clic y la selección de vértice de giro (por defecto, todo gira en su centro).
- Escala y zoom: Escala el objeto, afectada por el zoom si está bloqueado el vértice de transformación y el potenciómetro.
También puedes realizar otros tipos de transformaciones desde el menú derecho. Consulta la imagen 
para ver escalas, sesgos, simetrías, etc.
Paso 6: Edición avanzada
Otro punto importante: si seleccionas un path y queda iluminado, presiona la tecla Supr (suprimir) para eliminar ese path del dibujo (no se podrá recuperar). Si aplicas Ctrl + C y Ctrl + V (copiar y pegar), se copiará el elemento seleccionado completo. Si quieres copiar solo el path, selecciónalo y pulsa el botón "seleccionar solo...". Consulta la imagen 
.
Con todo esto, puedes realizar la composición que desees y aplicar todas las transformaciones. Como nota, en esta web aplicamos transformaciones matriciales de 4x4 que nos dan libertad para crear animaciones muy complejas y generar código fácilmente. Te animo a leer este tutorial paso a paso y a explorar cómo crear logotipos y animaciones vectoriales gratis desde nuestra página creadorlogos.com, descargarlos y generar espectaculares animaciones.
En próximos artículos, te enseñaremos más técnicas avanzadas para trabajar con SVG, incluyendo animaciones de transformaciones. ¡Te animamos a seguir leyendo mi blog para descubrir más trucos y técnicas que elevarán tus diseños a otro nivel!
