Como vimos en nuestro primer ejemplo de creación de imágenes, donde creamos un círculo, existen una serie de figuras geométricas predeterminadas que podemos crear dentro del elemento <svg>. Estas figuras son:
* <rect>: permite crear cuadrados y rectángulos.
* <circle>: permite crear círculos.
* <ellipse>: permite crear elipses.
* <line>: permite crear líneas.
* <polyline>: permite crear múltiples líneas.
* <polygon>: permite crear polígonos.
* <path>: permite crear trazados.
A continuación veremos en detalle cómo trabajar con algunas de estas figuras predeterminadas.
Creando rectángulos
Veamos un ejemplo de código utilizando la etiqueta <rec>:
<svg width=”400″ height=”110″>
<rect width=”500″ height=”200″ style=”fill:rgb(0,0,255);stroke-width:5;stroke:rgb(0,0,0)” />
</svg>
Como podemos ver, la etiqueta <rec> nos permite crear figuras geométricas cuadradas o rectangulares. Mediante los atributos de HTML width y height vamos a definir el ancho y el alto en píxeles. El resto de las propiedades visuales las podemos definir mediante atributos de HTML, o bien como hicimos en este caso con atributos de CSS. El atributo style, aquí utilizado, nos permite asignar propiedades y valores de CSS, los cuales poseen mucha mayor diversidad a los atributos de HTML.
Veamos ahora otro ejemplo con más atributos
<svg width=”400″ height=”180″>
<rect x=”50″ y=”20″ width=”150″ height=”150″
style=”fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9″ />
</svg>
En este caso se agrega, mediante CSS, la posibilidad de aplicar opacidad a la imagen a través de la propiedad opacity. Este es un efecto más que interesante porque nos permite lograr niveles de profundidad y composiciones más complejas para nuestra interfaz.
Creando elipses
Si lo que necesitamos es crear una figura elíptica, HTML5 nos brinda la etiqueta <ellipse>. Esta etiqueta funciona de forma casi idéntica a la etiqueta <rec>. Veamos un ejemplo de código para conocer sus propiedades:
<svg height=”140″ width=”500″>
<ellipse cx=”200″ cy=”80″ rx=”100″ ry=”50″
style=”fill:yellow;stroke:purple;stroke-width:2″ />
</svg>
Mediante los atributos cx y cy vamos a definir las coordenadas de la figura respecto de su centro, mientras que con el atributo rx definimos el radio horizontal y con el atributo ry el radio vertical, a diferencia de la etiqueta <circle> que posee un único radio.
