Linea de Codigo

Dibujar un rectángulo con SVG es una cosa bastante fácil ya que el rectangulo es una de las figuras estándar del lenguaje SVG. Para ello necesitaremos utilizar la etiqueta RECT

Los dos primeros atributos importantes para nuestro ejemplo son la altura y ancho del rectangulo. Para ello utilizaremos los atributos de la etiqueta RECT: width y height.

<rect width="200" height="100" fill="red"/>

Otra cosa que podemos hacer es la de posicionar el rectangulo dentro del lienzo. Para ello tendremos que definir las coordenadas X,Y del lienzo. El nombre de los atributos es el mismo: X e Y.

<rect x="50" y="50" width="200" height="100""/>

Por último vamos a darle color a la cosa. En este caso, utilizaremos el atributo fill, indicándole el color que queremos usar (rojo en este caso):

<rect fill="red">

Aunque podríamos darle el color mediante un estilo y el atributo style:

<rect style="fill:red;"/>

El código que nos quedaría al final sería algo parecido a lo siguiente:

<rect x="50" y="50" width="200" height="100" fill="red"/>

Lo más normal es utilizar un gradiente como relleno de una figura. Eso no quiere decir que no podamos utilizar el gradiente sobre un borde.

Para poder realizar esta operación lo primero que tenemos que hacer es definir nuestro gradiente. La forma de hacer esto es la misma indistintamente de donde vayamos a utilizar este. A si que tendremos una definición de gradiente como la que sigue:

Continue reading Borde con gradiente lineal...

Un gradiente lineal es una variación de color entre dos puntos de forma linear. Aunque, estoy seguro que la palabra gradiente tendrá múltiples interpretaciones dependiendo del área donde lo apliquemos, aquí vamos a ver como lo trata el lenguaje SVG.

Pongámonos manos a la obra. El ejemplo intenta mostrar como hacer un gradiente linear que pase del rojo al naranja dentro de un circulo.

Lo primero de todo y la clave de nuestro ejemplo será definir el gradiente que vamos a utilizar. Ya que posteriormente, dicho gradiente, lo aplicaremos sobre el circulo.

Continue reading Circulo con gradiente lineal...

El objetivo de este ejemplo es ver cómo podemos definir objetos que sean transparentes en SVG. Para ello crearemos tres círculos y una línea que los atraviese.Dichos círculos irán aumentando su nivel de transparencia. Es decir, el primero será el más opaco y el último circulo será el más transparente.

Lo primero es recordar cómo se define un circulo. Para ello, es recomendable la lectura del ejemplo Dibujar un Circulo en SVG. Pero, básicamente, consiste en utilizar la etiqueta <CIRCLE/> con más o menos atributos.

Continue reading Transparencia y Opacidad en SVG...

En este ejemplo vamos a ver los pasos necesarios para poder pintar un Triángulo en SVG utilizando el elemento POLYGON. Para ello lo único que necesitamos conocer los vértices de nuestro polígono.

El polígono elegido es un Triángulo. Como su nombre bien dice, tendremos tres lados y consecuentemente tres vértices que tendremos que indicar al elemento POLYGON para que este se pueda pintar.

Los vértices de nuestro polígono son indicados mediante el atributo points. Para ello bastará dar las coordenadas de los puntos. Estas separadas entre comas y a su vez, cada coordenada, separada por un espacio.

Continue reading Dibujando un polígono: triángulo...

Si queremos dibujar una elipse en SVG deberemos de utilizar la etiqueta <ELLIPSE/>. En este caso lo que vamos a hacer es dibujar una elipse de 50x100 de color rojo.

La forma de configurarla es muy sencilla. En primer lugar lo que hay que hacer es posicionarla en el eje de coordenadas mediante los atributos cx y cy.

Continue reading Dibujar una elipse en SVG...

Para completar esta sencilla tarea nos valdremos de la etiqueta SVG <CIRCLE/>. Vamos, que para pintar un circulo en SVG no nos tenemos que comer mucho la cabeza.

Y aprendernos una propiedad que es el atributo r. El cual viene a indicarnos el radio que va a tener el circulo.

Continue reading Dibujar un círculo en SVG...

Difícil es abrir en Internet una página en la que no encontremos un gráfico. Ya sean GIF, JPG o PNG. Atrás quedaron los años donde veíamos las páginas repletas de texto plano y con unos fondos grises que tiraban para atrás.

Y en todo este trayecto hemos pasado épocas donde la sobrecarga de imágenes inundaba nuestra pantalla, la moda de los gráficos 3D para los títulos y los gráficos Flash.

Ahora, la vuelta de tuerca, es diferente. Ya no se busca el hacer nuestra página más elegante, sino más útil (en cuanto a la información se refiere). Buscamos gráficos que nos representen información. Y es que muchas veces "más vale una imagen que mil palabras".

Continue reading Mi primer gráfico SVG...