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:

• Rectángulos y cuadrados
• Círculos
• Elipses
• Líneas
• Polígonos
• Polilínea
• Path
• Texto

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:

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:

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: