SVG HTML5
¿Qué es SVG?
- SVG significa Scalable Vector Graphics, es decir, Gráficos Vectoriales Escalables.
- SVG es usado para definir gráficos para la Web.
- SVG es una recomendación del W3C.
El Elemento <svg> HTML5
El elemento <svg> es un contenedor para gráficos SVG. SVG tiene varios métodos para dibujar trazados, cajas, círculos, textos e imágenes gráficas.
Círculo SVG
<svg width="100" height="100">
<circle cs="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Rectángulo SVG
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255); stroke-width:10; stroke:rgb(0,0,0);" />
</svg>
Rectángulo redondeado SVG
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red; stroke:black; stroke-width:5; opacy:0.5;" />
</svg>
Estrella SVG
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="till:lime; strike:purple; stroke-width:5; fill-rule:evenodd;" />
</svg>
Logo SVG
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,155,0); stop-opacy:1;" />
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacy:1;" />
</linearGradient>
</defs>
<ellipse cs="100" cy="70" rx="85" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">
SVG
</text>
</svg>
Diferencias entre SVG y Canvas
SVG es un lenguaje para describir gráficos 2D en XML. Canvas dibuja gráficos 2D sobre la marcha con JavaScript.
SVG esta basado en XML, lo cual significa que cada elemento esta disponible dentro del DOM SVG. Se pueda adjuntar controladores de eventos en JavaScript para un elemento. Cada forma dibujada es recordada como un objeto. Sí los atributos de un objeto SVG es cambiado, el navegador web puede renderizar la forma automáticamente.
Canvas es renderiza pixel por pixel. Una vez dibujado el gráfico, es olvidado por el navegador web. Si se debe cambiar su posición, se debe volver a dibujar toda la escena, incluyendo cualquier objeto que pueda hayan cubierto por el gráfico.
Comparación de Canvas y SVG
| Canvas | SVG |
|---|---|
|
|