{"id":5067,"date":"2016-05-03T13:21:54","date_gmt":"2016-05-03T12:21:54","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5067"},"modified":"2016-05-03T13:23:40","modified_gmt":"2016-05-03T12:23:40","slug":"para-que-sirve-la-etiqueta-svg-en-html5","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/05\/para-que-sirve-la-etiqueta-svg-en-html5\/","title":{"rendered":"Para que sirve la etiqueta svg en HTML5?"},"content":{"rendered":"

Hola a todos y saludos desde el \u00e1rea Web de la Escola Espai<\/a>. En\u00a0el \u00faltimo art\u00edculo sobre HTML5, vimos para que serv\u00eda la etiqueta canvas<\/a>. Como el art\u00edculo despert\u00f3 bastante inter\u00e9s, hoy os traemos otro art\u00edculo sobre otro elemento HTML5 muy \u00fatil, aunque sensiblemente m\u00e1s complejo; el elemento svg<\/strong>.<\/p>\n

Gr\u00e1ficos vectoriales<\/h2>\n

Generalizando bastante, se puede decir que la etiqueta svg nos va a permitir trabajar con gr\u00e1ficos vectoriales<\/strong>. \u00bfQue son los gr\u00e1ficos vectoriales?, os preguntareis. Para saberlo lo mejor es conocer que son los gr\u00e1ficos no<\/strong> vectoriales, tambi\u00e9n llamados mapas de bits<\/strong>, que son los que usa el elemento canvas de HTML5.<\/p>\n

Los mapas de bits son, simplificando mucho, una especie de \u00abtabla\u00bb (o matriz) de puntos. Cada punto es conocido como pixel<\/strong> (seguro que os suena), y el tama\u00f1o de dicha tabla es conocido como la resoluci\u00f3n de la imagen<\/strong>. As\u00ed, si tenemos una \u00abtabla\u00bb\u00a0con 4000 columnas de puntos dispuestas en 3000 filas de puntos, tenemos en total 12 millones de puntos (4000 por 3000). O dicho en otras palabras, tenemos una imagen de 4000 x 3000 pixels de resoluci\u00f3n, es decir, una imagen de 12 megapixels.<\/p>\n

Sin embargo, en el caso de los gr\u00e1ficos vectoriales, la informaci\u00f3n no se almacena como \u00abtablas de puntos\u00bb (matrices de pixels). Lo que se almacena, simplificando de nuevo, son las instrucciones para dibujar la imagen. Ahora bien, nada nos impide usar mapas de bits dentro de un gr\u00e1fico vectorial<\/strong> (lo contrario no es posible), aunque esto no nos permitir\u00e1 superar todas las limitaciones de un mapa de bits.<\/p>\n

Virtudes y defectos<\/h2>\n

La principal ventaja de\u00a0los gr\u00e1ficos vectoriales es que son independientes de la resoluci\u00f3n<\/strong>. Como vamos a tener que pintarlos en una pantalla (que es una matriz de puntos), al final vamos a tener que indicar con que resoluci\u00f3n vamos a querer pintar dicha imagen, pero, a diferencia de los mapas de bits, por mucho que hagamos grande una imagen vectorial, nunca perder\u00e1 calidad (los p\u00edxeles no ser ir\u00e1n viendo cada vez m\u00e1s grandes, tal y como sucede con los mapas de bits.<\/p>\n

\"Gr\u00e1ficos

Gr\u00e1ficos de mapa de bits vs gr\u00e1ficos vectoriales.<\/p><\/div>\n

Una\u00a0virtud muy importante en el universo web, es que los buscadores pueden inspeccionar su contenido<\/strong>, de forma que si la imagen tiene texto, este puede ser indexado por los buscadores<\/a>.<\/p>\n

M\u00e1s virtudes<\/strong> incluyen;<\/p>\n