Dibujando nuestro propios SVG en HTML (parte 1)

11-05-2015 - Andrés Cruz

Inclusive con HTML se ha hecho posible dibujar SVGs por sus siglas Scalable Vector Graphics; un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones.

SVG y los diseños adaptativos

Los SVG resultan en recursos valiosos al momento de hacer un site Responsive al permitir su adaptación a cualquier tamaño sin perder calidad (sin pixelarse) y en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento <svg>, definir estilo y sus atributos.

Dibujando figuras geométricas SVG

Con SVG es posible dibujar una serie de formas geométricas o primitivas las cuales son:

Muchas formas se pueden dibujar empleando las figuras anteriores e inclusive se pueden dibujar múltiples figuras de una vez y posicionarlas en donde queramos; en esta primera entrada veremos cómo dibujar:

  1. Rectángulos y cuadrados
  2. Círculos
  3. Elipses
  4. Líneas

Quedará para futuras entradas trabajar con el resto de las figuras geométricas, así como sus atributos, estilos e incluso es posible aplicarl filtros y gradientes a las figuras SVGs dando una gran cantidad de opciones para hacer gráficos escalables simples y compuestos.

Dibujando nuestras primeras figuras SVG

Para dibujar cualquier figura es necesario declarar el elemento <svg> como padre de la mismas; es decir:

	<svg>
		<!-- Mis figuras -->
	</svg>

Por ejemplo, para dibujar un círculo bastaría con emplear el siguiente HTML:

	<svg>
	        <circle cx="40" cy="40" r="40" fill="red"/>
	</svg>

A estos elementos se le pueden modificar sus propiedades como tamaño, borde, forma, color, entre otros y esto es empleando atributos (algunos únicos para cada primitiva) o CSS.

Dibujando Rectángulos y cuadrados SVG

Primero veremos cómo dibujar un rectángulo y un cuadrado; para lo cual se emplean la misma etiqueta <rect>:

		
	<svg>
		<rect x="40%" y="5%" rx="5" ry="5" width="300" height="100" id="r"></rect>
		Su navegador no soporta SVG :/
	</svg>

Más un poco de CSS:

		
	rect#r {
		fill:rgba(204, 0, 0, 0.6);
		stroke-width:2;
		stroke:rgba(204, 0, 0, 1);
	}

Obtenemos:

Su navegador no soporta SVG :/

Para crear un cuadrado se definen el mismo valor para el ancho y largo de la figura; es decir:

    <svg>
        <rect x="40%" y="5%" width="100" height="100" rx="15" ry="15" id="c"></rect>
        Su navegador no soporta SVG :/
    </svg>

Más un poco de CSS:

		
	rect#c {
		fill:rgba(204, 204, 0, 0.6);
		stroke-width:10;
		stroke:rgba(204, 204, 0, 1);
	}

Obtenemos:

Su navegador no soporta SVG :/

Propiedades y atributos del rectángulo y cuadrado SVG

Para ambos ejemplos, se emplean los siguientes propiedades CSS:

  • fill: Define el color de la figura.
  • stroke-width: Define el ancho de los bordes.
  • stroke: Define el color del borde.

También se emplean algunos atributos como lo son:

  • x: Define el desplazamiento desde la izquierda de la figura.
  • y: Define el desplazamiento desde arriba de la figura.
  • rx y ry: Define el redondeo de los bordes.

Dibujando un círculo SVG

De nuevo, para dibujar un círculo se emplea la etiqueta creado para este propósito llamado <circle>:

    <svg>
        <circle cx="40%" cy="50" r="40"></circle>
        Su navegador no soporta SVG :/
    </svg>

Más un poco de CSS:

		
    circle{
        fill:rgba(204, 204, 204, 0.6);
        stroke-width:10;
        stroke:rgba(204, 204, 204, 1);
    }

Obtenemos:

Su navegador no soporta SVG :/

Se emplean un conjunto de atributos los cuales explicaremos a continuación:

  • Los atributos cx y cy definen las coordenadas del centro del círculo; es decir, en donde se empezará a dibujar el círculo dentro del elemento SVG.
  • El atributo r define el radio del círculo.

Dibujando una elipse SVG

Para las elipses también existe un elemento definido llamado <ellipse>:

    <svg>
        <ellipse cx="40%" cy="50" rx="80" ry="40"></ellipse>
        Su navegador no soporta SVG :/ 
    </svg>
		
    ellipse{
        fill:rgba(0, 204, 204, 0.6);
        stroke-width:10;
        stroke:rgba(0, 204, 204, 1);
    }

Obtenemos:

Su navegador no soporta SVG :/

En donde los atributos rx y ry definen el radio horizontal y vertical respectivamente.

Dibujando una línea SVG

La figura más simple que podemos dibujar es una simple línea que al igual que los casos anteriores, existe un elemento definido para tal tarea llamado <line>:

    <svg>
        <line x1="0" y1="0" x2="100%" y2="100%"></line>
        Su navegador no soporta SVG :/
    </svg>
		
    line{
        stroke-width:2;
        stroke:rgba(0, 204, 204, 1);
    }

En donde los atributos x1 y y1 definen el punto de inicio y los atributos x2 y y2 definen el punto de fin.

Obtenemos:

Su navegador no soporta SVG :/

Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 5 días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!