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>

Círculo 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 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>

Rectángulo Redondeado 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>

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

SVG Logo 

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
  • Resolución independiente.
  • Sin soporte para controladores de eventos.
  • Poca capacidad para representación de textos.
  • Capacidad de guardar la imagen resultante como un .png o .jpg.
  • Muy adecuado para gráficos de juegos intensivos.
  • Resolución independiente.
  • Con soporte para controladores de eventos.
  • Más adecuado para aplicaciones con áreas de representación largas (Google Maps).
  • Baja representación si es compleja. (Cualquier uso excesivo del DOM será lento).
  • No adecuado para aplicaciones de juegos.