Unidades de patrones SVG: motivos repetidos al tamaño correcto

Para mantener constante el espaciado de repetición de un patrón SVG al cambiar las dimensiones de una forma, utiliza patternUnits="userSpaceOnUse" y un ancho y alto numéricos de celda. Controla por separado el diseño dentro de esa celda con patternContentUnits o un viewBox del patrón.

Esa distinción importa cuando un motivo pequeño rellena tanto una insignia estrecha como un banner ancho. Puedes querer más copias en el banner, huecos mayores entre ellas o un motivo estirado. Cada resultado corresponde a una elección de coordenadas distinta. Escalar todo el grupo del banner vuelve a cambiar el resultado.

Si el motivo ya está formado por trazados SVG, consérvalos. La vectorización corresponde a un paso anterior cuando el único original es una imagen rasterizada.

Distingue la celda de su diseño

Un patrón tiene una celda rectangular repetida y contenido dibujado dentro. patternUnits controla x, y, width y height de la celda. patternContentUnits controla las coordenadas del contenido, salvo que el patrón tenga un viewBox.

Con objectBoundingBox, un ancho de .25 significa una cuarta parte del ancho del cuadro delimitador del objeto pintado. No significa una cuarta parte del ancho del motivo. Un rectángulo de 120 unidades de ancho recibe una celda de 30 unidades; uno de 240 unidades recibe una de 60.

El valor predeterminado del contenido sigue siendo userSpaceOnUse. Por tanto, cambiar solo patternUnits puede modificar los huecos entre motivos manteniendo el tamaño de cada uno. Establece ambos atributos deliberadamente en lugar de asumir que cambian juntos.

Compara cuatro versiones de una hoja

Dibujamos los trazados de la hoja para este ejemplo y renderizamos el SVG en un navegador. Ambos rectángulos de destino tienen 80 unidades de alto; sus anchos son 120 y 240. La captura añade etiquetas y fondos alrededor de esas formas originales. Es una demostración SVG, no un resultado de conversión de PerfectVector.

Lee las filas de arriba abajo:

1. Una celda fija de 40 × 40 produce tres columnas en el rectángulo estrecho y seis en el ancho. Las dimensiones de la hoja no cambian.
2. Un ancho de celda de .25 mantiene cuatro columnas en ambos destinos. El rectángulo más ancho tiene más espacio entre hojas porque las coordenadas de la hoja siguen usando unidades de usuario.
3. Las coordenadas de contenido del cuadro delimitador estiran la hoja horizontalmente al duplicarse el ancho del destino. Su tamaño vertical permanece igual porque el alto del destino no cambia.
4. Una celda fija de 40 × 40 con viewBox="0 0 40 40" vuelve al resultado de la primera fila, aunque patternContentUnits="objectBoundingBox" permanezca en el marcado. El viewBox del patrón tiene prioridad.

Abre el ejemplo completo

Guarda esto como pattern-units.svg y ábrelo directamente en un navegador. Las cuatro filas utilizan las mismas definiciones de la figura, sin sus etiquetas y fondos. Cada par de rectángulos está en grupos trasladados para que sus orígenes locales sean comparables.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Empieza por el patrón fixed y cambia solo el ancho del segundo rectángulo. Después inspecciona tile y both antes de cambiar un trazado. Así separas la elección de coordenadas del propio diseño. Para cambios más amplios de trazados y colores, utiliza la guía de edición de SVG.

Utiliza viewBox cuando el motivo tenga sus propias coordenadas

Un viewBox del patrón permite que la hoja conserve un área de dibujo familiar mientras la celda tiene un tamaño independiente. La especificación de patrones SVG ajusta esa área de dibujo a la celda mediante viewBox y preserveAspectRatio.

En la última fila, tanto la celda como el viewBox son de 40 × 40, por lo que no hay diferencia de relación de aspecto. Si después haces rectangular la celda, el valor predeterminado preserveAspectRatio="xMidYMid meet" conserva las proporciones del motivo y centra el área de dibujo ajustada. preserveAspectRatio="none" permite escalas horizontales y verticales independientes. Elige esa opción solo cuando la deformación sea intencionada.

Cambiar patternContentUnits no corregirá el tamaño mientras haya un viewBox en el patrón: ese atributo no tiene efecto en ese caso. Cambia las dimensiones de la celda, el viewBox o su regla de relación de aspecto según qué parte deba cambiar.

Un patrón es útil cuando una definición debe pintar un relleno repetido. Si necesitas copias colocadas individualmente, los símbolos SVG y las instancias use encajan de forma más directa.

Redimensionar el rectángulo es diferente de escalar su grupo

userSpaceOnUse fija el espaciado en coordenadas de usuario, no en píxeles permanentes de pantalla. Una transformación puede escalar esas coordenadas, incluido el relleno de patrón.

También abrimos dos versiones con la definición fixed anterior. El primer rectángulo tenía width="240". El segundo conservaba width="120" dentro de un grupo con transform="translate(20 120) scale(2 1)". Ambos ocupaban 240 unidades de pantalla en ese documento, pero el primero mostraba seis columnas de hojas y el transformado mostraba tres columnas estiradas horizontalmente.

Utiliza esta distinción al diagnosticar diseños adaptables:

• Para mostrar más repeticiones, amplía la geometría del destino manteniendo su escala de coordenadas.
• Para ampliar toda la composición, escala el grupo y espera que también escale la apariencia de su patrón.
• Si la composición de una página cambia el tamaño mostrado del SVG raíz, inspecciona el mapeo del viewBox raíz antes de culpar a los atributos del patrón.

La especificación del sistema de coordenadas SVG describe las transformaciones aplicadas a coordenadas de usuario. Para diferencias entre aplicaciones, comprueba primero las dimensiones del documento SVG; las unidades de patrón por sí solas no establecen un tamaño físico de salida.

Prepara un motivo personalizado antes de repetirlo

Si tu motivo solo existe como PNG o JPG, PerfectVector puede recuperar geometría SVG para la repetición. Convierte el motivo en vector, abre el resultado en un editor e inspecciona el contorno, los pequeños huecos y las formas de fondo indeseadas antes de colocarlo dentro de un patrón.

Conserva un original SVG independiente de ese motivo. Construye la celda alrededor de una copia y después prueba un destino estrecho y otro ancho. Los diseños vectoriales existentes pueden pasar directamente a este paso de edición. Una marca geométrica sencilla puede ser más rápida de redibujar manualmente, mientras que una fotografía puede ser mejor como imagen que trazada en un conjunto complejo de trazados.

Un renderizado del navegador no demuestra que todas las aplicaciones de diseño conserven la definición del patrón. Vuelve a abrir el archivo guardado en su destino real y comprueba allí el espaciado de repetición y la forma del motivo. Un relleno repetido tampoco crea copias editables independientes de cada hoja visible. La guía de archivos SVG explica por qué importa la estructura del documento además de su apariencia.

Antes de entregar el archivo, comprueba que cada fill="url(#...)" apunte a un identificador de patrón único existente, que la celda tenga dimensiones positivas y que el motivo encaje en la celda prevista. Los patrones SVG normalmente recortan el contenido en el límite de la celda, por lo que una hoja que cruce un borde necesita un diseño deliberado de repetición en lugar de asumir que se verá el desbordamiento.

Preguntas frecuentes

¿Por qué cambió el espaciado, pero la hoja mantuvo su tamaño? patternUnits controla las dimensiones de la celda, mientras que patternContentUnits controla las coordenadas del diseño. Una celda relativa al cuadro delimitador con contenido predeterminado en espacio de usuario puede cambiar el espaciado sin redimensionar la hoja.

¿Por qué parece que patternContentUnits no hace nada? Busca un viewBox en el patrón. Cuando existe, define el mapeo de coordenadas del contenido y patternContentUnits no tiene efecto.

¿Mantiene userSpaceOnUse el patrón al mismo tamaño en pantalla? Mantiene las dimensiones numéricas de la celda en el sistema actual de coordenadas de usuario del destino. Escalar un grupo o cambiar el mapeo de coordenadas a ventana del SVG raíz puede seguir cambiando el tamaño mostrado del patrón.

Fuentes

1. MDN — patternUnits — define las coordenadas de geometría de la celda y el valor predeterminado de cuadro delimitador.
2. MDN — patternContentUnits — define las coordenadas del contenido y la prioridad de viewBox.
3. W3C — Patrones SVG — explica el ajuste de celda, el comportamiento de relación de aspecto y el recorte del patrón.
4. W3C — Sistemas de coordenadas SVG — define las transformaciones de coordenadas de usuario que sustentan el escalado de grupos.

¿Tienes un motivo que solo existe rasterizado y quieres reutilizar? Convierte tu imagen en trazados SVG, inspecciona el contorno recuperado y pruébalo en ambos tamaños de destino antes de crear la repetición final.