Círculo con Borde en SVG
Modificación de las propiedades de un círculo en SVG para definirle un Borde. Manejo de los atributos stroke y stroke-width...
sigue leyendo

Círculo con gradiente lineal
Cómo hacer un gradiente lineal en SVG. Este ejemplo intenta mostrar cómo hacer un gradiente lineal que pase del rojo al naranja dentro de un círculo...
sigue leyendo

Dibujando Múltiples Líneas
El uso de las polilíneas en SVG. En este ejercicio se presenta el reto gráfico de pintar una especie de casa con una X en medio sin levantar el lápiz del papel, resuelto con las...
sigue leyendo

Dibujando un Círculo
Creación de un círculo en SVG mediante la etiqueta CIRCLE. En este documento se explica además el atributo r, que nos indica el radio que va a tener el círculo...
sigue leyendo

Dibujando un polígono: Triángulo
Aprende a crear un polígono, en este caso un triángulo, utilizando el lenguaje SVG mediante el elemento polygon. Para ello lo único que necesitamos es conocer los vértices...
sigue leyendo

Dibujando un rectángulo
Crear un rectángulo con el lenguaje SVG es algo bastante fácil, ya que el rectángulo es una de las figuras estándar de dicho lenguaje. Este documento te enseña a...
sigue leyendo

Dibujando una elipse
Utilización de la etiqueta "Ellipse" para dibujar elipses en SVG. Lo que se explicará en este tutorial es cómo dibujar una elipse de 50x100 de color rojo...
sigue leyendo

Gradiente como borde
Aunque no es un uso muy normal, podemos utilizar un gradiente como relleno de borde, de cualquier figura básica. El efecto resultante es al menos, curioso...
sigue leyendo

Gradiente Lineal Angular
Creación de un gradiente lineal angular. Cuando se habla de angular, lo que se quiere decir es que el vector que representa la transición de los colores tiene un cierto ángulo...
sigue leyendo

Gradiente Lineal Vertical
Definición de un gradiente lineal vertical. Un gradiente lineal es una transición de colores a lo largo de un vector. En este ejemplo se consigue igualando las coordenadas x1, x2 y...
sigue leyendo

Hola Mundo en SVG
Cómo utilizar la etiqueta "text" para poder poner el texto Hola Mundo dentro de un gráfico vectorial SVG. Resulta un poco extraño explicar un ejemplo de cómo hacer un...
sigue leyendo

Mi primer gráfico SVG
Pasos a dar para crear tu primer gráfico SVG SVG o Scalable Vector Graphics nos permite definir gráficos basados en texto y no sólo eso, sino que ese texto (o información)...
sigue leyendo

SVG: gráficos e interactividad en la Web
Scalable Vector Graphics es un lenguaje basado en XML con el cual podemos crear gráficos e imágenes que permiten al usuario interactuar con la web en la que aparecen. Este curso te...
sigue leyendo