vanus cero uno

Ejemplos de SVG
Aunque aun no es oficial, los documentos svg llevan la extension .svg, aqui podemos ver un ejemplo que nos da como resultado en pantalla un circulo azul:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="blue"/>
</svg>

Ver ejemplo
Recuerda que debes tener el plugin instalado o bien un navegador moderno con soporte para SVG como Firefox 1.5.

El codigo
<?xml version="1.0" standalone="no"?>

La primera linea contiene la declaracion XML, hay que resaltar el atributo standalone, este nos especifica si el archivo SVG es independiente o si contiene una referencia a un archivo externo.

standalone=”no” indica que el documento SVG hace referencia a un archivo externo, en este caso un archivo DTD. El proposito de un DTD es definir los bloques de construccion validos de un documento de XML. Define la estructura del documento con una lista de elementos validos.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>


En las lineas 2 y 3 se muestra la referencia hacia el DTD externo para SVG. El DTD se localiza en “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” y en el estan contenidos todos los elementos validos para un documento SVG.

<svg width="100%" height="100%" version="1.1"
xmlns=”http://www.w3.org/2000/svg”>

</svg>


El codigo SVG empieza con el elemento <svg>, que inicia con la etiqueta <svg> y termina con el cierre de la etiqueta </svg>. A esto se le conoce como el elemento raiz y este a su vez cuenta con algunos atributos, como el ancho y alto, (width y height respectivamente), la version y su namespace definido por el atributo xmlns. El namespace de un documento XML nos proporciona un metodo para evitar conflictos con el nombre de los elementos.

El elemento SVG <circle> es usado para crear un circulo. Los atributos cx y cy definen las coordenadas del centro del circulo. Si cx y cy se omiten, el centro del circulo es definido en (0,0). El atributo r define el radio del circulo.

Los atributos stroke y stroke-width definen el aspecto del contorno de la figura. En este caso se define un borde color negro de un ancho de 2px.

El atributo fill define el color de relleno de la figura. En este caso lo definimos como color azul.

La etiqueta </svg> cierra el elemento raiz SVG y el documento.

SVG y HTML

Sintaxis:
<object width="300" height="100" data="labs/prueba.svg"
type=”image/svg+xml”
codebase=”http://www.adobe.com/svg/viewer/install/” />


Para poder ver documentos SVG contenidos en HTML tenemos varias opciones, podemos utilizar la etiqueta <embed> o bien la etiqueta <object>. Estas tienen sus ventajas y desventajas.

Mientras que <embed> es recomendado por Adobe para utilizar junto con su plugin, la etiqueta <embed> no es aceptada por XHTML como una etiqueta valida.

<object> es aceptada por todos los navegadores modernos, pero tiene la desventaja de no poder usar scripting, ademas de que no podria funcionar bien en Internet Explorer.

La tercera opcion es utilizar un Iframe.

Aplicaciones
Esto me lleva a lo que mencionaba al inicio de esta entrada. SVG es XML por lo que lenguajes como PHP que han probado ser muy buenos generando lenguajes de etiquetas pueden hacer muy buena mancuerna para crear graficas de manera dinamica.

Estas graficas, son muy livianas comparadas con otros formatos graficos como gif, jpeg, etc. pueden expandirse o reducirse sin perder su calidad, lo que las hace optimas para impresion.

Ver ejemplo

Sin duda es una tecnologia con mucho potencial, y lo mejor de esta aun esta por verse.

Fuentes:
W3Schools
Mint: A Fresh look at Your Site