SVG

GENERA GRAFICOS VECTORIALES CON <svg>

Un grafico vectorial es un dibujo esclable a cualquier tamaño, es una forma de generar dibujos de una forma muy ligera para el navegador y mucho más simple que canvas. El contenedor sgv es muy útil para gnerar dibujos de textos, circulos, cuadrados.
En primer lugar abriremos una eqiqueta sgv y dentro de ella podrmos incluir el resto de equetas

<text>

Cargaremos textos dentro de nuestro contenedor sgv. Los atributos x e y marcaran el punto en el que se situa nuestro dibujo.El atributo fill lo utilizaremos para indicar el color del relleno.

<rect>

Lo utilizaremos para generar un rectangulo. El atributo stroke sera el borde de nuestra imagen.

<circle>

Crea un circulo, para posicionarlo tenemos los atribuyos cx y cy, para definir el tamaño tenemos el atributo r que representa el rádio de nuestro circulo y para definir el grosor del borde tenemos stroke-width

<line>

Crearemos un linea, x1 y y1 marcará el punto en el que iniciamos nuestra línea, mientras x2 e y2 marca el fin de la línea.

<ellipse>

Es una figura geométrica parecida a un circulo pero no tiene un radio regular. utilizaremos los atributos cx y cy para situar la elipse y utilizaremos rx y ry para darle forma a nuestra elipse.

<polyline>

Una poli linea es un conjunto de líneas, utilizaremos el atributo points para darle los puntos x,y en los que inicia cada línea (points="20,20 40,25 60,40"). En la siguiente imágen crearemos dos polilíneas con un texto superpuesto y un elipse.

Degradados <defs> DEGRADADO CIRCULAR

<tspan>

Podemos utilizar esta etiqueta para insertar textos dentro de una etiqueta text.