Orden de transformaciones SVG: escala y coloca el diseño

Para el atributo SVG transform="translate(60 25) scale(2)", un punto original se escala por dos y después se mueve 60 unidades horizontalmente y 25 verticalmente al pasar al sistema de coordenadas padre. Invierte la lista a scale(2) translate(60 25) y esa traslación también se duplica. El diseño tiene el mismo tamaño, pero otra posición.

Cuando un logotipo salta después de redimensionarlo, comprueba la lista de transformaciones antes de editar sus trazados. Una organización útil es un grupo exterior para la colocación y uno interior para la escala. Los dos trabajos quedan visibles y las coordenadas originales del diseño siguen disponibles para editar después.

Sigue un punto en lugar de adivinar el orden

Toma el punto original (10, 10). Con una escala de 2 y una traslación de (60, 25), las dos listas producen:

Ambos puntos proceden de la misma coordenada original. La segunda lista escala tanto la traslación como el diseño. Su posición final difiere en (60, 25) de la primera.

Puedes encontrar descripciones del orden que parecen contradictorias. La especificación SVG describe una lista como sistemas de coordenadas anidados en el orden escrito: la transformación situada más a la izquierda se convierte en el grupo exterior. Al seguir un punto original hacia fuera a través de esos grupos, actúa primero la operación más interior. La definición del atributo transform del W3C muestra expresamente el anidamiento equivalente.

Para calcular puntos, trabaja desde la función más a la derecha hacia la izquierda. Para la estructura de grupos, lee de fuera hacia dentro. Mantén la interpretación elegida coherente durante el cálculo.

Compara la misma marca de dos piezas

Guarda este ejemplo completo como transform-order.svg y ábrelo en un navegador. El diseño es un anillo cuadrado original con un acento triangular separado. La abertura es espacio vacío real definido por la regla de relleno par-impar.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Cambia solo el atributo del grupo a transform="scale(2) translate(60 25)". La marca se mueve más a la derecha y abajo, mientras que su tamaño y el espacio entre las piezas permanecen iguales.

Renderizamos ambas listas y un equivalente con grupos anidados en un navegador. Los paneles comparativos utilizan áreas de coordenadas idénticas; la marca tenue muestra la geometría original. Cada punto rojo marca dónde termina el punto original (10, 10).

El cuadro local del diseño original es x=10, y=10, width=95, height=40. La primera organización produce límites en coordenadas de la raíz de x=80, y=45, width=190, height=80. La lista invertida produce x=140, y=70, con el mismo tamaño de 190 × 80.

Estas medidas describen este ejemplo sencillo sin trazo. El ejemplo no tiene animación ni transformación CSS. Demuestra la composición de coordenadas, no la calidad de conversión de PerfectVector ni la compatibilidad con todos los editores SVG.

Separa colocación y tamaño con grupos anidados

Sustituye el grupo original por esta estructura y conserva sus trazados sin cambios:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Esto coincide con translate(60 25) scale(2) en un único grupo. La traslación exterior coloca el sistema de coordenadas escalado. Cambiar la escala interior deja los valores de traslación exterior en (60, 25).

Eso no significa que todos los puntos visibles permanezcan fijos al cambiar la escala. Un punto alejado del origen local sigue moviéndose al multiplicarse sus coordenadas. Decide qué punto original debe anclar el diseño antes de elegir la traslación.

Por ejemplo, supón que la esquina original del anillo (10, 10) debe llegar a (120, 80) después de escalar por 2. Calcula:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Utiliza translate(100 60) scale(2). La esquina ahora se mapea a (120, 80). Trasladar directamente por (120, 80) colocaría allí el origen local y dejaría la esquina más a la derecha y abajo.

Este cálculo supone una escala uniforme sin rotación ni cizallamiento. Para elegir deliberadamente un pivote de rotación, utiliza la guía de transform-origin en SVG. Mantén cada transformación en el grupo que corresponde a ese trabajo en lugar de combinar correcciones ajenas entre sí por ensayo y error.

Lee el mapeo renderizado cuando el archivo está anidado

Un SVG importado puede tener ya transformaciones en varios ancestros. Observar únicamente el atributo del grupo más cercano omite su efecto combinado. La referencia de transform de MDN también señala que una transformación CSS tiene prioridad cuando la propiedad CSS y el atributo de presentación afectan al mismo elemento. Comprueba los estilos calculados si cambiar el atributo parece no hacer nada.

Para un SVG en línea renderizado, este fragmento mapea el punto del grupo elegido a las coordenadas de usuario del SVG raíz:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

La matriz inversa de la raíz elimina el mapeo de pantalla compartido de la raíz. Eso importa porque la visualización de 700 × 400 del ejemplo es el doble de su viewBox de 350 × 200. Aquí los píxeles de pantalla y las coordenadas SVG son unidades diferentes. MDN documenta el mapeo devuelto por getScreenCTM().

Nuestra comparación del navegador produjo matrix(2 0 0 2 60 25) para la primera lista y la versión anidada. La lista invertida produjo matrix(2 0 0 2 120 50). En este ejemplo de escala y traslación, los dos últimos números hacen explícita la diferencia de traslación.

El fragmento supone transformaciones bidimensionales invertibles. Una escala cero no es adecuada para esta comprobación de matriz inversa. Para superposiciones, exportaciones ajustadas, trazos o cuadros rotados, utiliza el proceso más detallado de límites SVG.

No esperes que getBBox() sobre el grupo del diseño indique la posición transformada en la raíz. Su resultado local excluye la transformación del propio elemento y las de sus ancestros, como explica la referencia de getBBox. Un cuadro local puede permanecer sin cambios mientras la marca se mueve visiblemente.

Corrige la transformación antes de reconstruir el diseño

Trabaja sobre una copia del SVG. Identifica los trazados que deben moverse juntos y después inspecciona su grupo y sus ancestros. Anota un punto de anclaje reconocible y el destino previsto para ese punto.

Cambia una transformación cada vez. Si el tamaño es correcto, pero la colocación no, compara la traslación producida por los dos órdenes. Si las piezas se mueven por separado, coloca su posición compartida en un grupo contenedor. Distingue el pivote de rotación de la cuestión del orden de escala.

Vuelve a abrir el archivo guardado en su destino e inspecciona toda la extensión de la marca. Una transformación correcta puede seguir moviendo el diseño fuera del viewBox o hacia una región de recorte. La guía de edición de SVG explica el proceso más amplio de limpieza y exportación.

Si la marca solo existe como PNG o JPG y necesitas contornos editables, el vectorizador de logotipos de PerfectVector puede preparar una alternativa SVG. Inspecciona su silueta, abertura y formas separadas y después agrupa el diseño recuperado y aplica transformaciones de colocación en tu editor o código.

Un mapa de bits puede moverse y escalarse sin vectorizar. Utiliza el calco cuando necesites formas editables y conserva un original vectorial existente cuando lo tengas. Para geometría o letras exactas de un logotipo, aún puede ser necesaria la reconstrucción manual; la guía de vectorización de logotipos explica cómo elegir el método inicial.

Preguntas frecuentes

¿Aplica SVG las transformaciones de izquierda a derecha o de derecha a izquierda? La lista corresponde a sistemas de coordenadas anidados en el orden escrito, de fuera hacia dentro. Al calcular dónde termina un punto original, aplica primero la función más a la derecha y avanza hacia fuera, hacia la izquierda.

¿Por qué invertir translate y scale mueve el logotipo? Con scale seguido de translate en la lista del atributo, la escala también multiplica la traslación. Con translate seguido de scale, la traslación permanece fuera de esa escala. Por tanto, los mismos valores pueden producir tamaños iguales en posiciones diferentes.

¿Mantendrá una traslación exterior todos los puntos fijos al redimensionar el grupo interior? No. Mantiene los valores de traslación exterior separados de la escala interior. Los puntos alejados del origen local siguen moviéndose al escalar. Elige un punto de anclaje y calcula la traslación necesaria para colocarlo.

Fuentes

1. W3C — Atributo transform de SVG — define la relación entre listas de transformaciones y sistemas de coordenadas anidados.
2. MDN — transform de SVG — documenta la sintaxis de transformación, el mapeo de matrices y la prioridad de CSS.
3. MDN — getScreenCTM — describe la matriz utilizada para mapear coordenadas SVG hacia la ventana del documento.
4. MDN — getBBox — explica los límites locales y la exclusión de las transformaciones del elemento medido.

Si tu logotipo original necesita geometría editable, prepara una alternativa SVG con PerfectVector, inspecciona sus contornos y partes separadas y después elige un anclaje y verifica su posición final tras escalar.