Este artículo presenta principalmente los conceptos básicos de SVG, así como la diferencia entre SVG y Canvas, y finalmente ofrece un ejemplo simple para facilitar a todos para comprender mejor los gráficos de vectores escalables SVG. Recomendado a todos.
Enciclopedia de Baidu:
SVG Scalable Vector Graphics es un formato gráfico basado en el lenguaje de marcado extensible (XML) que describe gráficos vectoriales bidimensionales. SVG es un nuevo formato de gráficos vectoriales bidimensionales formulado por W3C y también es un estándar de gráficos de vectores de red en la especificación. SVG sigue estrictamente la sintaxis XML y usa lenguaje descriptivo en formato de texto para describir el contenido de la imagen, por lo que es un formato de gráficos vectoriales que es independiente de la resolución de imágenes.
¿Qué es SVG?SVG se refiere a gráficos vectoriales escalables (gráficos vectoriales escalables)
SVG se utiliza para definir gráficos vectoriales para redes
SVG define gráficos en formato XML
Las imágenes de SVG no perderán su calidad de gráficos cuando estén ampliadas o cambiadas en tamaño.
SVG es el estándar para la World Wide Web Alliance
SVG es un todo con estándares W3C como DOM y XSL
La diferencia entre lienzo y SVG:SVG
SVG es un idioma que usa XML para describir gráficos 2D.
SVG se basa en XML, lo que significa que cada elemento en el SVG DOM está disponible. Puede adjuntar un controlador de eventos JavaScript a un elemento.
En SVG, cada figura dibujada se trata como un objeto. Si las propiedades del objeto SVG cambian, el navegador puede reproducir automáticamente los gráficos.
Características:
Sin dependencia de resolución
Apoye a los manejadores de eventos
Lo mejor para aplicaciones con grandes áreas de representación (como Google Maps)
La alta complejidad puede ralentizar la representación (no hay una aplicación que use en exceso a DOM)
No es adecuado para aplicaciones de juegos
Lienzo
Canvas dibuja gráficos 2D a través de JavaScript.
El lienzo se renderiza Pixel por Pixel.
En el lienzo, una vez que se dibuja el gráfico, no continúa recibiendo la atención del navegador. Si su posición cambia, toda la escena también debe repintarse, incluido cualquier objeto que pueda haber sido sobrescribido por los gráficos.
Características:
Dependiente de la resolución
Los manejadores de eventos no son compatibles
Capacidad de representación de texto débil
Capacidad para guardar las imágenes de resultados en formato .png o .jpg
Lo mejor para juegos intensivos en imagen, muchos de los cuales son frecuentemente repintados
Ejemplo de SVG:Copiar el código