Etiqueta SVG para dibujos vectoriales

Una de las principales actividades en programación gráfica es dibujar programando. Igual que el álgebra representa por escrito figuras geométricas, la programación permite hacer esto con otros idiomas que entienden los ordenadores.

Para ello podemos utilizar las etiquetas "svg" y "canvas".

Vamos a explicar la etiqueta "svg", siguiendo el siguiente tutorial. SVG son las siglas de Scalable Vector Graphics. Los vectores escalables, se recalculan en cada zoom o movimiento del ratón, por lo que siempre se verán nítidos, a diferencia de las imágenes ráster o de mapas de bits, cuya visualización depende de la resolución. Aquí se trata de vectores, funciones matemáticas y no pierden nitidez.

La etiqueta <svg> crea un espacio de dibujo, un lienzo, dentro de la página, y permite dibujar figuras vectoriales en HTML5. La escribimos dentro del Body. Entre las etiquetas de apertura y cierre de <svg> metemos otras etiquetas de las figuras que queremos representar, cada una con sus características, como vemos en la siguiente imagen:

que en el navegador se verá como sigue:

Elemento Ruta (svg Path)

El elemento <ruta> se utiliza para definir una trayectoria. Los comandos siguientes modifican la trayectoria:
M  = moveto
L   = lineto
H   = horizontal lineto
V   = line to verticales
C   = curveTo
S   =  curveTo suave
Q   =  curva cuadrática de Bézier
T   = suave curveTo cuadrática de Bézier
A   = arco elíptico.
Z   = closePath.

Por ejemplo:

Las curvas Bézier se utilizan para modelar curvas suaves que se pueden ampliar de forma indefinida. En general se seleccionan dos puntos extremos y uno o dos puntos de control. Si sólo hay un punto de control se llama curva "cuadrática" .
En la imagen siguiente vemos en azul una curva Bezier con A y C como puntos inicial y final y B punto de control.