Volver al índiceSVG

SVG (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.


Páginas web con SVG

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:

SVG como objeto externo

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

Correcto en FirefoxCorrecto en IE9 Incorrecto en IE8Correcto en Chrome
<object 
  data="ejemplo.svg" 
  type="image/svg+xml">
</object>

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.

Correcto en FirefoxCorrecto en IE9 Incorrecto en IE8Correcto en Chrome
<object
  data="ejemplo.svg" 
  type="image/svg+xml" 
  height="80" width="80">
</object>
Correcto en FirefoxCorrecto en IE9 Incorrecto en IE8Correcto en Chrome
<object 
  data="ejemplo.svg" 
  type="image/svg+xml" 
  height="200" width="200">
</object>
Correcto en FirefoxCorrecto en IE9 Incorrecto en IE8Correcto en Chrome
<object 
  data="ejemplo.svg" 
  type="image/svg+xml" 
  style="width: 200px; height: 200px; border: black 1px solid;">
</object>

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, como se comenta en la página de diferencias entre IE9 e IE8.

Volver al principio de la página


SVG como objeto interno

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.

Correcto en FirefoxCorrecto en IE9 Incorrecto en IE8Correcto en Chrome 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


SVG en Internet Explorer 8 y anteriores

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 enero de 2010 cuando 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, aunque no es necesario.

SVGViewer de Adobe, para Internet Explorer

En un primer momento, Adobe apoyó el formato SVG creando SVGViewer, un plug-in para Internet Explorer. De este plug-in existen dos versiones:

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. En noviembre de 2011 abandoó el desarrollo de Adobe Flex y donó el código a la fundación Apache, que continua su desarrollo bajo el nombre de Apache Flex (más información en la wikipedia)

SVG Web de Google

SVG Web de Google no es un plug-in, sino una biblioteca JavaScript. El proyecto empezó a publicarse en julio de 2009 y el objetivo de esta biblioteca era poder elementos SVG, animaciones SMIL y elementos de HTML 5 en Internet Explorer. Actualmente (octubre de 2013) el proyecto parece abandonado y la última versión publicada es de febrero de 2011.

Por probar y completar (con alguna página de ejemplo).

Otros plug-ins

Existen otros plug-ins de SVG para Internet Explorer

Volver al principio de la página


Para saber más

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
Autor: Bartolomé Sintes Marco
Última modificación: 6 de febrero de 2014

Creative Commons License
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.