Volver al índiceSVG


Páginas web con 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 de SVG publicadas actualmente (octubre de 2014) son:

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.

Un gráfico SVG puede incluirse en una página web de dos maneras, como objeto externo o como objeto interno. Firefox (a partir de la versión Firefox 1.5), Internet Explorer (a partir de la versión Internet Explorer 9) y Chrome son capaces de mostrar gráficos SVG.

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 deje de usarse Internet Explorer 8, el uso de SVG se generalizará.

Notas:

Volver al principio de la página


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


Para saber más

Volver al principio de la página

Última modificación de esta página: 9 de octubre de 2014

Licencia de Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).