Ahora es posible crear trazos en HTM5 dentro de <svg>, se trata de crear segmentos de linea, entre rectas y curvas para conseguir un gráfico y lo haremos mediante la etiqueta <path>.
Etiqueta <path>
La etiqueta <path> nos permite crear un trazo en la pantalla dentro de un lienzo SVG, nos da libertad para crear cualquier forma geométrica haciendo uso de puntos unidos por lineas y curvas controladas.
<svg> <path/> </svg>
Atributos para <path>
Los atributos para son los mismos que para la mayoría de gráficos SVG, pero ahora hay una en especial y se trata del atributo: «d», pues dentro de ella se define la ruta que seguirá el trazo mediante puntos y comando. A grandes rasgos, recordemos los atributos para grafitos SVG.
- stroke.- color de borde.
- fill.- para color de relleno.
- d.- para definir la ruta del trazo.
Comandos para definir la ruta del trazo
Para indicar la forma que definirá la ruta del trazo haremos uso de varios comandos, de tal manera que con los valores que les asignemos, podamos controlar la forma y posición de gráfico resultante.
- M.- Ubica el origen del trazo.
- L.- crea una linea hacia el punto de su valor.
- H.- dibuja una linea horizontal.
- V.- dibuja una linea vertical.
- C.- para crear una curva.
- S.- curva suave.
- Q.- para dibujar una curva Bézier cuadrática.
- T.- para dibujar una curva Bézier cuadrática ligera.
- A.- dibuja un arco eliptico.
- Z.- basta con poner este atributo al final para cerrar el dibujo total.
Los valores que tomen estos comandos serán puntos del plano, pares (X,Y) hacia donde se dibuje el trazo. Por otro lado, pueden ponerse en mayúsculas para que el dibujo este en posición absoluta y con minúsculas para que la posición sea relativa. A continuación veamos algunos ejemplos prácticos.
Ejemplo de path
Ejemplo 1.- este ejemplo se trata de crear una figura muy simple: un triangulo, empleando la etiqueta partiremos en el punto (80,50), luego crearemos una linea al punto (80,200), seguiremos con otra linea al punto (300,200) y finalmente cerramos con el comando Z.
<svg width="400" height="300"> <path d="M 80 50 L80 200 L300 200 Z" style="stroke:#000; fill:orange;" /> </svg>
Resultado: el resultado es un triangulo con relleno color rojo y borde negro. La ruta es básicamente forma un triangulo. Para comprender mejor el recorrido puedes ver la imagen.
Ahora ya puedes empezar a probar con poner curvas, con los comando que hemos aprendido e ir probando por tu cuenta, es realmente sencillo. Lo que veremos a continuación son ejemplos un poco más avanzados, bastante complicados si te pones a escribir y calcular los puntos por ti mismo, pero el objetivo es que veas lo se puede hacer en SVG y todo el código que hay detrás de simples imágenes. Veamos.
Ejemplos avanzados de <path> en SVG
Para los ejemplos que veremos a continuación, utilizaremos la etiqueta y la propiedad transform, para establecer translate y scale. A grandes rasgos, veamos de qué se tratan estos.
- <g>.- Sirve de contenedor para agrupar varios elementos SVG, en este caso trazos, de tal manera que podamos establecer un estilo para todo el grupo de lineas.
- transform.- esta propiedad nos permitirá hacer una transformación, ya se traslación (translate) o de escala (scale)
- translate.- permite mover la imagen a una posición (X,Y)
- scale.- permite escalar la imagen una relación (x,y) donde (1,1) es el tamaño original.
Cabe mencionar que estos atributos se desarrollan mejor en el curso de CSS. Pero bien, con estas premisas ya podrás entender los siguientes ejemplos
Ejemplo 2.- Ahora verás un ejemplo muy pero mu genial, se trata de un carrito, muy básico pero fíjate en el código HTML5 que hay detrás de dicha imagen, realmente es hermoso.
<svg width="500" height="400"> <g transform="translate(40,350) scale(0.1,-0.1)" fill="red" stroke="none"> <path d="M1805 2749 c-309 -23 -509 -41 -588 -54 -100 -17 -202 -55 -440 -166 -270 -125 -390 -203 -449 -290 -51 -77 -32 -135 52 -160 47 -14 74 -53 121 -172 26 -68 83 -277 77 -282 -2 -1 -24 -12 -50 -24 -159 -75 -234 -219 -254 -485 -5 -68 -3 -92 16 -146 54 -160 155 -250 334 -297 54 -15 75 -15 130 -6 96 16 151 47 238 132 99 98 112 137 106 315 -3 109 -7 126 -32 174 l-27 54 38 34 c93 83 248 163 317 164 38 0 201 -39 251 -60 22 -10 70 -38 107 -63 73 -49 238 -187 238 -200 0 -4 -18 -23 -40 -43 -22 -20 -40 -41 -40 -46 0 -5 -11 -24 -25 -42 -30 -39 -61 -156 -76 -283 -13 -111 -3 -166 49 -266 45 -87 110 -146 210 -188 68 -30 87 -34 167 -34 82 0 96 3 158 33 77 38 182 136 212 197 16 32 20 66 23 177 4 137 4 138 -28 205 l-32 68 57 52 c31 28 86 71 123 96 66 44 211 127 223 127 4 0 14 -27 23 -60 22 -77 69 -139 129 -169 66 -32 161 -32 297 3 119 31 184 62 241 113 82 75 103 159 98 402 l-4 163 99 54 c54 30 101 54 103 54 2 0 1 -16 -3 -35 -8 -47 11 -93 43 -101 61 -16 238 24 303 68 47 32 102 139 154 299 59 182 64 216 35 253 -44 56 -130 71 -204 37 -42 -19 -161 -138 -229 -229 -34 -44 -52 -57 -115 -83 -42 -17 -129 -58 -193 -91 l-118 -59 -32 24 c-48 36 -111 66 -155 73 l-38 6 2 188 c1 180 3 190 24 220 18 23 24 48 27 98 4 62 2 71 -22 99 -47 56 -119 72 -516 113 -478 49 -817 61 -1115 39z m726 -49 c155 -13 679 -75 756 -91 101 -20 141 -95 90 -170 -45 -67 -311 -232 -643 -400 -168 -85 -242 -107 -393 -116 -151 -8 -726 36 -1121 87 -240 32 -792 120 -823 132 -37 14 -40 22 -23 57 33 63 104 108 429 270 282 141 332 162 406 176 46 8 93 15 105 14 18 -1 16 -3 -9 -14 -183 -81 -722 -328 -728 -334 -13 -13 13 -47 54 -70 119 -67 372 -113 969 -178 216 -23 300 -27 550 -27 l295 -1 173 68 c250 99 533 243 604 306 57 51 108 135 92 151 -14 12 -304 67 -449 84 -267 32 -460 39 -910 32 -242 -3 -469 -9 -505 -12 -36 -4 -63 -4 -60 -1 5 6 293 32 430 40 141 8 590 6 711 -3z m164 -94 c184 -19 269 -31 405 -57 155 -30 147 -26 113 -61 -95 -101 -427 -273 -712 -369 -80 -27 -94 -29 -250 -29 -91 0 -233 5 -316 10 -183 12 -488 40 -494 45 -7 7 -53 456 -47 462 25 26 1052 25 1301 -1z m-1361 -43 c6 -29 30 -230 41 -345 4 -40 3 -68 -3 -68 -30 0 -384 53 -472 71 -119 24 -230 56 -230 67 0 4 91 47 203 97 111 49 256 115 322 146 66 32 123 58 127 58 3 1 9 -11 12 -26z m3095 -269 c30 -21 25 -51 -29 -214 -74 -222 -112 -278 -204 -305 -81 -24 -169 -36 -180 -25 -9 9 29 146 43 155 4 2 3 -18 -3 -46 -8 -42 -7 -52 7 -66 14 -15 23 -15 74 -4 115 26 152 59 211 191 54 120 72 190 62 233 -9 41 -41 76 -70 77 -52 0 -145 -105 -215 -245 -25 -49 -45 -84 -45 -77 0 20 -16 14 -66 -28 -27 -22 -80 -56 -119 -76 -226 -118 -410 -245 -670 -463 -66 -55 -128 -101 -137 -101 -10 0 -36 32 -68 85 -57 94 -87 121 -175 161 l-59 26 24 19 c14 10 34 19 45 19 33 0 104 -37 158 -83 119 -101 151 -94 326 67 174 160 367 284 602 386 109 48 114 51 177 127 96 116 142 161 187 183 49 24 93 26 124 4z m-1074 -33 c7 -42 -9 -242 -26 -321 -14 -64 -33 -79 -164 -124 -131 -45 -336 -147 -430 -214 -96 -68 -186 -153 -275 -260 -67 -81 -100 -107 -92 -72 52 223 56 570 7 570 -9 0 -14 -38 -18 -147 -4 -130 -16 -218 -52 -369 -4 -18 -16 -23 -89 -32 -46 -6 -101 -18 -121 -27 l-37 -15 -62 57 c-139 129 -252 196 -422 252 -253 83 -411 103 -599 76 -147 -21 -150 -21 -200 -2 -22 9 -61 16 -86 17 l-46 0 -12 58 c-18 83 -69 239 -98 295 -22 43 -22 48 -6 43 32 -10 433 -75 593 -96 350 -45 913 -90 1141 -90 181 0 296 17 407 60 42 16 208 108 367 204 160 96 295 175 302 175 6 1 14 -16 18 -38z m1015 -40 c18 -35 11 -63 -46 -167 -68 -124 -135 -202 -181 -210 -31 -6 -33 -5 -33 22 1 68 84 223 169 316 57 62 74 69 91 39z m-875 -315 c55 -25 85 -53 69 -64 -6 -4 -27 -17 -47 -30 l-36 -23 -46 36 c-26 19 -51 35 -56 35 -12 0 -11 12 1 44 12 33 47 34 115 2z m-102 -112 c21 -14 37 -29 35 -34 -2 -5 -28 -28 -58 -50 -51 -39 -58 -41 -104 -36 -44 5 -51 3 -77 -24 -16 -15 -29 -36 -29 -45 0 -9 -17 -23 -42 -34 -38 -16 -45 -16 -65 -3 -31 20 -29 46 8 104 36 56 51 65 169 101 47 15 92 31 100 37 20 13 20 13 63 -16z m-396 -134 c-13 -33 -24 -37 -52 -16 -18 13 -17 14 11 29 45 25 54 22 41 -13z m703 -135 c0 -236 -19 -292 -120 -352 -29 -18 -55 -31 -57 -30 -2 2 8 30 21 63 38 94 58 207 54 313 l-3 94 45 33 c25 19 48 34 53 34 4 0 7 -70 7 -155z m-440 97 c0 -5 -11 -19 -25 -32 -20 -19 -25 -20 -25 -7 0 17 26 47 41 47 5 0 9 -4 9 -8z m-2485 -53 c15 -12 74 -79 131 -148 126 -152 138 -182 132 -335 -4 -113 -28 -181 -87 -248 -31 -36 -101 -84 -101 -70 0 4 10 32 22 62 20 49 23 73 23 220 0 146 -3 174 -24 240 -31 100 -69 137 -187 179 -48 18 -107 35 -131 38 -24 3 -43 9 -43 13 0 6 82 46 130 63 39 14 108 6 135 -14z m488 15 c20 -4 37 -9 37 -13 0 -3 -31 -19 -68 -36 -37 -16 -103 -53 -146 -82 -43 -29 -82 -53 -85 -53 -3 0 -16 15 -29 33 l-22 32 22 18 c42 32 200 107 227 107 14 0 43 -3 64 -6z m-287 -34 c-45 -22 -63 -27 -73 -18 -7 6 -13 14 -13 19 0 9 73 27 115 27 26 0 23 -3 -29 -28z m2570 -74 c-18 -155 -54 -261 -111 -325 -45 -49 -86 -64 -181 -63 -133 2 -178 28 -199 115 -7 25 -5 27 22 27 18 0 55 16 90 39 55 35 62 37 84 25 34 -19 74 -17 118 5 55 29 75 64 76 138 1 60 2 62 45 98 38 32 45 34 53 19 5 -9 6 -44 3 -78z m-720 14 c24 -12 44 -25 44 -28 0 -4 -32 -25 -72 -47 -102 -57 -224 -140 -290 -197 -53 -45 -78 -54 -78 -26 0 21 83 123 184 226 113 116 117 117 212 72z m-2216 -50 c152 -30 219 -108 241 -282 17 -134 -18 -327 -74 -409 -22 -33 -26 -34 -83 -32 -130 3 -262 90 -322 212 -25 53 -27 64 -27 191 0 145 19 248 56 309 l19 32 73 -6 c39 -3 92 -10 117 -15z m2780 -32 c-13 -45 -28 -58 -77 -64 l-38 -5 59 56 c32 31 60 55 62 53 2 -2 -1 -20 -6 -40z m-443 -28 c40 -49 38 -53 -33 -84 -83 -36 -219 -122 -307 -193 -72 -58 -82 -59 -109 -10 -19 36 97 136 300 258 53 32 104 58 112 58 8 0 25 -13 37 -29z m-642 -161 c15 -12 73 -78 130 -146 122 -148 135 -179 135 -324 0 -122 -22 -186 -87 -259 -50 -55 -111 -96 -100 -66 42 109 49 157 45 309 -4 133 -8 161 -31 222 -17 47 -37 80 -60 100 -40 35 -156 82 -239 99 -32 6 -58 14 -58 18 0 3 35 20 78 37 93 37 149 39 187 10z m-163 -130 c64 -14 135 -48 165 -81 80 -85 103 -304 52 -488 -28 -101 -54 -148 -86 -156 -34 -9 -144 12 -198 37 -56 26 -150 125 -177 186 -18 41 -21 67 -21 183 1 141 10 201 45 282 l20 48 74 0 c40 0 97 -5 126 -11z"/> <path d="M517 1270 c-69 -55 -61 -249 14 -326 48 -50 131 -71 115 -29 -2 7 4 21 15 31 27 24 39 76 39 169 0 98 -12 123 -70 153 -55 27 -80 28 -113 2z m106 -58 c31 -34 38 -74 28 -146 -10 -67 -31 -106 -57 -106 -8 0 -26 18 -40 40 -36 54 -47 179 -19 210 23 25 67 26 88 2z"/> <path d="M2062 930 c-50 -21 -78 -149 -52 -241 13 -45 47 -96 80 -121 34 -24 85 -29 85 -7 0 9 9 24 18 34 30 29 37 61 37 163 0 72 -4 103 -16 120 -29 41 -109 69 -152 52z m106 -90 c21 -31 23 -42 18 -103 -6 -68 -25 -119 -48 -133 -17 -11 -64 51 -77 101 -16 62 -14 127 5 153 24 35 72 27 102 -18z"/> </g> </svg>
Resultado:
Ejemplo 3.– este ejemplo se trata de una figura de caballo, esta hecha en SVG con trazos y al igual que en el ejemplo anterior hemos utilizado la etiqueta para agrupar los elementos necesarios y poder hacer una transformación de posición y escala.
<svg width="600" height="450"> <g transform="translate(50,410) scale(0.1,-0.1)" fill="orange" stroke="none"> <path d="M4335 4064 c-27 -37 -60 -73 -72 -81 -13 -9 -23 -20 -23 -26 0 -5 10 -2 23 9 l22 19 -19 -22 c-10 -12 -21 -22 -25 -21 -3 1 -13 -1 -21 -4 -8 -3 -46 -15 -85 -27 -100 -32 -239 -100 -331 -161 -43 -29 -101 -60 -129 -70 l-50 -18 30 -12 c16 -6 40 -9 52 -7 13 2 23 3 23 1 0 -1 -33 -18 -73 -38 -56 -28 -88 -53 -140 -110 l-66 -74 42 5 42 6 -37 -29 c-21 -16 -37 -32 -38 -36 0 -3 19 -4 43 -1 l42 4 -60 -39 c-33 -21 -76 -44 -96 -51 -19 -6 -53 -30 -75 -52 -38 -41 -38 -41 -11 -35 15 3 39 9 55 12 55 11 -5 -23 -101 -57 -131 -46 -214 -90 -272 -144 -44 -40 -46 -44 -18 -30 46 22 52 1 12 -43 -48 -51 -42 -49 -153 -63 -198 -24 -564 8 -761 67 -222 66 -216 65 -300 58 -147 -12 -313 -63 -450 -139 -87 -48 -197 -70 -278 -56 -146 25 -243 9 -372 -64 -136 -76 -217 -176 -254 -315 -23 -82 -61 -381 -61 -473 0 -96 -20 -197 -47 -240 l-25 -40 27 7 c26 7 27 6 20 -26 -4 -18 -42 -106 -86 -196 -91 -188 -113 -259 -107 -352 3 -50 10 -74 31 -105 l27 -40 1 30 c0 30 1 30 19 -10 17 -36 19 -37 20 -15 2 22 3 21 13 -10 10 -35 76 -134 83 -127 2 2 -2 21 -9 43 -8 21 -17 55 -21 74 l-6 35 30 -35 30 -35 -21 50 c-11 28 -23 73 -25 100 l-5 50 25 -50 c16 -32 25 -43 25 -30 1 11 5 26 10 34 8 13 12 13 27 1 15 -13 16 -12 9 19 l-7 33 36 -39 35 -38 -19 65 c-20 64 -20 150 0 204 6 16 8 14 15 -15 l8 -34 11 52 c14 66 31 83 23 23 -3 -25 -9 -55 -12 -65 -5 -17 -4 -17 11 2 9 13 20 23 24 23 10 0 -5 -70 -25 -117 -9 -20 -14 -38 -12 -40 4 -4 60 65 75 92 5 11 16 68 22 125 14 116 31 162 89 248 22 32 43 75 46 95 8 39 25 51 25 18 0 -11 4 -22 9 -25 5 -3 13 29 19 72 19 137 22 274 7 373 -20 130 -19 200 6 283 34 114 97 175 218 211 l24 7 -21 -30 c-36 -50 -83 -192 -89 -267 -7 -86 13 -415 33 -547 7 -54 14 -131 14 -171 0 -64 -4 -79 -32 -127 -41 -68 -96 -110 -190 -145 -82 -31 -118 -63 -118 -103 0 -39 -55 -240 -102 -372 -54 -153 -115 -269 -188 -359 -58 -70 -61 -76 -59 -123 3 -65 -9 -75 -61 -54 -57 23 -85 20 -120 -12 -58 -52 -114 -279 -77 -310 13 -11 33 -4 124 41 92 47 111 61 131 95 29 52 73 89 122 102 56 15 86 53 131 166 49 123 172 373 235 478 41 68 185 226 206 226 4 0 58 48 120 106 62 58 147 129 188 157 41 27 92 64 113 80 21 16 41 27 44 23 27 -26 7 -232 -31 -317 -14 -31 -28 -84 -32 -118 -8 -72 -23 -54 221 -261 164 -139 302 -286 362 -389 27 -45 45 -64 70 -73 39 -14 40 -17 11 -53 -16 -21 -22 -41 -21 -78 1 -45 5 -54 34 -79 43 -35 154 -94 194 -102 19 -4 37 -2 48 6 16 12 16 18 -4 103 -12 50 -37 120 -55 157 -19 37 -34 82 -34 100 0 79 -16 103 -133 207 -62 54 -135 125 -163 157 -244 282 -244 283 -156 495 33 79 70 169 81 199 33 89 61 234 61 315 0 88 3 90 90 49 126 -59 349 -131 795 -256 42 -12 118 -22 188 -25 73 -4 120 -10 123 -17 5 -14 21 -194 36 -408 19 -274 3 -320 -160 -440 -53 -39 -118 -88 -145 -107 -35 -26 -51 -46 -59 -76 -6 -22 -16 -46 -21 -53 -14 -18 -45 -15 -74 8 -35 27 -63 25 -109 -8 -50 -37 -87 -85 -119 -158 -36 -80 -31 -98 24 -102 80 -6 172 15 261 60 76 37 100 57 219 180 74 76 180 177 237 224 56 48 111 104 123 125 15 25 26 75 35 151 49 395 112 689 149 696 10 2 17 -3 17 -12 0 -8 8 -20 18 -25 9 -5 58 -41 107 -81 50 -40 110 -83 135 -97 140 -79 184 -108 276 -181 56 -44 117 -102 135 -129 75 -109 139 -301 139 -417 0 -76 19 -166 41 -194 23 -29 25 -75 5 -92 -8 -6 -20 -36 -27 -66 -14 -63 -7 -84 51 -141 62 -62 195 -117 228 -95 19 13 -13 182 -46 245 -20 39 -26 71 -33 160 -6 89 -15 133 -43 216 -20 57 -54 186 -76 285 -22 100 -43 191 -45 204 -3 12 -34 52 -68 90 -58 61 -347 477 -347 498 0 5 37 74 81 154 79 141 81 147 80 211 0 36 -7 96 -15 133 -24 101 -21 123 38 278 30 79 91 252 137 386 76 226 84 243 103 238 65 -19 127 -26 176 -21 41 5 84 -1 170 -21 107 -25 117 -29 148 -65 53 -62 60 -63 145 -29 42 17 80 30 86 30 6 0 11 7 11 15 0 8 6 15 14 15 26 0 39 56 32 131 -10 97 -18 115 -68 140 -24 12 -57 32 -74 45 -17 13 -34 22 -37 19 -4 -3 -5 -2 -2 2 6 8 -65 83 -78 83 -5 0 -3 -8 4 -17 7 -10 1 -7 -13 6 -15 13 -25 27 -23 31 2 4 -17 27 -43 51 -26 24 -36 31 -22 14 l25 -30 -27 24 c-15 13 -24 29 -21 37 9 23 -16 70 -43 83 -35 15 -41 14 -18 -5 18 -14 18 -15 -4 -4 -13 7 -21 14 -18 17 7 8 -13 33 -26 33 -6 0 -4 -8 3 -17 13 -16 12 -17 -3 -5 -10 8 -16 19 -15 24 1 6 -4 13 -12 16 -9 3 -11 0 -6 -9 5 -8 4 -11 -1 -6 -5 5 -9 12 -9 15 0 13 -16 32 -27 32 -6 0 -5 -7 3 -17 11 -16 11 -16 -1 -5 -8 7 -15 18 -15 24 0 6 -6 13 -14 16 -9 3 -11 0 -6 -8 5 -9 4 -11 -4 -6 -6 4 -9 11 -6 16 3 5 -2 14 -12 19 -47 27 -47 27 -24 60 12 17 20 35 16 40 -3 5 0 13 6 17 8 5 9 3 4 -6 -6 -9 -4 -11 4 -6 7 5 10 15 7 23 -3 8 -2 11 4 8 14 -8 30 29 30 69 0 48 -14 46 -79 -9 -66 -56 -83 -59 -70 -10 6 20 9 50 7 68 -2 26 -8 32 -28 35 -20 2 -34 -10 -75 -64z m27 -6 c-27 -35 -56 -76 -65 -93 l-16 -30 3 28 c2 16 7 32 13 35 5 4 29 33 52 65 24 31 48 57 53 57 5 0 -13 -28 -40 -62z m208 8 c0 -3 -13 -20 -30 -38 -16 -18 -30 -29 -30 -24 0 5 -8 2 -17 -5 -10 -7 0 6 22 29 34 37 55 51 55 38z m-120 -91 c-18 -10 -20 -14 -8 -15 9 0 19 -4 22 -8 3 -5 -8 -6 -25 -4 -35 5 -37 15 -6 30 33 16 46 14 17 -3z m56 -25 c-1 -21 -6 -43 -11 -47 -4 -4 -5 0 -2 10 4 9 2 17 -2 17 -5 0 -4 14 2 30 6 17 12 30 13 30 1 0 1 -18 0 -40z m-298 -75 c-16 -30 -32 -55 -34 -55 -5 0 34 80 48 98 20 24 16 11 -14 -43z m79 13 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-17 -70 c-12 -10 -27 -18 -34 -18 -6 1 1 8 17 16 15 8 27 22 28 32 0 13 2 14 6 3 3 -8 -4 -23 -17 -33z m260 6 c0 -3 -5 -2 -11 2 -6 3 -15 0 -20 -7 -6 -10 -9 -8 -9 9 0 20 3 21 20 12 11 -6 20 -13 20 -16z m-378 -37 c-12 -13 -20 -26 -17 -29 3 -2 -7 -15 -22 -29 -25 -22 -26 -22 -9 -1 11 12 15 22 11 22 -5 0 4 14 20 30 16 17 31 30 34 30 2 0 -5 -10 -17 -23z m-62 -50 c0 -2 -12 -14 -27 -28 l-28 -24 24 28 c23 25 31 32 31 24z m70 -22 c0 -2 -14 -12 -31 -21 -17 -8 -28 -11 -24 -4 4 6 17 15 29 20 27 11 26 11 26 5z m207 -52 c-5 -29 -27 -63 -40 -62 -9 0 -9 2 1 6 6 2 12 11 12 19 0 8 5 14 10 14 6 0 9 3 9 8 -2 14 1 32 6 32 3 0 4 -8 2 -17z m44 -11 c-5 -10 -18 -25 -27 -33 -11 -9 -9 -2 6 19 26 35 36 42 21 14z m-401 -5 c0 -2 -15 -16 -32 -33 l-33 -29 29 33 c28 30 36 37 36 29z m523 -4 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0 19 -2 13 -5z m-428 -22 c3 -5 2 -12 -3 -15 -5 -3 -9 1 -9 9 0 17 3 19 12 6z m370 -21 c-3 -5 -12 -10 -18 -10 -7 0 -6 4 3 10 19 12 23 12 15 0z m-608 -102 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z"/> </g> </svg>
Resultado:
Ahora que ya sabemos bastante sobre el manejo de SVG, podemos conocer el elemento CANVAS de HTML5, en el siguiente capítulo.