Animaciones SVG, Trazos y Canvas en html5

Anterior
Avanzar

En esta lección conoceremos las etiquetas <animate> para crear animaciones de elementos SVG, por otro lado conoceremos la etiqueta <path> que sirve para realizar trazos en HTML5 y finalmente también conoceremos la etiqueta <canvas> y cómo funciona.

Animaciones SVG

Podemos crear animaciones de elementos SVG en HTML5, las animaciones se ejecutan en un tiempo y pueden cambiar alguna propiedad del elemento en cuestión.

Etiqueta <animate> HTML5

La etiqueta <animate> contiene la animación propiamente dicha, mediante atributos podemos establecer las características de la animación. Por otro lado la etiqueta <animate> irá dentro del elemento SVG que deseamos animar.

Por ejemplo, si deseamos poner animación a un elemento SVG de rectángulo, entonces la etiqueta <animate> irá de la siguiente manera:

<svg>
<rect>
   <animate /> 
</rect>
</svg>

Atributos para <animate>

  • atributeName.- sirve para establecer el atributo o característica del elemento, que queremos animar. puede ser la posición en X o Y, o quiza el color, etc.
  • from.- permite indicar el punto, estado o valor inicial la animación.
  • to.- nos permite indicar el valor o estado final de la animación.
  • fill.- nos permite establecer lo que ocurre después de terminar la animación; el valor remove, remueve la animación, y freeze mantiene el estado final.
  • repeatCount.- para indicar la cantidad de veces que se repite la animación, el valor puede ser un numero entero o si prefieres puedes poner el valor undefined para que sea indefinido.

Ejemplos de animación SVG

Ejemplo 1.- Nuestro primer ejemplo consiste en hacer que un circulo SVG cambie de posición en dirección Horizontal (X) desde el extremo 0 hasta 400px en sentido horizontal.

<svg width="1000" height="250">
   <circle cx="120" cy="150" r="80" fill="red">
   <animate attributeName="cx" from="0" to="300"
      dur="4s" fill="freeze" repeatCount="3"/> 
  </circle>
</svg>

Nuestra animación indica de que el atributo a animar o modificar es el CX o el centro en X, desde la posición 0 hasta la posición 300 en X, la duración es de 4 segundos y debe repetirse 3 veces y mediante la propiedad fill dentro de <animate> estamos indicando que al final de todo, se quede en posición final de la animación.

Ejemplo 2.- en este ejemplo haremos que el color de relleno de un rectángulo cambie desde un rojo (from="red") a un azul, en un tiempo de 5 segundos (dur="5s") y que se repita 4 veces (repeatCount="4").

<svg width="400" height="250">
<rect width="150" height="150" fill="green">
   <animate attributeName="fill" from="red" to="blue"
      dur="5s" fill="remove" repeatCount="4"/> 
</rect>
</svg>

En este caso removeremos la animación (fill="remove") cuando haya terminado, de tal manera que al final, nuestro rectángulo quede con su color original, en este caso el verde (green).

Trazos en html5

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> HTML5

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 <path> 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 <path> 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 naranja 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 <g> 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:

Te recomendamos leer:  Introducción a curso HTML5

Ejemplo 3.– este ejemplo se trata de una figura de caballo, esta hecha en SVG con trazos <path> y al igual que en el ejemplo anterior hemos utilizado la etiqueta <g> 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:

Te recomendamos leer:  SVG EN HTML5

Ahora que ya sabemos bastante sobre el manejo de SVG, pasemos a conocer el elemento CANVAS de HTML5, un elemento que se parece a SVG pero que trabaja de manera muy diferente.

Canvas en HTML5

Ahora tenemos la etiqueta <canvas> para dibujar gráficos, en este caso <canvas> solo crea un lienzo para dibujar dentro de ella de manera similar que <svg>, sin embargo la diferencia está en que ahora el dibujo lo haremos mediante un un Script, para ello podemos utilizar un lenguaje de programación como Javascript.

Etiqueta <canvas>

La etiqueta <canvas> puede ser usado como cualquier otro elemento de HTML, creará un linezo en blanco para poder dibujar con un script.

La esquina superior derecha del lienzo es el punto origen (0,0), al igual que en SVG, podemos establecer el alto y ancho mediante los atributos que ya conocemos (width y height).

Ejemplo de canvas HTML5

Para que no te quedes con la curiosidad, aquí tienes un pequeño y simple ejemplo de código Javascript, dibujando un rectángulo sobre Canvas.

<!DOCTYPE HTML>
<html>
    <head></head>
 <body>
   <canvas id="micanvas" width="400" height="300">
</canvas> 
<script>
var canvas=document.getElementById("micanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle ="red";
ctx.fillRect (50, 50, 200, 100);
</script>
   

    
</body>
</html>

El script indica que se dibujará un rectángulo en el punto (50,50) con un ancho de 200 y altura de 100, el color de relleno sera rojo y el dibujo es en 2d.

Observa que el la etiqueta <canvas> llama mediante el atributo id="micanvas" al dibujo que será mostrado en dicho lienzo. Por otro lado el dibujo en Javascript esta identificado con el mismo id.

En canvas se pueden crear gráficos desde simple lineas hasta complejas imágenes, darles animación y más. El punto es tener cocimientos, al menos básicos de Javascript para poder dibujar sobre Canvas.

Te recomendamos leer:  Declaración de documento HTML5
Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
2 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
José Canal
José Canal
2 meses atrás

Una preguntilla.
Le has dedicado varias lecciones a las imágenes svg y sigo sin entender exactamente ¿Para que sirve saber dibujar en una imagen svg?

¿Normalmente se usa en las páginas web?

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5