# SVG

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:

- como objeto externo.
- como objeto interno.

## 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

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

    <object
      data="ejemplo.svg"
      type="image/svg+xml"
      height="80"
      width="80">
    </object>
    <object
      data="ejemplo.svg"
      type="image/svg+xml"
      height="200"
      width="200">
    </object>
    <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.

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.

| La siguiente página muestra un ejemplo de SVG incluido en una página: Estrella

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 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 antriores 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.

### 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:

- La versión estable, SVGViewer 3.03 [2,28 MB], publicada en abril de 2005, y que sólo funciona en Internet Explorer, no en Firefox.
- La versión beta, SVGViewer 6.0 preview 1 [2,85 MB], publicada en julio de 2003, y que funciona tanto en Internet Explorer como en Firefox.

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

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).

### Otros plug-ins

Existen otros plug-ins de SVG para Internet Explorer

- Ssrc SVG de Savarese Software Research, 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.

- SVG Map ToolKit, de SVG MAP.

  No he probado este plug-in.

Volver al principio de la página

## Para saber más

- Sobre SVG en general: grupo de trabajo SVG en el W3C, SVG Wiki
- Sobre SVG en Firefox: Proyecto SVG de Firefox
- Soporte de SVG en diferentes navegadores y plug-ins: codedread de Jeff Schiller
- Editor svg-edit que funciona en el navegador. Página de demostración de svg-edit.

Volver al principio de la página

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