Cómo utilizar patrones SVG como fondos

Los patrones SVG ofrecen un enfoque más flexible para repetir una imagen de fondo en una página web que el "tiling" CSS. Veamos por qué es eso y cómo puedes utilizarlos.

Lo que aprenderás

Este tutorial está disponible tanto en video como en forma textual; aquí hay un desglose de lo que vas a aprender:

1. Comenzaremos mirando el método más familiar de "tiling" de CSS.
2. Luego crearemos un par de patrones SVG, aprendiendo la sintaxis correcta sobre la marcha.
3. Compararemos los dos enfoques y comentaremos los pros y los contras.
4. Luego, veremos algunas herramientas que puedes utilizar para crear patrones SVG.
5. Finalmente, verificaremos el soporte del navegador para SVG.

Mira el Screencast

Please accept preferences cookies to load this content.

1. CSS Tiling

Comencemos por revisar el CSS "tiling": el método más tradicional de repetir una imagen para un fondo. La idea es sencilla: pasamos una URL a la propiedad background del elemento que queremos cubrir. La URL apunta a un archivo de imagen, en este caso un archivo PNG. Por defecto nuestra imagen se repetirá a lo largo de ambos ejes.

1

body {

2

    background: url("cuadros.png");

3

}

Así es como se ve:

2. Patrones SVG

Ahora echemos un vistazo a los patrones de SVG, algo que, cuando se encuentra por vez primera, es un poco más difícil de entender. Comenzaremos por codificar un ejemplo a mano.

Codificando SVGs a mano

Para un repaso sobre cómo codificar manualmente todas las diversas partes de un SVG, estos dos tutoriales para principiantes de Kezz Bracey son realmente útiles:

• 
  SVG
  Cómo codificar SVG a mano
  Kezz Bracey
• 
  SVG
  SVG Viewport y viewBox (para principiantes)
  Kezz Bracey

Empieza con un SVG

Para iniciar, crearemos un elemento svg, dándole un alto y ancho de 100% para que ocupe el contenedor en el que lo situemos.

1

<svg width="100%" height="100%">

2

3

</svg>

Para crear un pattern debemos colocarlo en la sección defs (definiciones) del svg, de esta forma:

1

<svg width="100%" height="100%">

2

    <defs>

3

        <pattern>

4

5

        </pattern>

6

    </defs>

7

</svg>

Ahora agreguemos algunos atributos a ese elemento de patrón. Le daremos un ID para que podamos consultarlo más tarde, después especificaremos las coordenadas X e Y iniciales, los valores de ancho y alto, e indicaremos que patternUnits son userSpaceOnUse (esto define el sistema de coordenadas, sobre el cual puedes leer más en MDN):

1

<svg width="100%" height="100%">

2

    <defs>

3

        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

4

5

        </pattern>

6

    </defs>

7

</svg>

Habiendo configurado esos parámetros, ahora necesitamos definir la imagen que será repetida. Vamos a crear un círculo básico:

1

<svg width="100%" height="100%">

2

    <defs>

3

        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

4

5

            <circle fill="#bee9e8" cx="50" cy="50" r="25">

6

            </circle>

7

8

        </pattern>

9

    </defs>

10

</svg>

Ningún patrón será visible aún, pero eso se debe a que lo hemos definido sin aplicarlo realmente a nada. Cambiemos eso aplicándolo a <rect> fuera de nuestros <defs> .

1

<svg width="100%" height="100%">

2

    <defs>

3

        <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

4

5

            <circle fill="#bee9e8" cx="50" cy="50" r="25">

6

            </circle>

7

8

        </pattern>

9

    </defs>

10

11

    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect>

12

</svg>

Fundamentalmente, verás que el atributo fill (que normalmente puede ser un valor de color o nombre) apunta a una URL que contiene la ID de nuestro patrón recién definido: fill="url(# polka-dots)".

Revisa la demostración a continuación:

Un patrón SVG más complejo

Para un ejemplo más complejo, vamos a dejar atrás la codificación manual y vamos a generar un patrón utilizando una herramienta de terceros. Emplearemos heropatterns.com, un sitio web que te permite seleccionar patrones SVG predefinidos, alterar sus colores y atributos, y luego copiar el código generado.

Voy a utilizar el patrón de rompecabezas:

En vez de copiar el CSS generado en su totalidad, voy a copiar solo el parámetro d = "", que es la ruta real dibujada.

El código svg que estructuramos será casi exactamente el mismo que nuestro ejemplo previo. La ID dentro del <pattern> será diferente, evidentemente, y le daremos dimensiones ligeramente distintas a lo que se utiliza en los heropatterns.

Así que donde, en nuestro ejemplo previo, definimos un <circle> , esta vez definimos un <path>. Le damos un color de relleno, luego pegamos en la ruta que copiamos hace un momento. Esto es lo que nos da:

3. CSS "Tiling" vs. Patrones SVG (SVG Patterns)

Ventajas de CSS "tiling"::