SVGSVGSVG (Scalable Vector Graphics = Gráficos Vectoriales Escalables) es un lenguaje de marcas dirigido a la representación de gráficos vectoriales (dibujos y texto)
Las últimas versiones publicadas de SVG son Mobile SVG Profiles (2003, que define SVG Tiny, para teléfonos móviles, y SVG Basic, para PDAs), SVG Tiny 1.2 (2008) y SVG 1.1 (2º edición) (2011). Véase la lección sobre Historia de la Web para más detalles.
SVG se está imponiendo poco a poco como formato estándar de gráficos vectoriales frente a otros formatos propietarios y numerosos programas de edición de gráficos son capaces de importar y exportar en formato SVG.
Firefox (a partir de la versión Firefox 1.5), Internet Explorer 9 y Chrome son capaces de mostrar gráficos SVG sin necesidad de ningún plug-in.
Desgraciadamente su uso todavía no está extendido en la Web, entre otros motivos porque las implementaciones de las recomendaciones todavía son incompletas, pero sobre todo porque Internet Explorer (antes de IE 9) necesitaba plug-ins para mostrar elementos SVG.
Sin duda, a medida que dejen de usarse Internet Explorer 8 y anteriores, se extenderá el uso de SVG.
En codedread Jeff Schiller mantiene una tabla comparativa del soporte de SVG en diferentes navegadores y plug-ins.
Un gráfico SVG puede incluirse en una página web de dos maneras:
En este caso, el gráfico se encuentra en un archivo de extensión svg y la página web contiene una etiqueta <object> que hace referencia al archivo svg. La página web puede ser del tipo XHTML 1.0, 1.1, etc. y se puede servir con el tipo MIME text/html (es decir, como una página cualquiera)
En principio, es suficiente con que la etiqueta <object> tenga los atributos data, que incluye el camino hasta el archivo SVG y type con el valor image/svg+xml
    |
<object data="ejemplo.svg" type="image/svg+xml"> |
Nota: Internet Explorer 9 es capaz de mostrar gráficos SVG como objetos externos, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre IE9 e IE8.
Mediante los atributo height y width se puede dar tamaño a la imagen.
| |
<object data="ejemplo.svg" type="image/svg+xml" |
|
| |
<object data="ejemplo.svg" type="image/svg+xml" |
|
| |
<object data="ejemplo.svg" type="image/svg+xml" |
Nota: En Internet Explorer 8 o anteriores con plug-ins instalados los atributos height y width establecen el tamaño del área visible, sin cambiar el tamaño de la imagen.
Volver al principio de la página
En este caso las etiquetas svg se encuentran en la página web misma. Una página web que contiene elementos elementos SVG es un documento compuesto que contiene tanto elementos XHTML como SVG. El tipo del documento tiene que ser por tanto XHTML 1.1 + MathML 2.0 + SVG 1.1 y se debe servir al navegador con el tipo MIME application/xhtml+xml.
Normalmente los servidores sirven los documentos que tienen la extensión .html con el tipo MIME text/html y los documentos que tienen la extensión .xhtml con el tipo MIME application/xhtml+xml, por lo que conviene guardar los documentos que incluyan elementos SVG con la extensión .xhtml.
| |
La siguiente página muestra un ejemplo de SVG incluido en una página: |
Nota: Internet Explorer 9 es capaz de mostrar gráficos SVG como objetos internos, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre IE9 e IE8.
Consultar esta página sobre inline SVG.
Volver al principio de la página
En el pasado, Microsoft boicoteó el formato SVG haciendo que Internet Explorer no mostrara directamente páginas con elementos SVG. Pero la situación cambió en 2010: en enero de 2010 Microsoft anunció que iba a formar parte del grupo de trabajo SVG del W3C y en marzo de 2010 Microsoft anunció que Internet Explorer 9 mostraría directamente SVG, como así fue finalmente.
Para conseguir que Internet Explorer 8 y anteriores muestre páginas con elementos SVG no queda más remedio que instalar algún plug-in, por ejemplo el SVGViewer de Adobe, SVG Web de Google y otros.
Nota: En Firefox también se puede utilizar la versión 6.0 beta del SVGViewer de Adobe (la versión 3.0 no funciona), como se comenta en la página de diferencias entre versiones de Firefox.
En un primer momento, Adobe apoyó el formato SVG creando SVGViewer, un plug-in para Internet Explorer. De este plug-in existen dos versiones:
Si se quiere utilizar el SVGViewer en Firefox se debe instalar la versión 6.0. Una vez instalado el plug-in, la primera vez que Internet Explorer cargue una página que contenga una imagen SVG, se mostrará una ventana de aceptación de la licencia.
Desgraciadamente, en septiembre de 2006 Adobe anunció que dejaría de desarrollar y mantener el plug-in SVGViewer a partir del 1 de enero de 2007. Posteriormente, anunció que lo haría a partir del 1 de enero de 2008 y finalmente anunció que lo haría a partir del 1 de enero de 2009. Esta fue una muy mala noticia, porque el plug-in de Adobe era el más utilizado por los usuarios de Internet Explorer y parece ser que el plug-in no funcionaba correctamente en Windows Vista y Windows 7, ya que al menos no funcionan ni el comando Ver código fuente ni el audio.
Posiblemente esta decisión de Adobe se debió a que Adobe pretendía promover el uso de su producto Adobe Flex en vez de SVG. Como ha ocurrido tantas veces, las empresas prefieren apoyar sus formatos propietarios frente a los formatos abiertos. La experiencia indica que estos movimientos sólo dan resultado cuando la empresa domina abrumadoramente un mercado, lo que por suerte cada vez es más difícil que ocurra. En cualquier caso, la decisión de Adobe retrasó la expansión de SVG como formato universal de gráficos vectoriales.
SVG Web de Google no es un plug-in, sino una biblioteca JavaScript. El proyecto empezó a publicarse en julio de 2009 y actualmente (enero de 2012) sigue en desarrollo. En el futuro, se espera que esta biblioteca permita que Internet Explorer muestre elementos SVG, animaciones SMIL y elementos de HTML 5.
Por probar y completar (con alguna página de ejemplo).
Existen otros plug-ins de SVG para Internet Explorer
El plug-in Ssrc SVG de Savarese Software Research, para Internet Explorer está basado en Gecko (el motor de Firefox). Se supone que con este plug-in se deberían ver los elementos SVG en Internet Explorer como en Firefox, pero cuando lo probé en 2010 no conseguí hacerlo funcionar correctamente, puesto que para que se vieran los elementos había que escribir las etiquetas de una manera que no funcionaban en Firefox.
No he probado este plug-in.
Volver al principio de la página
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.
