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

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.

## Páginas web con SVG

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:

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

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

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

Consultar esta página sobre inline SVG.

Volver al principio de la página

## SVG en Internet Explorer

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.

### 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 actualmente (enero de 2010):

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

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

### 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 yo no lo he conseguido. Para que se vean los elementos hay que escribir las etiquetas de una manera que no funcionan en Firefox.

- Renesis Player, de Examotion

  Este plug-in funciona correctamente.

- SVG Map ToolKit, de SVG MAP.

  No he probado este plug-in.

Volver al principio de la página

## SVG en Firefox

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

### Instalación del plug-in de Adobe

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

## SVG en Google Chrome

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

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