¿Qué es un archivo SVG? Explicación de etiquetas e imágenes SVG

SVG

SVG o Scalable Vector Graphics 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 .svgarchivo 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í:

La muestra también incluye un versionatributo. El versionatributo es opcional pero se recomienda para cumplir con las especificaciones XML.

Esta muestra no mostrará nada, simplemente estableció una ventana gráfica. Puede agregar atributos heighty widthpara establecer un tamaño de visualización para la ventana gráfica, esto esencialmente establece un lienzo para que pueda trabajar.

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

   SVG Text is browser readable!        

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

En la svgetiqueta de apertura agregamos un atributo de ancho para establecer el ancho de la ventana gráfica al 100% del ancho del contenedor, puede usar porcentajes o anchos de píxeles. La etiqueta svg de apertura también tiene un viewboxatributo que define una ventana a través de la cual los elementos de su svg son visibles, en este caso, el cuadro de visualización se extiende desde (0,0) hasta (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 primera etiqueta nueva es la etiqueta que 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 fillatributo establece el color de relleno de la forma.

A continuación, definimos un círculo u óvalo con la etiqueta. La muestra define un círculo centrado en (240,60) con un radio de 50 unidades. Los atributos strokey stroke-widthestablecen un color de trazo y un tamaño para el trazo.

Puede agregar texto al gráfico con la textetiqueta. El texto de muestra 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 del gráfico, pero el navegador y los bots web aún lo pueden leer.

Cuando desee aplicar los mismos atributos o estilos CSS a varios elementos SVG, puede agruparlos con la etiqueta. Los atributos asignados a la etiqueta, como el strokeatributo en el ejemplo, se aplicarán a todos los elementos dentro del grupo. En este caso tres elementos.

El elemento define una ruta vectorial en la ventana gráfica. La ruta está definida por el datributo. 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 lienzo

Los gráficos de lienzo se pueden dibujar en un

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

Before canvas .

After canvas .

var canvas = document . querySelector (" canvas ") ; var context = canvas . getContext ("2 d ") ; context . fillStyle = " red "; context . fillRect (10 , 10 , 100 , 50) ;

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 de resultados contiene una matriz de objetos que representan las respuestas de la encuesta.

var results = [ { name : " Satisfied " , count : 1043 , color : " lightblue "} , { name : " Neutral " , count : 563 , color : " lightgreen "} , { name : " Unsatisfied " , count : 510 , color : " pink "} , { name : " No comment " , count : 175 , color : " silver "} ];

Para dibujar un gráfico circular, dibujamos varios 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.

   var cx = document . querySelector (" canvas ") . getContext ("2 d ") ; var total = results . reduce ( function ( sum , choice ) { return sum + choice . count ; } , 0) ; // Start at the top var currentAngle = -0.5 * Math . PI ; results . forEach ( function ( result ) { var sliceAngle = ( result . count / total ) * 2 * Math . PI ; cx . beginPath () ; // center =100 ,100 , radius =100 // from current angle , clockwise by slice ' s angle cx . arc (100 , 100 , 100 , currentAngle , currentAngle + sliceAngle ); currentAngle += sliceAngle ; cx . lineTo (100 , 100) ; cx . fillStyle = result . color ; cx . fill () ; }) ; 

Esto dibuja el siguiente cuadro:

Soporte del navegador

La compatibilidad del navegador con SVG está disponible en todos los navegadores modernos. Hay algunos problemas con escalamiento en IE 9 a 11 IE sin embargo pueden ser superadas con el uso de la width, height, viewbox, y CSS.

Editores

  • Vectr: herramienta web y de escritorio para crear y editar gráficos SVG, sin cargo

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, le permite cambiar el tamaño de una imagen sin pérdida de calidad y un peso particularmente ligero. Como formato XML, le permite beneficiarse de todo el poder de JavaScript y especialmente CSS.

Más información sobre SVG:

  • Por qué debería usar imágenes SVG
  • Lo que necesita saber para trabajar con SVG en VS Code
  • Cómo hacer que su elegante botón SVG sea accesible