Patrones SVG en css

facebook-svg gplus-svg twitter-svg

Por defecto el CSS repite ( background-repeat ) la imagen de fondo ( background-image ) en todas las direcciones, tantas veces como fuera necesario, hasta cubrir completamente el elemento. Es exactamente lo que hacen los patrones ( <pattern> ) en SVG. Por lo cual: si queremos utilizar una imagen SVG para crear patrones CSS podemos prescindir de <pattern>.

Para establecer una imagen como fondo ( background-image ) de un elemento HTML utilizamos algo así:

.elemento{ background-image: url('imagen.gif');}

También podemos utilizar una imagen SVG:

elemento{ background-image: url('imagen.svg');}

Pero esto implica guardar una imagen.svg y después recuperarla para utilizarla en el CSS.
Si lo que queremos es reducir el número de solicitudes HTTP ( HTTP requests ) para mejorar el rendimiento de nuestra página web entonces sería aconsejable utilizar data:uri.


.elemento{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHE.............................lEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==");}

La verdad es que esto no hay quien lo entienda. Modificar aunque ligeramente el código SVG es humanamente imposible.

Una propuesta que se puede ver por ahí es utilizar el código SVG no cifrado ( unencoded ) así:

.ajedrez { background-image: url("data:image/svg+xml;utf8, <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' style='background-color:white;'><rect id='rect' fill='black' width='20' height='20'/><use xlink:href ='#rect' transform='translate(20 20)'/></svg>");}

Mucho mejor, aunque continua siendo críptico. Mirémoslo detenidamente. Lo destacado en rojo indica al navegador que lo que viene a continuación es un data:uri, ( data: ) y que se trata de una imagen SVG ( image/svg+xml ).

.ajedrez { background-image:url("data:image/svg+xml;utf8,<svg. . . 

Normalmente cuando utilizamos SVG en HTML5 no utilizamos espacios de nombres ( namespace ), pero en este caso es importante utilizarlos. No olvidemos que, al fin y al cabo, los data:uri son el equivalente a una referencia hacia una fuente externa.

<svg xmlns='http://www.w3.org/2000/svg' . . .

Ulteriormente utilizamos el espacio de nombres para definir el prefijo de espacios de nombre ( namespace prefix ):

xmlns:xlink = "http://www.w3.org/1999/xlink"

Es importante que lo hagamos porque en el código tenemos un elemento <use> y el atributo xlink:href de este especifica el elemento que queremos referenciar:

<use xlink:href ='#rect' transform='translate(20 20)'/>

Lo que viene a continuación es fácil de entender: el tamaño de la imagen SVG es width='40' height='40' y el color de fondo es blanco: style = 'background-color:white;'. A continuación viene el código para la imagen: un rectángulo negro. Como ya sabemos el color de relleno ( fill ) por defecto en SVG es negro, así que no necesitamos utilizar el atributo fill.

<rect id='rect'  fill="black"  width='20' height='20'/>

Vamos a reutilizar y trasladar este rectángulo tanto en x como en y:

<use xlink:href ='#rect' transform='translate(20 20)'/>

Al final cerramos la etiqueta SVG: </svg>.

See the Pen SVG ajedrez #1 by Gabi (@enxaneta) on CodePen.

¡Pero no funciona en Firefox!

De hecho esto funciona pero no en todos los navegadores. Hagámoslo bien. Para optimizar el código vamos a seguir estas reglas:

a. Lo ponemos todo entre comillas dobles ( " ) y ponemos los atributos entre comillas sencillas ( por ejemplo height = '122px' ). De esta manera no tendremos que escaparlas.

background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' style='background-color:white;'><rect id='rect' width='20' height='20'/><use xlink:href ='#rect' transform='translate(20 20)'/></svg>");

b. Ciframos los caracteres no-alfanuméricos, los así llamados caracteres reservados o caracteres inseguros ( unsafe in URLs characters ) pero no los espacios en blanco:

< se transforma en %3C
> se transforma en %3E

Por ejemplo <svg> vuelve a ser %3Csvg%3E

# se transforma en %23

Por ejemplo fill = '#abcdef' vuelve a ser fill = '%23abcdef'

el guión - se transforma en %2D

Por ejemplo stroke-width='2' vuelve a ser stroke%2Dwidth='2'

el símbolo matemático porciento % se transforma en %25

Por ejemplo width ='50%' vuelve a ser width ='50%25'

.ajedrez {
  background-image: url("data:image/svg+xml;utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' style='background%2Dcolor:white;'%3E%3Crect id='rect' fill='black' width='20' height='20'/%3E%3Cuse xlink:href ='%23rect' transform='translate(20 20)'/%3E%3C/svg%3E");

Y con esto tendría que bastar.

See the Pen SVG ajedrez #2 by Gabi (@enxaneta) on CodePen.

Para una lista completa de los caracteres reservados y su codificación consulte Wikipedia: Código porciento
También puede leer este articulo en codepen.io: Optimizing SVGs in data URIs

Vea también esta pequeña galería de patrones SVG