Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 12/11/2012

Pattern: Definición de patrones en SVG

Los patrones ofrecen una de las formas más atractivas de relleno para SVG, pero también el más confuso. La clave es empezar poco a poco y construir capa sobre capa. En este punto, no te preocupes por nada, pero los elementos del patrón.

La creación de patrones, aunque en principio parezca complicado, es tan sencillo como utilizar formas, trayectorias, imaágenes, etc. Sólo hay que agruparlas dentro de una cláusula pattern. La relación entre el tamaño del lienzo y el patrón definirá su aspecto.

Dicho de otra manera, la creación de un patrón es como crear un documento SVG en pequeñito. Se definen las coordenadas que se desea que la vista muestre y el tamaño de la misma. A continuación, agregamos formas, trayectorias, imágenes, etc al patrón y ya está.

El patrón se repetirá a forma de mosaico. Por defecto el patrón se comportará como un evento de overflow tipo hidden de HTML, es decir, que si el patrón no entra entero, se recortará. Al igual que sucede con los degradados o gradientes, debemos definir el patrón dentro de defs para poder utilizarlo.

Los siguientes comandos están disponibles para los datos de la trayectoria:

Filtro: 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="pattern" width="20" height="10"patternUnits="userSpaceOnUse">
            <path d="M0,0 L10,0 L10,5 L0,5z" fill="lightblue" stroke="none" />
            <path d="M0,5 L10,5 10,10 L0,10z" fill="black" stroke="none" />
            <path d="M10,0 L20,0 L20,5 L10,5z" fill="black" stroke="none" />
            <path d="M10,5 L20,5 L20,10 L10,10z" fill="lightgray" stroke="none" />
        </pattern>
    </defs>
    <rect id="pattern_image" x="0" y="0" width="100%" height="100%" fill="url(#pattern)" />
</svg>

Las propiedades configurables de path son:

ParámetrosDefinición

id

El nombre de identificador que se utiliza para hacer referencia a este patrón.

patternUnits

Puede tomar los valoresUserSpaceOnUse o objectBoundingBox. El segundo, hace que las unidades de posicionamiento y tamaño (x, y, width y height) en formato decimal (0.00 a 1.00) o en porcentaje delimiten la zona que usa el patrón.

patternContentUnits

Es idéntico a patternUnits aunque, éste, no está soportado por el plugin de Adobe.

patternTransform

Permite que el objeto pueda ser "transformado". Para saber más puedes leer el artículo sobre este tema accediendo a Transformaciones en gráficos vectoriales SVG.

x,y

Son el desplazamiento desde el borde superior izquierdo del SVG. Por defecto son 0.

width, height

Son el ancho y alto de la baldosa patrón.

viewBox

El cuadro de vista son los puntos de visión en esta área del SVG. Necesita 4 valores separados por espacios en blanco o comas. (Min x, min y, ancho, alto).

xlink: href

Referencia a otro modelo cuyos atributos se utilizan como valores por defecto y hereda su hijos o descencientes. Puede ser recursivo.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.