Gráficos vectoriales SVG

Formas SVG

Dibujar rectángulo

<svg width="400" height="110">
	<rect id="rectangulosvg" width="300" height="100"/>
</svg>
				
svg #rectangulosvg {
	fill:rgb(0,0,255);
	stroke-width:3;
	stroke:rgb(0,0,0);
}
				
<svg width="400" height="180">
	<rect x="50" y="20" rx="20" ry="20" id="cuadradosvg" width="150" 
	height="150"/>
</svg>
				
svg #cuadradosvg {
	fill:red;
	stroke:black;
	stroke-width:5;
	opacity:0.5; 
}


Dibujar una elipse

<svg height="100" width="500">
	<ellipse id="elipsesvg1" cx="240" cy="50" rx="220" ry="30" />
	<ellipse id="elipsesvg2" cx="220" cy="50" rx="190" ry="20" />
</svg>
				
svg #elipsesvg1 {
	fill:yellow;
}

svg #elipsesvg2 {
	fill:white;
}


Dibujar líneas

<svg height="180" width="500">
	<polyline id="lineassvg" points="0,40 40,40 40,80 80,80 
	80,120 120,120 120,160" />
</svg>
				
svg #lineassvg {
	fill:none;
	stroke:red;
	stroke-width:4;
}


Filtros SVG

Generar degradados

<svg height="110" width="110">
	<defs>
	<filter id="f1" x="0" y="0">
	  <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
	</filter>
	 </defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" 
	  style="fill:yellow" filter="url(#f1)" />
</svg>


Generar sombras

<svg height="140" width="140">
	<defs>
	<filter id="f4" x="0" y="0" width="200%" height="200%">
	<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
	<feColorMatrix result="matrixOut" in="offOut" type="matrix" 
	values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
	<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	</filter>
	</defs>
  <rect width="90" height="90" 
  style="stroke:green; stroke-width:3; fill:yellow" filter="url(#f4)" />
</svg>


Gradientes SVG

Gradientes lineales:

<svg height="150" width="400">
  <defs>
	<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
	  <stop offset="0%" style="stop-color:rgb(90,205,90);
	  stop-opacity:1" />
	  <stop offset="100%" style="stop-color:rgb(255,0,220);
	  stop-opacity:1" />
	</linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>


Gradientes radiales:

<svg height="150" width="500">
	 <defs>
	<radialGradient id="grad2" cx="50%" cy="50%" r="50%" 
	fx="50%" fy="50%">
	 <stop offset="0%" style="stop-color:rgb(255,255,255);
	  stop-opacity:0" />
	  <stop offset="100%" style="stop-color:rgb(195,8,8);
	  stop-opacity:1" />
	</radialGradient>
	 </defs>
	 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>


Diferencias entre imagen en mapa de bits e imagen vectorial:


Imagen vectorial
Imagen mapa de bits