PDF de programación - Scalable - Un libro sobre SVG

Scalable
Un libro sobre SVG

Jorge Aznar

Este libro está a la venta en http://leanpub.com/scalable

Esta versión se publicó en 2016-01-05

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.

© 2014 - 2016 Jorge Aznar

¡Twitea sobre el libro!

Por favor ayuda a Jorge Aznar hablando sobre el libro en Twitter!

El hashtag sugerido para este libro es #scalablelibro.

Descubre lo que otra gente está diciendo sobre el libro haciendo click en este enlace para buscar el
hashtag en Twitter:

https://twitter.com/search?q=#scalablelibro

Para Mª Carmen, Rosana e Izarbe, y a la memoria de mi padre Agustín.

Índice general

.
.

.
.

.
.

.

.

1. DRY con group, defs y use .
.
.

.
.
.
.
1.1 Group .
.
.
1.2 Defs y use .
.
.
1.3 Usando CSS para aplicar estilos .
1.4
.
.
1.5 Métodos para aplicar estilos CSS a SVG .
1.6
.

Fragmentos identificadores .

Sprites con SVG .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.

.

.
.
.

.

.

.
.
.

.

.

.

.

.
.
.

.

.

.

.
.

.

.
.

.

.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

1
1
2
5
7
12
14

1. DRY con group, defs y use

Dont repeat yourself que viene a ser que no te repitas a ti mismo. Si ya tenemos una figura que
ocupa veinte líneas para que vamos a repetir las veinte líneas si con una sola línea nos basta y nos
sobra. En este capítulo vamos a ver como lo podemos hacer.

1.1 Group

La etiqueta <g> representa a los grupos, y como su nombre indica la utilizamos para agrupar los
diferentes elementos que estén dentro de la propia etiqueta.
En ella podemos definir una serie de figuras y aplicarles los mismos colores de fondo, grosor y
color del borde. A los grupos también le podemos aplicar filtros, animaciones, transformaciones y
atributos CSS.
Para mover un grupo vamos a tener que recurrir a transform=”translate” ya que no disponemos
de las coordenadas x e y. Lo mismo para el tamaño, el cuál si queremos modificar a la vez lo haremos
con transform=”scale”.

<g fill="crimson" transform="rotate(45)">

<rect x="100" y="30" width="40" height="40"/>
<rect x="150" y="30" width="40" height="40"/>
<rect x="200" y="30" width="40" height="40"/>
<rect x="250" y="30" width="40" height="40"/>
<rect x="300" y="30" width="40" height="40"/>

</g>

¹http://codepen.io/jorgeatgu/details/qexKf/

1

¹

DRY con group, defs y use

2

En el anterior ejemplo podemos ver como hemos indicado a la vez el mismo color y las mismas
transformaciones a todos los rectángulos.

Soporte

1.2 Defs y use

Ahora que ya sabemos como crear nuestras propias formas básicas, patrones, degradados y aplicar a
todos ellos múltiples transformaciones vamos a ver como podemos reutilizar todo este código para
no tener que ir repitiendo a lo largo de documento los mismos elementos con el consecuente ahorro
de código y sobre todo de tiempo.
El código que queramos repetir a lo largo del documento deberá de ir entre <defs> </defs> a los
elementos les indicaremos un id=”” con el nombre que queramos y a continuación para usar este
código utilizaremos la etiqueta <use>, lo posicionaremos en el documento a través de las coordenadas
x e y, le podemos aplicar transformaciones como scale, matrix, rotate etc…
Todo el código que esté dentro de la etiquetas <defs> no se va a tener en cuenta a no ser que
utilicemos la etiqueta <use>.
Aunque su uso no es obligatorio la W3C recomienda utilizar estas etiquetas para hacer nuestro
código mucho más accesible y legible. Vamos a ver unos ejemplo para que nos quede más claro su
funcionamiento.

DRY con group, defs y use

<defs>

<rect id="rectangulo" width="40" height="40"/>
<circle id="circulo" r="30"/>

</defs>
<use xlink:href="#rectangulo" x="300" y="200"fill="crimson"/>
<use xlink:href="#circulo" x="250" y="300" fill="gold"/>
<use xlink:href="#circulo" x="600" y="200" fill="darkslategrey"/>
<use xlink:href="#rectangulo"x="700" y="300" fill="navajowhite"/>

3

²
En el ejemplo anterior hemos definido entre las etiquetas <defs></defs> un elemento <rect> con un
id=”rectangulo” y un elemento <circle> con un id=”circulo”. Ahora vamos a llamar a estos dos
elementos tantas veces como queramos a través de la etiqueta <use> y para ello vamos a utilizar el
atributo xlink:href con la # antes del nombre del id, también le indicamos la posición del elemento
a través de las coordenadas horizontal y vertical.
Una advertencia, como podéis observar en el código los elementos <rect> y <circle> no tienen
un color definido, esto se debe a que si le indicamos un color al elemento que está en <defs> los
elementos que creamos a través del <use> heredarán ese color y no tendremos oportunidad alguna
de cambiar el color, así que si la idea es que cada rectángulo tenga un color diferente tendremos que
dejar sin definir el color. En el caso de que no definamos el color ni en <defs> ni en <use> el color
por defecto será negro.
Vamos a ver qué podemos hacer si combinamos <defs> + <use> + <g>

²http://codepen.io/jorgeatgu/details/Cuavg/

DRY con group, defs y use

4

<defs>

<g id="cuadrados" fill="crimson" transform="translate(150 50)">

<rect x="30" y="30" width="40" height="40"/>
<rect x="80" y="30" width="40" height="40"/>
<rect x="130" y="30" width="40" height="40"/>
<rect x="180" y="30" width="40" height="40"/>
<rect x="230" y="30" width="40" height="40"/>

</g>

</defs>

<use xlink:href="#cuadrados"/>
<use xlink:href="#cuadrados" transform="translate(0 100)"/>
<use xlink:href="#cuadrados" transform="translate(0 100) rotate(45)"/>
<use xlink:href="#cuadrados" transform="scale(.5)"/>
<use xlink:href="#cuadrados" y="400" opacity=".5"/>

³
En este ejemplo con cinco etiquetas <use> hemos creado cinco grupos de cinco rectángulos cada
uno, y a cada grupo le hemos dado una propiedad diferente.

³http://codepen.io/jorgeatgu/details/lHFAi/

DRY con group, defs y use

Soporte

5

1.3 Usando CSS para aplicar estilos

Vamos a ver cómo podemos aplicar un efecto de filtro, un patrón y un degradado a los elementos de
nuestro SVG a través de CSS.
El método es sencillo, una vez declarados nuestros efectos entre las etiquetas SVG vamos a crear
una clase en nuestro achivo CSS, y en esa clase vamos a declarar el efecto por ejemplo el <pattern>
declaramos con fill: url(#patron) ahora volvemos al HTML y aplicamos la clase al elemento que
queremos que reciba el efecto.

.patron {
fill: url(#patron);
}

.filtro {
filter: url(#filtro);
}

.degradado {
fill: url(#degradado);
}

DRY con group, defs y use

<defs>

<pattern id="patron" width="40" height="40" patternUnits="userSpaceOnUse">

<circle cx="20" cy="20" r="20" fill="crimson"/>

</pattern>
<filter id="filtro" filterUnits="objectBoundingBox">

<feColorMatrix type="hueRotate" in="SourceGraphic" values="60"/>

</filter>
<linearGradient id="degradado" gradientUnits="objectBoundingBox">

<stop offset="0%" stop-color="khaki"/>
<stop offset="10%" stop-color="khaki"/>
<stop offset="10%" stop-color="crimson"/>
<stop offset="20%" stop-color="crimson"/>
<stop offset="20%" stop-color="khaki"/>
<stop offset="30%" stop-color="khaki"/>
<stop offset="30%" stop-color="crimson"/>
<stop offset="40%" stop-color="crimson"/>
<stop offset="40%" stop-color="khaki"/>
<stop offset="50%" stop-color="khaki"/>
<stop offset="50%" stop-color="crimson"/>
<stop offset="60%" stop-color="crimson"/>
<stop offset="60%" stop-color="khaki"/>
<stop offset="70%" stop-color="khaki"/>
<stop offset="70%" stop-color="crimson"/>
<stop offset="80%" stop-color="crimson"/>
<stop offset="80%" stop-color="khaki"/>
<stop offset="90%" stop-color="khaki"/>
<stop offset="90%" stop-color="crimson"/>
<stop offset="100%" stop-color="crimson"/>

</linearGradient>

</defs>
<image class="filtro" xlink:href="zgzsky.jpg" width="200" height="200" y="50" x=\
"150"/>
<rect class="patron" width="200" height="200" x="500" y="150"/>
<rect class="degradado" width="200" height="200" x="750" y="150"/>

⁴http://codepen.io/jorgeatgu/details/xCebt/

6

⁴

DRY con group, defs y use

Soporte

7

En IE9 y iOS5 no se aplica el efecto del filtro ya que no están soportados.

1.4 Sprites con SVG

A continuación vamos a ver como podemos crear un sprite con SVG y todas las ventajas que ello
conlleva.
Ahora vamos a preparar el archivo que vamos a utilizar como sprite. Lo primero es crear un archivo
XML con la extensión SVG, lo vamos a llamar sprite-images.svg. Las medidas que vaya a tener
nuestro SVG no nos tienen que preocupar ya que vamos a ir seleccionando partes que están dentro de
el, aún así y aunque no es necesario yo le he dado un viewBox="0 0 2976.5 299" vuelvo a repetir que
las medidas no nos tiene que preocupar, podéis hacer todas las pruebas que queráis modificando el
viewBox y si hacemos todo el proceso bien el resultado va a ser el mismo. Para aquellos que no estén
familiriazados con SVG ni con el viewBox aquí os dejo un artículo que escribí sobre el viewBox⁵,
también os dejo otro de Sara Soudeian⁶ bastante más extenso y con una herramienta visual que deja
bastante claro todo el funcionamiento del viewBox.
Vamos a continuar preparando nuestro archivo de sprites. Ahora vamos a ir copiando el código de los
archivos que queremos incluir dentro del sprite. Vamos a copiar todo el código que este comprendido
entre las etiquetas <svg></svg>, las etiquetas no las queremos. Ahora nos vamos a ir a nuestro
sprite-images.svg y vamos a pegar todo el código entre dos etiquetas <g></g> a la etiqueta de
apertura le vamos a asignar un id="robot-codepen" para mas tarde poder hacer referencia al id=”“.
Si dejamos al grupo si