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...

Dos buenos ejemplos para empezar aprendiendo de gradientes en SVG son Circulo con Gradiente Lineal y Gradiente Lineal Vertical. Los cuales explican como hacer gradientes lineales horizontales y verticales respectivamente. A si que lo que nos queda por explicar es como hacer un gradiente lineal angular en SVG

Continue reading Gradiente linear angular en SVG...

Un gradiente lineal es una transición de colores a lo largo de un vector. Normalmente de dos colores, aunque puede ser de tantos como queramos.

Cuando dibujamos gradientes lineales, estos, pueden ser de tres formas:

• Horizontales
• Verticales
• Angulares

Continue reading Gradiente lineal vertical...

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...

Este es uno de los ejemplos más sencillos de SVG. Consiste en dibujar una línea dentro de un lienzo. Es para ello que explicaremos cómo poner una línea de color rojo que vaya de las coordenadas (10,10) a las (100,100).

Continue reading Dibujar una línea en SVG...

Lo primero que tendremos que hacer será dibujar un circulo. Para ello utilizamos la etiqueta <CIRCLE/>. Es bastante interesante que le eches un vistazo al ejemplo Dibujar un círculo en SVG para poder acometer la tarea.

Continue reading Círculos con borde en SVG...