El termino SVG proviene del ingl\u00e9s Scalable Vector Graphics los cuales no son m\u00e1s que Gr\u00e1ficos Vectoriales Redimensionables, los SVG describen las im\u00e1genes como formas, trazados, texto y efectos de filtro. Los archivos resultantes son compactos y ofrecen gr\u00e1ficos de alta calidad tanto en Internet, en impresoras e incluso en dispositivos port\u00e1tiles y con recursos limitados.<\/p>\n
Una de las grandes ventajas que tiene el formato SVG es que est\u00e1 totalmente basado en XML y se puede comprimir f\u00e1cilmente en las transmisiones. Los archivos SVG se pueden usar de varias formas: como si fuese un elemento m\u00e1s en la p\u00e1gina HTML (copiando tal cual el SVG), a\u00f1adiendo un objeto SVG y a\u00f1adiendo una imagen con formato SVG adem\u00e1s con el formato SVG, se puede utilizar XML y JavaScript para crear gr\u00e1ficos web que respondan a las acciones del usuario con efectos sofisticados, como el resaltado, la informaci\u00f3n de herramientas, el audio y las animaciones.<\/p>\n
Con una imagen SVG los usuarios pueden aumentar la vista en la pantalla sin tener que sacrificar el enfoque, el detalle o la claridad. Adem\u00e1s, el formato SVG ofrece mejor compatibilidad con texto y colores, lo que garantiza que los usuarios vean las im\u00e1genes tal y como aparecen en la mesa de trabajo de Illustrator.<\/p>\n
En septiembre de 2001 W3C \u00a0da la recomendaci\u00f3n sobre el formato SVG, actualmente el formato SVG ha sido incluido de forma nativa en el navegador web del W3C Amaya. Las versiones 1.5 y posteriores de Mozilla Firefox soportan gr\u00e1ficos hechos con SVG, as\u00ed como el navegador Opera que desde su versi\u00f3n 8 ha implementado SVG 1.1 Tiny en su n\u00facleo.<\/p>\n
Adem\u00e1s los Navegadores como Google Chrome, Safari e Internet Explorer 9 tambi\u00e9n son capaces de mostrar im\u00e1genes en formato SVG sin necesidad de complementos externos. Otros navegadores web, como versiones anteriores a la 9 de Internet Explorer, necesitan un conector o plug-in para poder mostrar los archivos SVG.<\/p>\n
La gran diferencia entre las im\u00e1genes vectoriales SVG y las im\u00e1genes de mapa de bits (como .jpg, .png o .gif) es que las SVG almacenan l\u00edneas, curvas, degradados y el resto de informaci\u00f3n necesaria para crear la imagen y el propio programa que lo visualiza es el que crea la informaci\u00f3n de cada p\u00edxel mientras que las im\u00e1genes de mapa de bits (como .jpg, .png o .gif) almacenan la informaci\u00f3n de todos sus p\u00edxeles.<\/p>\n
Esta caracter\u00edstica hace que los vectores SVG\u00a0 sean perfectos para el Responsive Design, ya que se puede redimensionar los iconos o im\u00e1genes sin perder calidad.<\/p>\n
Como ya he comentado, hay distintas formas de usar las im\u00e1genes SVG, pero la m\u00e1s simple es la de usar un archivo SVG como si de una imagen cualquiera se tratase.<\/p>\n
<!– Como imagen normal –>
\n
\n<img src=\u00bbcopa.svg\u00bb>
\n
\n<!– Como objeto externo –>
\n
\n<object data=\u00bbcopa.svg\u00bb type=\u00bbimage\/svg+xml\u00bb>
\n
\n<!– Te permite mostrar un sustituto si no tiene soporte o no encuentra el archivo –><\/p>\n
SVG no soportado.<\/p>\n
<\/object>
\n
\n<!– A\u00f1adir en l\u00ednea el SVG –>
\n
\n<svg version=\u00bb1.1″ xmlns=\u00bbhttp:\/\/www.w3.org\/2000\/svg\u00bb>
\n
\n<path d=\u00bb[…]\u00bb\/>
\n
\n<\/svg><\/p>\n
Los archivos SVG tambi\u00e9n se pueden usar como im\u00e1genes de fondo a trav\u00e9s de CSS, igual que hacemos con otra imagen, lo que nos puede ayudar a reducir el tama\u00f1o de los archivos que recibe nuestra p\u00e1gina para funcionar y as\u00ed evitamos usar grandes im\u00e1genes de fondo que son muy pesadas y vuelven lenta nuestra p\u00e1gina.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00bfQu\u00e9 es SVG? El termino SVG proviene del ingl\u00e9s Scalable Vector Graphics los cuales no son m\u00e1s que Gr\u00e1ficos Vectoriales Redimensionables, los SVG","protected":false},"author":1,"featured_media":2167,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,75],"tags":[],"class_list":["post-1998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-diseno"],"yoast_head":"\n