Gráficos vectoriales SVG

Usado para crear imágenes vectoriales 2D. Scalable Vector Grafics (SVG) es un estandard abierto desarrollado por la W3C desde 1999, basado en XML. Hoy en día la mayoría de los navegadores son capaces de reproducir gráficos SVG exactamente como reproducen una imagen.

A diferencia de la etiqueta <canvas> donde los gráficos son dibujados de manera programática, en SVG los elementos pertenecen al DOM. Por ejemplo: si queremos dibujar un circulo, el circulo es en realidad una etiqueta <circle>, y un <script> puede referirse al circulo y lo puede manipular, casi de la misma manera como puede manipular cualquiero otra etiqueta HTML.

Puede contener vectores gráficos como son: polilineas, poligonos, circulos y elipses. Ademas de images y texto.

<svg width=500px height=200px>
	 <rect x=100 y=0 rx=10 ry=10 width=300 height=100 fill=red stroke=black stroke-width=3 />
</svg>

El origen de coordenadas en SVG es la esquina superior-izquierda.

• Ventajas
• Linea
• Polilinea
• Rectangulo
• Poligono
• Circulo
• Elipse
• Ejemplos

1. Ventajas

Especifica un nombre único de identificación principalmente para acciones con CSS o JavaScript.

• No pierde calidad al hacer zoom
• Se puede escalar
• Se muestra de forma progresiva
• Se puede comprimir GZIP
• Se puede aplicar CSS
• Se puede modificar con JavaScript
• Es indexable por buscadores

2. Linea

<line x1=50 y1=50 x2=150 y2=50 stroke=#bdc3c7 stroke­width=3 />

3. Polilinea

<polyline points="0,40 40,40 40,80 80,80 80,120" fill=none stroke=#bdc3c7 stroke-width=10 />

4. Rectángulo

<rect cx=200 cy=50 width=100 height=150 fill=#d6a085 stroke=#bd8347 stroke-width=10 />

5. Polígono

<polygon points="200,100 250,180 160,210" fill=yellow stroke=black stroke­width=4 />

6. Circulo

<circle cx=150 cy=100 r=40 fill=red />

7. Elipse

<ellipse cx=100 cy=100 rx=30 ry=80 fill=line stroke=green stroke­width=4 />

8. Ejemplos

8.1 Colash de objetos superpuestos

<svg x=0 y=0 width=400 height=230 viewBox="0 0 400 230">
    <circle cx=0 cy=0 r=50 fill=red></circle>
    <line x1=50 y1=50 x2=150 y2=50 stroke=blue stroke­width=3 />
    <line x1=140 y1=50 x2=150 y2=100 stroke=navy stroke­width=6 />
    <ellipse cx=100 cy=100 rx=30 ry=80 fill=lime stroke=green stroke­width=4 />
    <rect x=200 y=50 width=100 height=150 fill=olive stroke=maroon stroke­width=10 />
    <polyline points="0,40 40,40 40,80 80,80 80,120" fill=none stroke=purple stroke­width=10 />
    <polygon points="200,100 250,180 160,210" fill=yellow stroke=black stroke­width=4 />
</svg>

8.2 Una estrella

<svg width=300 height=200>
  <polygon points="100,10 40,198 190,78 10,78 160,198" Style="fill:lime;stroke:purple;stroke-width:1;fill-rule:evenodd;" />
</svg>

8.3 Elipse con degrade y texto

<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,255,0);stop-opacity:1" />
      <stop offset=100% style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx=100 cy=70 rx=85 ry=55 fill=url(#grad1) />
  <text x=50 y=86 fill=white font-size=45 font-family=Verdana>SVG</text>
  Perdón, tu navegador no soporta gráficos SVG.
</svg>