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)
Se han publicado varias versiones de SVG: SVG 1.0 (2001), SVG 1.1 (2003), Mobile SVG Profiles (2003, que define SVG Tiny, para teléfonos móviles, y SVG Basic, para PDAs) y SVG Tiny 1.2 (2008). Actualmente (diciembre de 2010), el W3C está preparando las recomendaciones SVG 1.2 Full, SVG Print 1.2 (que tendrá varias partes, Requisitos, Introducción y Lenguaje) y SVG Color 1.2 (partes Introducción y Lenguaje). Véase la lección sobre Historia de la Web para más detalles.
SVG se está imponiendo poco a poco frente a otros formatos propietarios y numerosos programas de edición de gráficos son capaces de importar y exportar en formato SVG. Pero desgraciadamente su uso todavía no está extendido en la Web, entre otros motivos porque las implementaciones de las recomendaciones todavía son incompletas (y sobre todo, porque Internet Explorer necesita plug-ins para mostrar elementos 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"> |
Mediante los atributo height y width se puede dar tamaño a la imagen.
Nota: En Firefox los atributos height y width establecen el tamaño de la imagen, pero en Google Chrome o Internet Explorer con plug-ins instalados los atributos height y width establecen el tamaño del área visible, sin cambiar el tamaño de 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" |
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:
Consultar esta página sobre inline SVG.
Volver al principio de la página
En el pasado, Microsoft ha boicoteado siempre el formato SVG haciendo que Internet Explorer no pueda mostrar directamente páginas con elementos SVG. Pero la situación está cambiando a partir de 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.
Mientras tanto, para conseguir que Internet Explorer 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.
En un primer momento, Adobe apoyó el formato SVG creando SVGViewer, un plug-in para Internet Explorer. De este plug-in existen dos versiones actualmente (enero de 2010):
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. Los programas que ya no se mantienen acaban siendo inutilizables (actualmente -enero de 2010- parece ser que el plug-in no funcionaba correctamente en Windows Vista, ya que al menos no funcionan ni el comando Ver código fuente ni el audio, y no sé cuál será la compatibilidad con Windows 7 pues la página de Windows 7 Compatibility Center no proporciona información).
Posiblemente esta decisión de Adobe se debe a que Adobe pretende 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 dificultará 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 (diciembre de 2010) se encuentra 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 yo no lo he conseguido. Para que se vean los elementos hay que escribir las etiquetas de una manera que no funcionan en Firefox.
Este plug-in funciona correctamente.
No he probado este plug-in.
Volver al principio de la página
Firefox (a partir de la versión Firefox 1.5) es capaz de mostrar gráficos SVG sin necesidad de ningún plug-in, aunque también puede utilizarse la versión 6.0 beta del SVGViewer de Adobe (la versión 3.0 no funciona).
Una vez instalado el plug-in SVGViewer 6.0 beta, hay que copiar los archivos NPSVG6.DLL y NPSVG6.ZIP que se encuentran en la carpeta de instalación del plug-in (normalmente C:\Archivos de programa\Archivos comunes\Adobe\SVG Viewer 6.0\Plugins en la carpeta de plug-ins de Firefox (normalmente C:\Archivos de programa\Mozilla Firefox\plugins).
Al reiniciar Firefox, se puede comprobar que ha reconocido el plug-in, escribiendo en la barra de dirección about:plugins. En la lista debería aparecer el siguiente plug-in:
Para desactivar el soporte nativo de SVG y obligar a Firefox a utilizar el plug-in de Adobe, hay que escribir en la barra de dirección about:config y svg en el filtro, como muestra la imagen siguiente:
A continuación, hay que hacer clic derecho sobre la preferencia svg.enabled y elegir Modificar en el menú contextual, como muestra la imagen siguiente:
El valor de la preferencia svg.enabled se habrá modificado automáticamente, como muestra la imagen siguiente:
Al reiniciar Firefox, se utilizará el plug-in instalado. Para volver al soporte nativo, habría que volver a realizar el cambio de la misma manera.
Volver al principio de la página
Google Chrome muestra los elementos SVG, puesto que WebKit (el motor de Google Chrome o de Safari) lo hace.
Volver al principio de la página
Volver al principio de la página
Autor: Bartolomé Sintes Marco
