SVGSVGSVG 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:
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> |
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.
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 dejaría de desarrollar y mantener 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 y actualmente (noviembre de 2007), dice que lo hará a partir del 1 de enero de 2009. 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 (al menos no funcionan ni el comando Ver código fuente ni el audio).
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 empresa 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.
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 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.
Para incluir una imagen SVG en Amaya, hay que crear un elemento object mediante el menú 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.
|
<object type="image/svg+xml"
data="ejemplo.svg"> </object> |
Una vez insertado el objeto, conviene definir los atributos height y width para definir el tamaño de la imagen (en algunos casos y por motivos que desconozco, Firefox no muestra la imagen si no tiene definido el tamaño).
|
<object type="image/svg+xml"
data="ejemplo.svg" height="121px" width="134px"> </object> |
Amaya no es capaz de insertar cualquier archivo SVG. En el caso de archivos SVG creados con Inkscape, hay que tener la precaución de guardar los archivos en formato "SVG plano" en vez de en el formato "SVG de Inkscape". Antes de guardar el archivo SVG, también conviene haber ajustado en Inkscape el tamaño de página al dibujo mediante el menú "Archivo > Propiedades del documento > Página > Ajustar la página a la selección".
