# SVG

## Páginas web con SVG

SVG es un lenguaje de marcas para gráficos vectoriales creado por el W3C y que poco a poco se está imponiendo frente a otros formatos propietarios. Numerosos programas de edición de gráficos son capaces de importar y exportar en formato SVG, aunque su uso todavía no está extenido en la Web, entre otros motivos porque las implementaciones de las recomendaciones todavía son incompletas.

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.

| <object data="ejemplo.svg" type="image/svg+xml" height="80" width="80"> </object> |
| <object data="ejemplo.svg" type="image/svg+xml" height="160" width="160"> </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 página:

- Estrella

Volver al índice

## SVG en Internet Explorer

Internet Explorer no es capaz de mostrar directamente páginas con elementos SVG, pero existen plug-in gratuitos para conseguirlo, por ejemplo el SVGViewer de Adobe. La versión estable de este plug-in es la versión 3.0, pero esta versión sólo funciona en Internet Explorer, no en Firefox. Así que es mejor instalar la versión 6.0 beta, que funciona tanto en Internet Explorer como en Firefox. 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.

En septiembre de 2006, Adobe anunció que dejaba de desarrollar el plug-in SVG Viewer a partir del 1 de enero de 2007. Posteriormente, anunció que lo haría a partir del 1 de enero de 2008. Esta es una muy mala noticia, porque el plug-in de Adobe es el más utilizado por los usuarios de Internet Explorer y parece ser que el plug-in no funciona correctamente en Windows Vista.

Posiblemente, Adobe pretende promover el uso de Adobe Flex en vez de SVG. Una vez más, una empresa ha dejado de apoyar un formato abierto en favor de un formato propietario. La experiencia indica que estos movimientos sólo dan resultado cuando la empresa domina abrumadoramente un mercado.

Volver al índice

## SVG en Firefox

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 Forefox (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 índice

## SVG en Amaya (como objeto externo)

Para incluir una imagen SVG en Amaya, hay que crear un elemento object mediante el menú XHTML > Objeto > Objeto (object) o mediante el botón Objeto de la ventana de herramientas , que muestra la siguiente caja de diálogo:

En esta caja de diálogo debe elegirse el archivo que se quiere insertar, seleccionar el tipo MIME image/svg+xml y escribir un texto alternativo.

En la ventana de diálogo de creación de la etiqueta object, Amaya 9.3 no muestra el tipo MIME image/svg+xml, por lo que este atributo debe añadirse en la vista de código fuente (si no se utiliza este tipo, Internet Explorer no muestra la imagen). También deben definirse los atributos height y width para definir el tamaño de la imagen (si no se define el tamaño, Firefox 1.5 no muestra la imagen).

| <object data="ejemplo.svg" type="image/svg+xml" "> </object> |

Una vez insertada la etiqueta object, pueden definirse los atributos height y width para definir el tamaño de la imagen.

Volver al índice

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

Volver al índice