En SVG tenemos a nuestra disposición las siguientes formas básicas:

  • rectángulos
  • círculos
  • elipses
  • líneas rectas
  • polilíneas
  • polígonos

RECTÁNGULOS

Para generar un rectángulo con SVG utilizaremos la etiqueta rect

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="398" >
3 <rect x="400" y="50" width="400" height="300"
4 fill="black" stroke="red" stroke-width="20" />
5 </svg>

A la etiqueta rect le asignamos los siguientos atributos: x="400" donde x situa el rectangulo en las coordenadas que le asignamos al eje x, en este caso 400. y="50" donde y situa el rectangulo en las coordeandas que le asignamos al eje y, en este caso 50. width="400" determina el ancho del rectángulo, en este caso 400 pixeles. height="300" determina la altura del rectángulo, en este caso 300 pixeles. fill="black" determina el color del rectangulo, en este caso black. stroke="red" determina el color del borde del rectángulo, en este caso red. stroke-width="20" determina el grosor del borde del rectángulo, en este caso 20 pixeles.

Ahora generaremos un rectángulo con los bordes redondeados, tan solo tenemos que añadir el atributo rx="40", en este caso el redondeado sera de 40 pixeles.

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="398" >
3 <rect x="400" y="50" width="400" height="300"
4 fill="black" stroke="red" stroke-width="20" rx="40" />
5 </svg>

CÍRCULO

Para generar un círculo con SVG utilizaremos la etiqueta circle

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="398" >
3 
4 <circle cx="600" cy="200" r="150" fill="black" stroke="red" stroke-width="10"/>
5 
6 </svg>

A la etiqueta circle le asignamos los siguientos atributos: cx="600" donde x situa el círculo en las coordenadas que le asignamos al eje x, en este caso 400. cy="200" donde y situa el círculo en las coordeandas que le asignamos al eje y, en este caso 50. r="150" determina el radio que tendra el círculo, en este caso 150 pixeles. fill="black" determina el color del círculo, en este caso black. stroke="red" determina el color del borde del círculo, en este caso red. stroke-width="10" determina el grosor del borde del círculo, en este caso 10 pixeles.

ELIPSE

Para generar una elipse con SVG utilizaremos la etiqueta ellipse

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink"
3 width="1198" height="398" >
4 
5 <ellipse cx="600" cy="200" rx="150" ry="50"
6 fill="black" stroke="red" stroke-width="10"/>
7 
8 </svg>

A la etiqueta ellipse le asignamos los siguientos atributos: cx="600" donde x situa la elipse en las coordenadas que le asignamos al eje x, en este caso 600. cy="200" donde y situa la elipse en las coordeandas que le asignamos al eje y, en este caso 200. rx="150" determina el radio que tendra la elipse en el eje x, en este caso 150 pixeles. ry="50" determina el radio que tendra la elipse en el eje y, en este caso 50 pixeles. fill="black" determina el color de la elipse, en este caso black. stroke="red" determina el color de la elipse, en este caso red. stroke-width="10" determina el grosor del borde de la elipse, en este caso 10 pixeles.

LÍNEA

Para generar una línea con SVG utilizaremos la etiqueta line

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 mlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="398" >
3 
4 <line x1=’250′ y1="150" x2=’600′ y2=’150′
5 stroke="red" stroke-width="20" />
6 
7 </svg>

A la etiqueta line le asignamos los siguientos atributos: x1="250" x1 son las coordenadas de principio y situa la línea en el eje x, en este caso 250. y1="150" y1 son las coordenadas de principio y situa la línea en el eje y, en este caso 150. x2="600" x2 son las coordenadas del final y situa la línea en el eje x, en este caso 600. y2="150" y2 son las coordenadas del final y situa la línea en el eje y, en este caso 150. stroke="red" determina el color de la elipse, en este caso red. stroke-width="10" determina el grosor del borde de la elipse, en este caso 10 pixeles.

POLILÍNEAS

Para generar una polilínea con SVG utilizaremos la etiqueta polyline

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="398" >
3 
4 <polyline points="0,40 40,40 40,80 80,80 80,120"
5 fill="none" stroke="red" stroke-width="10" />
6 
7 </svg>

A la etiqueta polyline le asignamos los siguientos atributos: points="0,40 40,40 40,80 80,80 80,120" utilizaremos pares de coordenadas separadas por comas, donde el primer número corresponde a la coordenada x y el segundo número corresponde a la coordenada y. Para llevara a cabo una polilínea necesitaremos al menos dos pares de coordenadas, es decir points="0,40 40,40" fill="none" determina el color de la elipse, en este caso ninguno. stroke="red" determina el color de la elipse, en este caso red. stroke-width="10" determina el grosor del borde de la elipse, en este caso 10 pixeles.

POLIGONOS

Para generar una poligono con SVG utilizaremos la etiqueta polygon

1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
2 xmlns:xlink="http://www.w3.org/1999/xlink"
3 width="1198" height="398" >
4 
5 <polygon points="200,100 250,180 160,210"
6 fill="black" stroke="red" stroke-width="4" />
7 
8 </svg>

A la etiqueta poligono le asignamos los siguientos atributos: points="200,100 250,180 160,210" en este caso con el atributo points asignaremos el número de lados que queramos que tenga el poligono, sera definido por números de pares, donde el primer número corresponde a la coordenada x, y el segundo número corresponde a la coordenada y. En este caso hemos utilizado tres pares por lo tanto obtendremos un triángulo. fill="black" determina el color del poligono, en este caso black. stroke="red" determina el color del poligono, en este caso red. stroke-width="10" determina el grosor del borde del poligono, en este caso 4 pixeles.

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).