En esta entrada, daremos los primeros pasos con los SVG, veremos como crear un SVG en HTML, veremos como crear una imagen SVG como tal y también veremos algunos de sus atributos para el color de los mismos, posición, tamaño y borde de los SVG, además de crear un sencillo semáforo.
Para trabajar con los SVG, tenemos que cumplir con un requisito que es similar a cuando trabajamos con y es que debemos crear una etiqueta que contenga todas las figuras que vamos a contener, y esto se hace mediante la etiqueta svg la cual viene siendo nuestro lienzo para dibujar figuras; algo parecido a como pasa con la etiqueta canvas; en la misma podemos definir múltiples atributos como iremos viendo, pero por los momentos solo nos interese definir el tamaño de nuestro lienzo SVG:
<svg width="200px" height="400px"></svg>
En el código anterior, creamos un SVG de 400 por 200 píxeles.
Ahora, con nuestro lienzo listo, vamos a dibujar un rectángulo, que vendrá siendo, el contenedor de las luces del semáforo o el cuerpo del semáforo; para ello debemos definir un elemento rect dentro de la etiqueta svg que definimos anteriormente:
<svg width="200px" height="400px">
<rect x="0" y="0" width="150" height="350"
fill="black" stroke="gray" stroke-width="2" />
</svg>
El elemento rect permite dibujar un rectángulo o cuadrado según definamos sus atributos; dichos atributos width y height que como en CSS, permite definir la anchura y altura respectivamente.
Tenemos otros atributos que explicaremos un poco más adelante; finalmente, nuestro semáforo va quedando de la siguiente manera:
Ahora vamos por las luces, para ello vamos a definir tres círculos con colores distintos que representarán los colores de un semáforo, que son rojo, amarillo y verde.
<circle cx="75" cy="75" r="40"
fill="red" stroke="gray" stroke-width="2" />
Como vemos, para crear un círculo, empleamos el atributo r para definir el radio de nuestro circulo, asi que si colocamos un radio de 40 píxeles tendremos un círculo que de entre sus extremos más largos será de 80 píxeles; recordemos que el radio de una circunferencia es cualquier segmento que une el centro a cualquier punto de dicha circunferencia.
También cuenta con dos atributos más que permiten definir la posición del círculo, desde el centro del mismo en el eje de las X, así que si tenemos un círculo de 40 píxeles de radio dentro de un rectángulo de 150 de ancho, para centrar el círculo en dicho rectángulo en el eje de las X el valor debe ser de 75 píxeles, la misma lógica aplica al atributo cy que permite un centrado en el eje de las Y; finalmente creamos 3 círculos alineados en el eje de las X pero con posiciones en las Y distintas para que no se solapen los mismos:
<svg width="200px" height="400px">
<rect x="0" y="0" width="150" height="350"
fill="black" stroke="gray" stroke-width="2" />
<circle cx="75" cy="75" r="40"
fill="red" stroke="gray" stroke-width="2" />
<circle cx="75" cy="175" r="40"
fill="yellow" stroke="black" stroke-width="2" />
<circle cx="75" cy="275" r="40"
fill="#40CC40" stroke="black" stroke-width="2" />
</svg>
El atributo stroke permite definir el color del borde, mientras que el atributo stroke-width el ancho que tendrá el borde en píxeles fill que en CSS sería el background permite definir el color de relleno de un elemento, estos atributos son comunes entre todas las formas geométricas que podemos dibujar con los SVG que vienen siendo las primitivas de los mismos que iremos viendo en posteriores entradas; finalmente, nuestro semáforo luce de la siguiente forma:
Si queremos variar la posición del semáforo para que no esté tan al borde, también existen propiedades que podemos usar en el elemento rect, aunque al variar la posición del rectángulo también debemos de variar la posición de las tres luces, es decir, de los círculos que aunque pareciera que el rectángulo actuará de contenedor y con esto si variamos la posición del rectángulo esto afectaría directamente a los círculos, la realidad es que no es así, y los círculos que están "contenidos" dentro del rectángulo los debemos desplazar de manera manual aumentando los valores de cx y cy en los mismos valores o proporciones que variemos la posición del rectángulo.
Finalmente, para variar la posición del rectángulo empleamos los atributos x y y, especificando el desplazamiento en píxeles:
<svg width="200px" height="400px">
<rect x="20" y="20" width="150" height="350"
fill="black" stroke="gray" stroke-width="2" />
<circle cx="100" cy="95" r="40"
fill="red" stroke="gray" stroke-width="2" />
<circle cx="100" cy="195" r="40"
fill="yellow" stroke="black" stroke-width="2" />
<circle cx="100" cy="295" r="40"
fill="#40CC40" stroke="black" stroke-width="2" />
</svg>
https://www.desarrollolibre.net/
⁂