SVG

SVG o Gráficos Vectoriales Escalables es un estándar web para definir gráficos basados en vectores en páginas web. Basado en XML, el estándar SVG proporciona marcado para describir rutas, formas y texto dentro de una ventana gráfica. El marcado se puede incrustar directamente en HTML para mostrarlo o guardarlo en un archivo .svg e insertarlo como cualquier otra imagen.

Puede escribir SVG a mano, pero se pueden diseñar gráficos más complicados en editores de gráficos vectoriales como Illustrator o InkScape y exportarlos a archivos o código SVG.

Conceptos básicos de SVG

Los desarrolladores inician un gráfico <svg> con la etiqueta  y el espacio de nombres XML así:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

El ejemplo incluye un atributo de version. El atributo version es opcional, pero se recomienda para cumplir con las especificaciones XML.

Este ejemplo no muestra nada, simplemente establece una ventana gráfica. Puede agregar los atributos height y width para establecer un tamaño de visualización para la ventana gráfica, esto esencialmente establece un canvas para que pueda trabajar.

Con una ventana gráfica en su lugar, puede agregar gráficos básicos, texto y elementos de ruta.

<svg
     version="1.1"
     width="100%"
     viewbox="0 0 600 300"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="#f7b2c1" />
  <circle cx="240" cy="60" r="50" fill="#c1b2f7" stroke="#b2c1f7" stroke width="15"/>
  <text x="450" y="70" font-size="20" text-anchor="middle">SVG Text es legible por el navegador!</text>
  <g stroke="#b2c1f7"> <!-- g es para el grupo -->
    <path stroke-width="2" d="M10 170 l590 0" />
    <path stroke-width="4" d="M10 190 l590 0" />
    <path stroke-width="6" d="M10 210 l590 0" />
  </g>  
</svg>  

Puedes ver la salida y jugar con el código en este codepen.

En la etiqueta svg de apertura agregamos un atributo width para establecer el ancho de la ventana gráfica al 100% del ancho del contenedor, puedes usar porcentajes o anchos de píxeles. La etiqueta svg de apertura también incluye el atributo viewbox que define una ventana a través de la cual los elementos de su svg son visibles, en este caso, el viewbox se extiende desde (0,0) a (600,300). En el espacio SVG, el eje X comienza con cero a la izquierda y aumenta a la derecha; el eje Y comienza con cero en la parte superior y aumenta hacia la parte inferior.

La etiqueta <rect /> define un rectángulo en la ventana gráfica SVG. En este caso, definimos un cuadrado que está a 10 unidades de la parte superior e izquierda y 100 unidades de alto y ancho. El atributo fill establece el color de relleno de la forma.

A continuación, definimos un círculo u óvalo con la etiqueta <circle />. El ejemplo define un círculo centrado en (240,60) con un radio de 50 unidades. Los atributos stroke and stroke-width establecen un color de trazo y un tamaño para el trazo.

Puede agregar texto al gráfico con la etiqueta text. El texto de ejemplo está anclado desde la mitad del texto hasta un punto en (450, 70) y tiene un tamaño de fuente de 20 unidades. Lo bueno del texto en SVG es que se escalará con el resto de su gráfico, pero el navegador y los bots web aún lo pueden leer.

Cuando desees aplicar los mismos atributos o estilos CSS a varios elementos SVG, puedes agruparlos con la etiqueta <g>. Los atributos asignados a la etiqueta <g>, como el atributo strokeel ejemplo, se aplicarán a todos los elementos dentro del grupo. En este caso, tres <path /> elementos .

El elemento <path /> define una ruta vectorial en la ventana gráfica. La ruta está definida por el atributo d. En el primer ejemplo, la definición dice "muévase a la coordenada absoluta (10, 170) y dibuje una línea a las coordenadas relativas 590 en la dirección X y 0 en la dirección Y".
Los siguientes comandos se pueden utilizar para crear su ruta:
M = moverse a; L = línea a; H = línea horizontal a; V = línea vertical a; Z = cerrar ruta; C = curva (bezier cúbica) a; S = curva suave a; Q = curva bezier cuadrática a; T = curva bezier cuadrática suave a; A = arco

El elemento canvas

Los gráficos del canvas se pueden dibujar en un

Se crea un contexto a través del método getContext en el

<p>Antes de canvas</p>
<canvas width ="120" height ="60"></canvas>
<p>Después canvas</p>
<script>
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.fillRect(10, 10, 100, 50);
</script>

Después de crear el objeto de contexto, el ejemplo dibuja un rectángulo rojo de 100 píxeles de ancho y 50 píxeles de alto, con su esquina superior izquierda en las coordenadas (10,10).

Dibujar un gráfico circular

La variable resultados contiene una serie de objetos que representan las respuestas de la encuesta.

var resultados = [
{ nombre : "satisfecho", cuenta: 1043, color: "lightblue"},
{ nombre : "Neutral", cuenta: 563, color: "lightgreen"},
{ nombre : "Insatisfecho", cuenta: 510, color: "pink"},
{ nombre : "No comentario", cuenta: 175, color: "silver"}
];

Para dibujar un gráfico circular, dibujamos una serie de sectores circulares, cada uno formado por un arco y un par de líneas en el centro de ese arco. Podemos calcular el ángulo que toma cada arco dividiendo un círculo completo (2 π) por el número total de respuestas y luego multiplicando ese número (el ángulo por respuesta) por el número de personas que eligieron una opción determinada.

<canvas width ="200" height ="200"> </canvas>
<script>
    var cx = document.querySelector("canvas").getContext("2d");
    var total = resultados.reduce(function (suma, opcion) {
    return suma + opcion.cuenta;
    }, 0);

    // Start at the top

    var anguloActual = -0.5 * Math.PI;
    resultados.forEach (function (resultado) {
    var anguloTejada = (resultado.cuenta / total) * 2 * Math.PI;
    cx.beginPath() ;
    // center = 100, 100, radius = 100
    // del angulo actual, en el setido del reloj por el angulo de la tajada
    cx.arc(100, 100, 100, anguloActual, anguloActual + anguloTejada);
    anguloActual += anguloTejada;
    cx.lineTo(100, 100);
    cx.fillStyle = resultado.color;
    cx.fill() ;
    });
</script>

El código anterior dibuja el siguiente gráfico:

CTDvkA8UwAAdJg5

Compatibilidad de los navegadores

La compatibilidad del navegador con SVG está disponible en todos los navegadores modernos. Hay algunos problemas con el escalado en IE 9 hasta IE 11, sin embargo, se pueden solucionar con el uso de width, height, viewbox y CSS.

Editores

  • Vectr - herramienta web y de escritorio para crear y editar gráficos SVG, sin costes.

Herramientas para crear SVG

Hay pocas herramientas disponibles para crear SVG en forma de programa de dibujo.

  • Inkscape - Es una herramienta de código abierto para el dibujo vectorial de última generación con una interfaz gráfica fácil de usar.
  • Adobe Illustrator - Adobe Illustrator es una herramienta comercial para imágenes vectoriales

Para obtener más herramientas, consulte la lista W3C de herramientas que admiten SVG

Por qué debería usar SVG

Como formato de imagen vectorial, te permite cambiar el tamaño de una imagen sin pérdida de calidad y un peso particularmente ligero. Como formato XML, te permite beneficiarte de todo el poder de JavaScript y especialmente CSS.

Más información sobre SVG:

Traducido del artículo - What Is an SVG File? SVG Image and Tags Explained