Graficos 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 graficos 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 graficos 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.

1. Ventajas

Especifica un nombre unico de identificacion principalmente para acciones con CSS o JavaScript.

2. Linea

Atributos de LINE
AtributoDescripcion
x1Numero. Coordenada x origen (horizontal)
y1Numero. Coordenada y origen (vertical)
x2Numero. Coordenada x fin (horizontal)
y2Numero. Coordenada y fin (vertical)
fillColor relleno. none|color
strokeColor borde
stroke-widthAncho borde
<line x1=50 y1=50 x2=150 y2=50 stroke=#bdc3c7 stroke­width=3 />

3. Polilinea

Atributos de POLYLINE
AtributoDescripcion
pointsNumero,numero. Coordenada de cada punto
fillColor relleno. none|color
strokeColor borde
stroke-widthAncho borde
<polyline points="0,40 40,40 40,80 80,80 80,120" fill=none stroke=#bdc3c7 stroke-width=10 />

4. Rectangulo

Atributos de RECT
AtributoDescripcion
cxNumero. Coordenada x origen (horizontal)
cyNumero. Coordenada y origen (vertical)
rxNumero. Redondea la esquina
ryNumero. Redondea la esquina
widthNumero. Ancho (horizontal)
heightNumero. Alto (vertical)
fillColor relleno. none|color
strokeColor borde
stroke-widthAncho borde
<rect cx=200 cy=50 width=100 height=150 fill=#d6a085 stroke=#bd8347 stroke-width=10 />

5. Poligono

Atributos de POLYGON
AtributoDescripcion
pointsNumero,numero. Coordenada de cada punto
fillColor relleno. none|color
strokeColor borde
stroke-widthAncho borde
<polygon points="200,100 250,180 160,210" fill=yellow stroke=black stroke­width=4 />

6. Circulo

Atributos de CIRCLE
AtributoDescripcion
cxNumero. Coordenada x (horizontal)
cyNumero. Coordenada y (vertical)
rNumero. Radio
fillColor relleno. none|color
strokeColor borde
stroke-widthAncho borde
<circle cx=150 cy=100 r=40 fill=red />

7. Elipse

Atributos de ELLIPSE
AtributoDescripcion
cxNumero. Coordenada x (horizontal)
cyNumero. Coordenada y (vertical)
rxNumero. Radio x
ryNumero. Radio y
fillColor relleno. none|color
strokeColor borde
stroke-widthAncho borde
<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>
  Perdon, tu navegador no soporta graficos SVG.
</svg>

SVG Perdon, tu navegador no soporta graficos SVG.