SVG (Scalable Vector Graphics)
Es el lenguaje para describir imágenes vectoriales de dos dimensiones en XML. está pensado para la Web y es una recomendación del W3C y se integra en el DOM .
Ventajas SVG
Ventajas del uso de SVG sobre otros formatos de imagen es que se pueden crear y editar con un editor gráfico como el Adobe illustrator o el software libre Inkscape y con cualquier editor de texto como el Adobe Dreamweaver o el Sublime.
En las imágenes SVG se pueden buscar e indexar.
Las imágenes SVG son vectoriales y por tanto se escalan sin perder calidad e imprimir en alta calidad en cualquier resolución.
SVG es un estándar abierto. son XML puro.
El principal competidor del formato SVG son los archivos de Adobe flash, el problema es que Flash se basa en una tecnología patentada, no es de código abierto y no cumple normas como el XSL y DOM.
No requiere ningún plugin para su visualización en las últimas versiones de los navegadores más populares.
Formato SVG
Un archivo SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
La primera línea es la declaración XML, standalne significa que el archivo esta sólo o contiene una referencia a un archivo externo.
las dos siguientes, El tipo de documento y el enlace a la norma del W3C.
La etiqueta < svg> indica el comienzo del código, xmlns define las características y la versión.
La etiqueta <circle> dibuja un círculo donde cx y cy son las coordenadas x e y del centro y r el radio.
stroke define el color y grosor del borde y fill el color de relleno.
al ser un archivo XML, todos los elemento deben estar cerrados.
Agregar un SVG en una página HTML
Un archivo SVG es un documento con extensión .SVG, se puede incluir en la página como una imagen utilizando el elemento object, que emplea los atributos type, height y width.
<object data="rect2.svg" width="100%" height="400px" type="image/svg+xml"></object>
El SVG puede también usar los elementos img, embed, iframe o frame, como en los siguientes ejemplos:
<embed id="Smiley" src="smiley.svg" type="image/svg+xml">
<iframe src="circle1.svg"></iframe>
<img src="70-smiley.svg" id="img" width="70" height="70" />
Insertar el código XML del SVG en el código HTML:
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>