Unidades de degradado SVG: un mismo degradado para los trazados de un logotipo

Para extender un mismo degradado por varios trazados SVG, usa gradientUnits="userSpaceOnUse", define sus extremos en las coordenadas del dibujo y mantén los trazados en el mismo sistema de coordenadas. Cada trazado mostrará la parte del degradado correspondiente a su posición. Las piezas del logotipo pueden seguir editándose por separado.

El valor predeterminado, objectBoundingBox, ajusta el degradado a cada elemento pintado. Por eso, referenciar el mismo ID de degradado desde tres trazados puede producir tres transiciones completas de morado a naranja. Cambiar las unidades corrige esa repetición, pero un elemento hijo transformado todavía puede desplazar su propio relleno. La referencia de gradientUnits de MDN define el espacio de referencia como el espacio de usuario actual del elemento que utiliza el degradado.

Este tutorial usa un emblema original de tres piezas dibujado directamente con trazados SVG. Si ya tienes un logotipo vectorial, trabaja con ese archivo maestro. Una fuente que solo existe como imagen rasterizada necesita recuperar su geometría antes de editar el relleno; la guía de vectorización de degradados explica esa elección con más detalle.

Decide si el degradado corresponde a cada figura o al logotipo completo

Usa un relleno relativo al objeto cuando cada pieza deba tener su propia transición completa. Usa extremos compartidos en el espacio de usuario cuando las piezas izquierda y derecha deban tomar distintos colores de una sola transición.

Aplicar fill="url(#brandBlend)" a un grupo transmite el relleno a sus hijos. No hace que un degradado relativo al cuadro delimitador del objeto mida la silueta conjunta del grupo. Los hijos siguen recibiendo su propio relleno. La especificación de servidores de pintura SVG describe los degradados como recursos referenciados por el relleno o el trazo de un elemento.

Un emblema, cuatro elecciones de coordenadas

Define extremos que abarquen el dibujo

Los trazados del ejemplo ocupan posiciones horizontales de x=30 a x=310. Esos son los extremos del degradado. El triángulo termina en x=125, el bloque central ocupa de 140 a 210 y la figura derecha va de 225 a 310.

Guarda esto como shared-logo.svg y ábrelo en un navegador:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Deberías ver un triángulo morado, un bloque central mayormente rosa y una figura derecha con tonos naranjas, como en B. Los espacios vacíos ocultan partes del mismo degradado; el color no vuelve a empezar al comenzar el siguiente trazado. Cambia un punto de color y las tres piezas se actualizarán porque referencian la misma definición.

Para compararlo directamente con A, sustituye los atributos gradientUnits, x1, y1, x2 e y2 del degradado por x1="0%" y1="0%" x2="100%" y2="0%". Omitir gradientUnits restablece el valor predeterminado. Ahora cada figura recibe la transición de color completa.

Los porcentajes también tienen otra referencia: con userSpaceOnUse, se refieren al viewport SVG actual en vez de al cuadro delimitador del objeto pintado. Los números explícitos facilitan la inspección de este ejemplo. Un logotipo que ocupa solo parte de un viewBox grande no tiene que usar todo el ancho de ese viewBox para su degradado.

Revisa las transformaciones cuando una pieza tenga el color incorrecto

En C, parece que la figura derecha sigue en el mismo sitio. Las coordenadas de su trazado se desplazaron 60 unidades a la izquierda y un grupo hijo la desplazó 60 unidades a la derecha:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Sustituye el tercer trazado del ejemplo completo por este grupo para reproducir la discrepancia. Su borde izquierdo visible sigue en x=225, pero su borde izquierdo local está en x=165. El degradado usa ese espacio local, así que la pieza toma una parte anterior, más rosa, de la transición. userSpaceOnUse no garantiza un único sistema de coordenadas global con independencia de las transformaciones anidadas.

Para este emblema, recupera las coordenadas originales del tercer trazado y elimina su traslación particular. Si necesitas mover todo el logotipo, aplica transform="translate(10 0)" al grupo exterior existente. Esto produce D: las tres figuras y su relleno compartido se desplazan juntas.

Esta corrección funciona porque los trazados ya están expresados en un sistema de coordenadas común. Colocar hijos transformados independientes dentro de otro grupo no elimina sus transformaciones individuales. En un logotipo importado, inspecciona esas transformaciones antes de aplanar o reescribir la geometría y conserva una copia del archivo maestro original.

Cuándo resulta útil gradientTransform

gradientTransform cambia la correspondencia de coordenadas del relleno sin cambiar la geometría del trazado. Resulta útil cuando necesitas girar, sesgar o reposicionar deliberadamente un degradado. MDN lo documenta como una transformación adicional aplicada después de establecer el sistema de coordenadas elegido por gradientUnits.

Evita ajustar una definición compartida para compensar un solo hijo sin revisar los demás. Todas las figuras que referencian esa definición pueden verse afectadas. Para el logotipo sencillo de este ejemplo, mantener el dibujo en un espacio común facilita su mantenimiento; un dibujo importado más complejo puede necesitar definiciones de degradado con correspondencias independientes.

Dónde encaja PerfectVector

Si la única fuente es un logotipo PNG o JPG, PerfectVector puede ayudarte a recuperar geometría vectorial editable antes de reconstruir el degradado coordinado. Vectoriza el logotipo y después inspecciona la silueta, los huecos y las distintas piezas en tu editor. Usa esas figuras como punto de partida para el relleno compartido.

La demostración anterior se creó a mano para aislar el comportamiento de las coordenadas; no es el resultado de una conversión con PerfectVector. No debes asumir que trazar píxeles sombreados recuperará los puntos de color originales del degradado ni su configuración de coordenadas. También puede resultar más rápido redibujar manualmente un logotipo sencillo. Conserva el SVG, AI o PDF vectorial existente cuando esté disponible.

Si una figura no acepta un relleno nuevo, realiza las comprobaciones para cambiar colores en SVG antes de modificar las coordenadas del degradado. Si la misma exportación se ve diferente entre aplicaciones, sigue el diagnóstico de cambios de color SVG.

Vuelve a abrir el archivo antes de entregarlo

Guarda un SVG nuevo y prueba ese archivo exacto, no solo el lienzo del editor. Comprueba lo siguiente:

• Existe el ID del degradado y todos los trazados previstos lo referencian.
• El degradado abarca los límites del logotipo en la dirección prevista.
• Al mover el logotipo completo, los colores siguen coordinados.
• Las piezas separadas siguen siendo seleccionables donde necesitas editarlas.
• La aplicación de destino conserva el aspecto esperado.

Un renderizado suave en el navegador demuestra el comportamiento del relleno en ese navegador. No acredita compatibilidad con todos los editores ni convierte el degradado en geometría de corte. Conserva una versión de colores planos para los flujos que necesitan figuras sólidas y mantén el SVG maestro editable. La guía de archivos SVG explica la diferencia entre el contenido geométrico del archivo y su apariencia visible.

Preguntas frecuentes

¿Tengo que combinar los trazados para compartir un degradado? No. Los trazados separados pueden referenciar un mismo degradado. Usa userSpaceOnUse con extremos adecuados y asegúrate de que los trazados compartan el sistema de coordenadas previsto.

¿Por qué el degradado sigue repitiéndose al agrupar los trazados? Un grupo puede transmitir su relleno a los trazados hijos, pero un degradado objectBoundingBox sigue usando los límites de cada hijo pintado. Define extremos en el espacio de usuario cuando la transición deba abarcar todo el logotipo.

¿Por qué cambió el color de un trazado al moverlo a un grupo? Una transformación en ese grupo puede cambiar el sistema de coordenadas local del trazado. Compara sus transformaciones con las de los demás y prueba el SVG exportado antes de ajustar el degradado compartido.

Fuentes

1. MDN — gradientUnits — Define el valor predeterminado, los sistemas de coordenadas de referencia y el comportamiento de los porcentajes.
2. SVG Working Group — Servidores de pintura — Especifica el relleno reutilizable con degradados, sus puntos de color y el comportamiento de extensión.
3. MDN — gradientTransform — Explica las transformaciones adicionales de las coordenadas del degradado.

¿Partes de un logotipo rasterizado? Convierte tu logotipo en trazados SVG editables, inspecciona las figuras separadas, reconstruye el degradado compartido y vuelve a abrir la exportación final para comprobar su alineación.