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"/>

Similar Posts:

• Rectángulo redondeado en SVG
• Dibujar una línea en SVG
• Definir el tamaño de una imagen con CSS
• Transparencia y Opacidad en SVG
• Area de un rectángulo con Java

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:

<defs>
<linearGradient id="rojo_naranja" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="30%" stop-color="#f00"/>
    <stop offset="60%" stop-color="#ff0"/>
  </linearGradient>
</defs>

Si ves muy complicado el definir el gradiente, en Linea de Código tienes muchos artículos y ejemplos que te explican como trabajar con gradientes.

Ahora solo nos queda utilizar el gradiente como fondo del borde. Recordar que el relleno de los bordes de las figuras básicas o shapes se suele controlar con el atributo stroke.

Y para hacer referencia al gradiente hay que utilizar la función url. Esta recibirá como parámetro el nombre que le hayamos dado al ID del gradiente, precedido de una almohadilla (#). El código a utilizar sería este:

url(#rojo_naranja)

Al final tendremos el siguiente código. En este caso, aplicado a un círculo (no es que tenga nada contra el resto de figuras básicas):

<defs><circle cx="600" cy="200" r="100" style="fill:#fff" stroke="url(#rojo_naranja)" stroke-width="2"/>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Circulo con gradiente lineal
• Gradiente lineal vertical
• Borde con doble linea mediante CSS
• Dibujando un polígono: triángulo
• Borde con lineas discontinuas

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

Cuando decimos angular, lo que queremos decir es que el vector que representa la transición de los colores tiene un cierto ángulo. Dentro de la definición del gradiente lineal, la cual hacemos mediante la etiqueta <linearGradient>, no encontramos forma de definir el angulo del vector. Para poder llevar a cabo esto, solo tenemos las coordenadas de inicio y de fin del vector.

Y la forma de conseguir un angulo es que tanto las coordenadas x1 y x2, como las coordenadas y1 e y2 sean diferentes entre si.

Así, por ejemplo, un angulo de 90 grados (noroeste) lo podríamos conseguir con la siguiente secuencia de coordenadas:

x1=0 y1=100 x2=100 y2=0

Quedándonos el siguiente código:

 
<linearGradient id="gradiente_angular" x1="0%" y1="100%" x2="100%" y2="0%">
 <stop offset="20%" stop-color="#f00"/>
 <stop offset="80%" stop-color="#ff0"/>
</linearGradient>
 

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Gradiente lineal vertical
• Borde con gradiente lineal
• Circulo con gradiente lineal
• Insertar un elemento en una posición concreta del Vector
• Dibujar una línea 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

La etiqueta SVG que nos sirve para definir gradientes es linearGradient. La cual, mediante coordenadas x1,y1 y x2,y2 identifica el inicio y el fin del vector que coordina el gradiente.

 
<linearGradient id="gradiente_vertical" x1="valor" y1="valor" x2="valor" y2="valor">
</linearGradient>
 

En el caso que nos consta, gradiente lineal vertical, el "truco" está en el manejo de las coordenadas del gradiente. Mediante estas coordenadas lo que definimos es donde va a iniciar y donde va a terminar el gradiente.

A si que lo que tenemos que hacer es que las coordenadas x1 y x2 deben de ser iguales, mientras que las coordenadas y1 e y2 deben de ser diferentes.

 
<linearGradient id="gradiente_vertical" x1="0%" y1="0%" x2="0%" y2="100%">
</linearGradient>
 

Además a la etiqueta linearGradient le podemos anidar la etiqueta stop. Esta etiqueta nos ayuda a definir con que color iniciamos y con cual acabamos el gradiente. Para ello utiliza un atributo offset de posicionamiento de inicio del color y otro atributo denominado stop-color para indicar el color que se utiliza.

 
<stop offset="20%" stop-color="#f00"/>
<stop offset="80%" stop-color="#ff0"/>
 

En este código indicaríamos que al 20% del vector se empieza a utilizar el color rojo (#f00) y que al 80% del vector pasamos al color amarillo (#ff0).

Veamos como quedaría todo el código de nuestro gradiente lineal vertical:

 
<linearGradient id="gradiente_vertical" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="20%" stop-color="#f00"/>
   <stop offset="80%" stop-color="#ff0"/>
</linearGradient>
 

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Gradiente linear angular en SVG
• Circulo con gradiente lineal
• Borde con gradiente lineal
• Dibujando un polígono: triángulo
• Dibujar una línea en SVG

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.

Para definir el gradiente lineal utilizamos la etiqueta linearGradient. Entre los atributos de esta etiqueta encontramos el vector que define el gradiente linear. Dichos atributos son x1, y1, x2, y2. Este vector indica los puntos de inicio y fin donde el gradiente empezará y acabará. Los valores que podemos aplicar a dichos atributos pueden ser o bien número o bien porcentajes.

 
<linearGradient id="rojo_naranja" x1="0%" y1="0%" x2="100%" y2="0%">
</linearGradient>
 

Como etiquetas hijo dentro de linearGradient encontraremos el control de los colores mediante la etiqueta stop. Dicha etiqueta nos permitirá el definir el color con el que iniciamos y acabamos el gradiente.

 
<linearGradient id="rojo_naranja" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#f00"/>
  <stop offset="100%" stop-color="#ff0"/>
</linearGradient>
 

La etiqueta stop tiene dos atributos significativos. El primero es offset, el cual indica, en que tanto por ciento del vector vamos a empezar a aplicar el gradiente. El segundo es stop-color, el cual indica el color a utilizar.

Toda esta declaración del gradiente, con el fin de poder ser utilizada, deberá de definirse dentro de las etiquetas de definición defs.

<defs>
<linearGradient id="rojo_naranja" x1="0%" y1="0%" x2="100%" y2="0%">
   <stop offset="20%" stop-color="#f00"/>
   <stop offset="80%" stop-color="#ff0"/>
 </linearGradient>
</defs>

Una vez completo nuestro gradiente linear. Solo quedará definir la figura a utilizar y sobre la cual aplicaremos el gradiente. En nuestro ejemplo será un circulo. Para aplicar el gradiente utilizamos el ID que le hayamos dado al mismo. En este caso "rojo_naranja". El ID será utilizado como relleno mediante la propiedad fill.

El código del circulo nos quedaría algo así:

<circle cx="600" cy="200" r="100" style="fill:url(#rojo_naranja)" stroke="#000" stroke-width="2"/>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Gradiente lineal vertical
• Gradiente linear angular en SVG
• Dibujar un círculo en SVG
• Círculos con borde en SVG
• Borde 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.

<CIRCLE cx="100" cy="100" r="50"/>

Para definir la transparencia del circulo utilizaremos el atributo opacity dentro de los estilos. Dicho atributo podrá tomar los valores de 0 a 1. Los decimales los utilizaremos con el separador de punto decimal. Por ejemplo 0.4. El valor de 1 hace que el elemento sea totalmente opaco, mientras que el valor de 0 hace que el elemento sea totalmente transparente.

Nos quedaría un código parecido a este:

<CIRCLE style="opacity:0.5;"/>

Si ponemos 3 circulos, incrementando el valor de la opacidad, y desplazando su centro dentro del lienzos sería:

<circle cx="100" cy="100" r="50" style="fill:green;opacity:0.8"/>
<circle cx="250" cy="100" r="50" style="fill:green;opacity:0.5"/>
<circle cx="400" cy="100" r="50" style="fill:green;opacity:0.2"/>

Lo siguiente será poner una línea atravesando a los círculos. Para ello deberemos de utilizar la etiqueta <LINE/> con sus atributos de coordenadas x1,y1 x2,y2.

<LINE x1="100" y1="100" x2="500" y2="100"/>

Y se me olvidaba otra cosa. El orden del pintado lo establece el orden en el que aparezca el código. A si que si queremos poner la línea debajo de los círculos, habrá que escribirla primero.

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Dibujar un rectángulo con SVG
• Circulo con gradiente lineal
• Dibujar un círculo en SVG
• Enlace a una parte concreta de la página
• Alineando texto al centro

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.

Las coordenadas elegidas para nuestro Triángulo son: (100,100) (100,200) y (200,200). La etiqueta nos quedará de la siguiente forma:

 
<polygon points="100,100 100,200 200,200"/>
 

En cuanto al coloreado del polígono tendremos que recurrir al atributo fill. Mediante el cual, y utilizando un nombre, indicaremos el color de relleno del Triángulo

 
<polygon points="100,100 100,200 200,200" fill="red">
 

Otra de las cosas que podemos modificar es el borde del Triángulo Para poder llevar a cabo esto utilizamos los atributos stroke para indicar el color del borde y stroke-width para indicar su tamaño.

 
<polygon stroke-width="10" stroke="green"/>
 

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Imagenes con borde
• Gradiente lineal vertical
• Dibujando multiples lineas en SVG
• Dibujar un rectángulo con SVG
• Bordes 3D con CSS

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.

<ELLIPSE cx="100" cy="100"/>

Una vez posicionada deberemos de darle un valor de radio de ancho y alto. En este caso utilizaremos los atributos rx y ry. Mediante rx especificamos el radio horizontal de la elipse y mediante ry el radio vertical.

<ELLIPSE cx="100" cy="100" rx="100" ry="50"/>

Lo último que nos quedará será el rellenar la elipse del color elegido. Rojo en nuestro caso. Para ello utilizamos la propiedad de pintado fill dandole el nombre en ingles del color.

<ELLIPSE cx="100" cy="100" rx="100" ry="50" fill="red"/>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Dibujar una línea en SVG
• Dibujando un polígono: triángulo
• Circulo con gradiente lineal
• Dibujar un rectángulo con SVG
• Círculos con borde 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).

Para poderlo llevar a cabo tendremos que utilizar la etiqueta <LINE/>. La cual no tiene mucho misterio ya que sus atributos representas las coordenadas x1,y1 e x2,y2 origen y destino de la línea. Quedándonos el siguiente código:

<LINE x1="10" y1="10" x2="100" y2="100"/>

Una última cosa que haremos será el dotar a la línea de un ancho mayor. En este caso utilizamos el atributo stroke-width y stroke para indicarle su color (el rojo).

<LINE stroke-width="5" stroke="red"/>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Círculos con borde en SVG
• Dibujando multiples lineas en SVG
• Dibujando un polígono: triángulo
• Dibujar una elipse en SVG
• Gradiente lineal vertical

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.

Una vez tengamos nuestro circulo, simplemente tendremos que "abusar" de dos atributos:

• stroke: indica el color del borde.
• stroke-width: indica el ancho del borde.

Al final tendremos el siguiente código:

<circle cx="100" cy="100" r="50" stroke="blue"
   stroke-width="10" style="fill:cyan;"/>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Dibujar una línea en SVG
• Dibujar un círculo en SVG
• Dibujando multiples lineas en SVG
• Dibujando un polígono: triángulo
• Imagenes con borde