Introducción

En el pasado, el único formato de imagen compatible con todos los navegadores era el GIF, un archivo de imagen desarrollado por CompuServe. Luego vino el formato de imagen JPEG, que ofrecía gran compresión sin pérdida de detalles, con un tamaño es muy pequeño en comparación con el formato GIF.

Después de algún tiempo se empezaron a emplear en HTML avanzados gráficos vectoriales bidimensionales de vectores. Entre muchos formatos competidores que fueron enviados al W3C, SVG fue finalmente desarrollado en 1999

¿Qué es SVG?

SVG significa Scalable Vector Graphics, es un formato de imagen vectorial basado en XML. A diferencia de los formatos de archivo de imagen GIF, PNG y JPEG, SVG es escalable, lo que significa que no importa cómo se agrande el archivo de imagen, para mantener la calidad, que seguirá siendo buena.

Como un archivo XML, SVG se puede crear, personalizar e integrar con otros estándares W3C como DOM y XSL usando cualquier editor de textos. Las imágenes SVG también se pueden crear visualmente con dibujos o programas vectoriales como Adobe Illustrator.

¿Por qué usar SVG?

Se puede crear y editar con cualquier editor de textos
Se puede imprimir con una resolución de alta calidad
Se puede utilizar para animaciones
Es una recomendación del W3C
Funciona con otros estándares W3C como DOM
Se ve muy bien en pantallas retina
Escala a cualquier tamaño sin mirar hacia fuera

SVG en páginas HTML

SVG puede ser fácilmente insertado en HTML usando etiquetas SVG. Por ejemplo:

<svg width=" " height=" ">
[código aquí..]
</svg>

Como se puede ver, SVG tiene sus propias etiquetas. SVG debe tener una anchura y una altura para contener un elemento. A continuación se muestran elementos que se pueden utilizar en SVG.

Circulo
Rectángulo
Elipse
Línea
Polilínea
Polígono
Ruta
Texto

Creación de un círculo en SVG

Se utilizala etiqueta circle. He aquí un ejemplo.

<svg height="40mm" width="40mm">
    <circle cx="20mm" cy="20mm" r="15mm" style="fill: blue; stroke: black; stroke-width: 1mm;" />
</svg>

La imagen resultante de circle en SVG se verá así:


En este ejemplo se utilizó la etiqueta circle y luego se indicaron las coordenadas cx y cy que determinarán el centro del círculo. A continuación, se pone un valor de 15 mm para el radio, que define la longitud de un segmento de línea desde su centro hasta su perímetro. Finalmente, se añaden los estilos para el color de relleno, el color de trazo y el ancho de trazo, que son autoexplicativos.

Creación de un rectángulo en SVG

El rectángulo se puede ejecutar mediante la etiqueta rect siendo posible dibujar varios tipos de altura y ancho.

<svg height="20mm" width="90mm">
    <rect width="45mm" height="15mm" rx="1mm" ry="1mm" style="fill: yellow; stroke: green; stroke-width: 1mm;"/>
</svg>

La imagen Rectángulo SVG resultante se verá así:


Mediante la etiqueta rect se define el ancho y la altura del rectángulo. Luego se añaden añaden rx y ry, que rodean el borde del rectángulo. Se pueden quitar estos dos (rx y ry) si se desea tener bordes en ángulo recto. A continuación se añaden los estilos de color de relleno, color de trazo y ancho de trazo.

Creación de una elipse en SVG

la ellipse en SVG se puede ejecutar utilizando la etiqueta elipse. Las elipses no necesitan tener alto y ancho iguales y, a diferencia del círculo SVG, el radio (cx y cy) es diferente.

<svg height="30mm" width="100mm">
   <ellipse cx="30mm" cy="15mm" rx="15mm" ry="5mm" style="fill:red; stroke:green;stroke-width:2mm"/>
</svg>

La imagen resultante de Ellipse SVG se verá así:
Los cx y cy definen el centro de la elipse mientras que rx y ry definen el radio de la elipse. Como se puede ver, el rx describe la amplitud de la elipse mientras que el ry describe lo alta que será. A continuación se indican los estilos de color de relleno, color de trazo y ancho de trazo.

Creación de una línea en SVG

La línea SVG se puede ejecutar usando la etiqueta line.

<svg height="40mm" width="100mm">
    <line x1="20mm" y1="10mm" x2="60mm" y2="30mm" style="stroke:#000; stroke-width:5mm" />
</svg>

La imagen resultante de la línea SVG se verá así:
En este ejemplo, x1 (eje x) y y1 (eje y) definen el punto de inicio de la línea. Mientras que x2 (eje x) y y2 (eje y) definen el punto final de la línea. Usando el atributo de estilo, con color de trazo negro y ancho de trazo de 5mm.

Creación de una polilínea en SVG

Una polilínea en SVG se puede ejecutar utilizando la etiqueta de polyline. Se utiliza para dibujar formas que se componen de líneas rectas.

<svg height="70mm" width="100mm">
   <polyline points="60,50 150,120 100,220 200,170" style="fill:none;stroke:black;stroke-width:3mm" />
</svg>

La imagen resultante de polyline en SVG se verá así:
Utilizando x (eje x) e y (eje y), puede configurar cada uno de los puntos de las líneas para crear la forma específica que se desee. Como se puede ver aquí hay cuatro puntos de montaje unidos por líneas. También se indica el trazo en azul y un ancho de 3mm.

Creación de un polígono en SVG

Un polígono en SVG se puede realizar utilizando la etiqueta polygon. Se emplea para dibujar formas que se componen de líneas rectas.

<svg height="70mm" width="100mm">
    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" style="fill:cyan;stroke:red;stroke-width:1mm" />
</svg>

La imagen resultante de polygon en SVG se verá así:
En el polígono SVG, los puntos son definidos por los ejes x e y para cada lado del polígono desde el último punto hasta el primero. En este ejemplo, se ha creado un hexágono con seis lados. Hay seis puntos que se conectan, definidos por los ejes x e y. Luego se pone el color de relleno, cyan, seguido por el color de trazo, rojo, y el ancho de trazo de 1mm.

Creación de trayectorias en SVG

La trayectoria en SVG se puede ejecutar utilizando la etiqueta path. Este elemento dibujará trayectorias que consisten en curvas, líneas y arcos. Entre todos los elementos SVG, este es uno de los más funcionales pero más difíciles de aprender y manipular. Path utiliza los siguientes comandos:

M mover a
L línea a
V línea vertical a
H línea horizontal a
C curva a
S curva suave a
T curva cuadrática de Bézier
A arco elíptico
Z cerrar ruta

Las letras mayúsculas significan que la posición se colocará absoluta mientras las letras minúsculas significan el posicionamiento relativo. Por ejemplo:

<svg height="200" width="300">
<path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" />
</svg>

La imagen SVG de la ruta resultante se verá así:
En el código anterior, se puede ver que se usa la letra d. Este atributo d siempre será un comando mover. A continuación, M que significa mover a. Antes de poder dibujar algo, se debe mover el cursor virtual a la ubicación de inicio. Por lo tanto, para este ejemplo, se lleva el eje x a 30 y el eje y a 40. La curva comienza en 140, -30 como punto de partida tangente. A continuación la curva apunta hacia la derecha con los puntos 180, 90 y termina con 20, 160. Para finalizar la trayectoria, se crea una línea con los puntos 120 y 160.

Creación de texto en SVG

Los SVG de texto pueden ejecutarse utilizando la etiqueta incluida con la etiqueta de texto. Este elemento se utiliza para dibujar texto en una imagen SVG.

<svg height="30mm" width="140mm">
  <text x="5mm" y="10mm" fill="blue" font-size="8mm">ESto es una muestra de texto en SVG </text>
</svg>

La imagen SVG de texto resultante se verá así:
En este ejemplo, se establece la posición del eje x del texto en 5mm. Esto colocará el texto 5 mm desde la izquierda mientras se configura el eje y en 10mm, lo que colocará el texto 10 mm desde arriba. A continuación, se indica el color de relleno rojo y se establece el tamaño de fuente a 8mm. Esto exhibirá el texto "Esto una muestra de texto en SVG"