.. title: Creemos en la Web: Dibujando Formas en 2D
.. slug: creemos-en-la-web-dibujando-formas-en-2d
.. date: 2018-06-30 10:38:06 UTC
.. tags:
.. category:
.. link:
.. description:
.. type: text
Hasta ahora la mayoría del contenido que creamos consiste principalmente en
texto y "cajas", es decir, cuadrados dentro de cuadrados.
Pero que pasa si quiero una linea, un triangulo o un circulo en mi pagina?
Para eso existe un set de tags llamado SVG que nos permite crear dibujos
"vectoriales", es decir que su contenido son las formas en si y se ven bien en
cualquier resolución de pantalla, no como las imágenes hechas de pixeles, donde
si la imagen es chica y la agrandamos empezamos a perder calidad.
Empecemos con un ejemplo simple:
.. code-block:: html
.. raw:: html
Los tags son nuevos y específicos de SVG, es decir, solo los podemos usar dentro
de un tag raíz `svg `_,
lo bueno es que son bastante descriptivos.
En el ejemplo arriba decimos que queremos dibujar en svg, dentro de un cuadro
de 100x100.
El dibujo consiste de un circulo (`circle `_ en ingles) con centro x=50 y centro y=50, con un radio de
40, borde de 3 negro y relleno rojo.
Veamos algunos otros ejemplos:
.. code-block:: html
.. raw:: html
Acá vemos un rectángulo (`rect `_) posicionado en x=50, y=20, con ancho de 150 y alto de 150 y bordes
redondeados.
Como veras el resto de las propiedades se las define con el atributo `style` al
igual que en HTML, algunos atributos son nuevos pero el resto sigue aplicando.
Algunos mas:
.. code-block:: html
.. raw:: html
Pero lo mejor que tiene SVG es que hay editores libres y gratuitos que nos
permiten dibujar como cualquier editor de imágenes y luego ver el código SVG
generado.
Este editor se llama `Inkscape `_ y lo podes
descargar desde la pagina.
Luego de instalarlo se ve algo así:
.. figure:: /galleries/cew/10/inkscape.png
:width: 100%
:align: center
Abriendo el editor XML de Inkscape podemos ver como se crea cada forma, que
tags y atributos se usan.
.. figure:: /galleries/cew/10/inkscape-xml.gif
:align: center
Si usamos un editor para crear un SVG que queremos insertar en nuestra pagina
tenemos dos opciones:
* Guardar el dibujo como un archivo SVG y copiar el contenido del archivo abriendolo con un editor de texto y pegandolo en nuestra pagina
* Insertandolo como una imagen externa
Ya vimos como insertar SVG directamente en el HTML, ahora veamos como incluirlo
como una imagen externa:
.. code-block:: html
.. raw:: html
`Fuente `_
Una ultima observación sobre SVG, si bien son parecidos a HTML, SVG es mas
estricto en cuanto a los nombres y atributos de tags permitidos y con la
necesidad de "cerrar" todos los tags, si cometemos un error en HTML, el
navegador va a hacer lo mejor que pueda para presentar el contenido igual, en
SVG muy probablemente no se dibuje nada.