Elemento SVG - HTML5 Lección 12

Elemento SVG 

Temario:

• Elemento SVG

El elemento <svg> permite al autor construir una imagen en base vectorial, directamente en la página utilizando el lenguaje SVG.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">

<circle cx="50" cy="50" r="30" style="stroke:#0000ff; stroke-width: 5px; fill:#ff0000;"/>

<rect x = "100" y = "0" height = "50" width = "50" stroke-width = "2px" stroke = "#ffff00" fill = "#00ff00" />

</svg>

• SVG utiliza un sistema de XML muy similar a XHTML. Cada elemento se describe por una etiqueta, que tiene varios atributos que definen su tamaño, posición y color. 
• Los elementos SVG también pueden ser modificados por una forma de CSS. 
• También es posible utilizar código JavaScript para crear y modificar el código SVG en tiempo real. 
• SVG se utiliza a menudo para crear gráficos o otras visualizaciones de forma dinámica. 
• Además, es posible exportar una imagen SVG de una herramienta como Dia o Inkscape, e incrustar el dibujo resultante directamente en la página.
• La principal ventaja de un formato de imagen basado en vectores como SVG es la capacidad de escalar la imagen sin perder calidad.