HTML5 SVG CAN Escala gráficos vectoriales

SVG CAN ZOAD Vector Graphics (gráficos vectoriales escalables) es un formato gráfico basado en el lenguaje de etiqueta escalable (XML) para describir los gráficos vectoriales de dos dimensiones. SVG es un nuevo formato gráfico vectorial de dos dimensiones formulado por W3C, y también es un estándar de gráficos de vector de red en la especificación. SVG sigue estrictamente la sintaxis XML y describe el contenido de la imagen en el lenguaje descriptivo del formato de texto.

SVG se refiere a gráficos vectoriales escalables

SVG se usa para definir gráficos basados ​​en vectores para redes

SVG usa formato XML para definir gráficos

Las imágenes SVG no perderán la calidad de los gráficos al zoom o cambiarán el tamaño

SVG es el estándar de la Alianza de la Red Wanwei

Los estándares SVG y W3C como DOM y XSL son un conjunto

SVG es un lenguaje que describe gráficos 2D en XML.

SVG se basa en XML, lo que significa que cada elemento en SVG DOM está disponible. Puede agregar un procesador de eventos JavaScript a un determinado elemento.

En SVG, cada gráfico dibujado se considera un objeto. Si el atributo del objeto SVG cambia, el navegador puede reproducir automáticamente los gráficos.

Características:

Resolución no dependiente

Procesador de eventos de apoyo

La aplicación más adecuada con grandes áreas de representación (como Google Map)

La alta complejidad ralentizará la representación (la aplicación de cualquier DOM excesiva no es rápida))

No es adecuado para aplicaciones de juegos

Canvas dibuja gráficos 2D a través de JavaScript.

El lienzo se representa por píxeles.

En el lienzo, una vez que se dibuja el gráfico, no continuará recibiendo la atención del navegador. Si la ubicación cambia, toda la escena también debe ser rehacer, incluido cualquier objeto que pueda haber sido cubierto por gráficos.

Características:

Dependencias

No admitir el procesador de eventos

Capacidad de representación de texto débil

Puede guardar la imagen de resultado en el formato .png o .jpg

El juego intensivo más adecuado, muchos de ellos se pintarán con frecuencia

Ejemplo simple:

 <svg width = 100% altura = 100%> <círculo cx = 300 cy = 60 r = 50 trazo =#ff0 stroke-width = 3 relleno = rojo /> </svg>

En el pasado, los gráficos que se muestran en el navegador, como JPEG, GIF, etc., fueron todos los gráficos. En la imagen de rejilla, el archivo de imagen define el valor de color de cada píxel en la imagen. El navegador necesita leer estos valores y hacer las acciones correspondientes. Esta imagen tiene una fuerte capacidad de reproducción, pero parecerá insuficiente en algunos casos. Por ejemplo, cuando el navegador se muestra en diferentes tamaños, el borde de la irregularidad generalmente se genera. Además, la animación para el mapa de bits se limita a la animación que genera el tipo de libros rodantes, es decir, muestra rápida y continuamente imágenes separadas.

El diagrama del vector se especifica para determinar las instrucciones requeridas para cada valor de píxel en lugar del valor especificado en sí, lo que supera parte de estas dificultades. Por ejemplo, los gráficos vectoriales ya no proporcionan valores de píxeles para un diámetro de una pulgada, pero dígale al navegador que cree un círculo de diámetro de una pulgada y luego deje que el navegador (o enchufe -in) haga el resto. Esto elimina muchas restricciones en los gráficos de rejilla; Si la imagen debe mostrarse tres veces el tamaño normal, entonces el navegador se usa para dibujar un círculo de acuerdo con el tamaño correcto sin tener que realizar el método de inserción común de la imagen de rejilla. Del mismo modo, las instrucciones recibidas por el navegador pueden ser más fáciles de vincular a las fuentes de información externas (como la aplicación y la base de datos).

En el sistema HTML, la tecnología de vectorización más utilizada son los elementos de lona recién agregados SVG y HTML5. Ambas tecnologías admiten mapas de vectores de dibujo y rejilla.

Los gráficos de vector de escala (SVG (SVG) es un lenguaje que describe los gráficos de dos dimensiones (SVG sigue estrictamente la sintaxis XML). SVG permite tres tipos de objetos gráficos: gráficos vectoriales (como rutas compuestas de curvas lineales y lineales), imágenes y textos. Los objetos gráficos (incluido el texto) se pueden empacar, estilizar, transformar y combinarse en los objetos presentados previamente. Los conjuntos de funciones SVG incluyen conversión anidada, rutas de corte, máscaras alfa y objetos de plantilla.

El dibujo SVG es interactivo y dinámico. Por ejemplo, puede usar scripts para definir y activar animaciones. Esto es muy poderoso en comparación con Flash. Flash es un archivo binario, que es más difícil de crear y modificarlo. SVG es un archivo de texto, y la operación dinámica es bastante fácil. Además, SVG proporciona directamente elementos relacionados para completar la animación, que es muy conveniente de operar.

SVG es compatible con otros estándares web y admite directamente el modelo de objeto de documento DOM. Esto también es muy poderoso en comparación con el lienzo en HTML5 (tenga en cuenta que aquí, el SVG también usa un lienzo similar para mostrar los gráficos SVG. Encontrará que muchas características son un poco similares al lienzo de HTML5; en el artículo si está en el artículo. No se afirma claramente que es el lienzo de SVG, se refiere al elemento de lienzo en HTML5). Por lo tanto, puede ser conveniente usar el script para lograr muchas aplicaciones avanzadas de SVG. Y los elementos gráficos de SVG básicamente admiten eventos estándar en DOM. Se puede asignar una gran cantidad de programas de procesamiento de eventos (como On Mouseover y OnClick) a cualquier objeto gráfico SVG. Aunque la velocidad de representación de SVG no es tan buena como el elemento de lona, ​​es muy flexible en la operación DOM.

Se puede decir que SVG es un protocolo o un idioma;

SVG no es algo en HTML5, pero también es una de las técnicas técnicas en la página, y vamos a ponerlo en este tema.

En comparación con otros formatos de imagen, SVG tiene muchas ventajas (muchas ventajas provienen de las ventajas del mapa vectorial):

• El archivo SVG es Pure XML, que puede ser leído y modificado por muchas herramientas (como el bloc de notas).

• En comparación con las imágenes JPEG y GIF, SVG es más pequeño y más comprimido.

• SVG es escalable y se puede ampliar cuando la calidad de la imagen disminuye.

• El texto en la imagen SVG es opcional, y también está disponible (adecuado para hacer mapas).

• SVG puede funcionar con la tecnología Java.

• SVG es el estándar de apertura.

El principal competidor de SVG es Flash. En comparación con Flash, la mayor ventaja de SVG es que es compatible con otros estándares (como XSL y DOM) y es conveniente de operar, mientras que Flash es una tecnología privada impopular. Otros, como formatos de almacenamiento y gráficos dinámicos, SVG también ocupa una gran ventaja.

El navegador que admite HTML5 y SVG no es el foco de discusión aquí. Para los navegadores que admiten directamente SVG, SVG utiliza principalmente dos lados y dos maneras.

Inner United a HTML

SVG es el elemento HTML estándar, simplemente escríbelo directamente a HTML.

 <? Xml versión = 1.0 encoding = utf-8?> <! DOCTYPE HTML> <html> <fead> <!-<meta content = text /html; -> <title> Mi primera página de SVG </title> </head> <body> <svg xmlns = http://www.w3.org/2000/svg versión = 1.1 width = 200px Height = 200px> <st> x = 0 y = 0 ancho = 100% altura = 100% relleno = ninguno trazo = negro/> <círculo cx = 100 cy = 100 r = 50 estilo: negro; > </body> </html>

Tenga en cuenta que el comienzo de la declaración XML al principio, y el espacio de nombre de SVG, XMLNS, versión de versión, etc., considerando principalmente el problema de la compatibilidad;

Archivo svg independiente

SVG independiente se refiere a proporcionar un formato de archivo gráfico vectorial al expandir la extensión del archivo SVG. Este archivo SVG está incrustado en el navegador.

1. El archivo/página SVG independiente, la plantilla definida es básicamente como la siguiente:

 <svg width = 100% altura = 100%> <!-Svg Markup aquí .-> </svg>

Guarde dichos archivos de texto en archivos con SVG como una extensión, como Sun.svg.

2.html hace referencia al archivo SVG externo.

Use elementos de objeto o img para incrustar los gráficos SVG, por ejemplo, el siguiente ejemplo:

 <! Implemente el código de retroceso aquí, o muestre un mensaje:-> <p> Su navegador no es compatible con la actualización de un navegador moderno. = 10 ancho = 30 altura = 30 tragamonedas = relleno negro = transparente ancho de trazo = 5/> <rad = 10 rx = 10 ancho = 30 altura = 30 Troke = Black Fill = Transparent Stroke-Width = 5/> <Circle CX = 25 cy = 75 r = 20 tragamonedas = relleno rojo = transparente-width de carrera = 5/> <ellipse cx = 75 rx = 20 ry = 5 s troke = relleno rojo = transparente-width = 5/> <línea x1 = 10 x2 = 50 y1 = 110 y2 = 150 carrera = relleno de naranja = ancho de trazo transparente = 5/> <Poliline Puntos = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 Stroke = Naranja Llena = Width de trazo transparente = 5/> <Points Polygon = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 Stroke = Green Fill = Transparent Soteo Width = 5/> <ruta d = M20, 230 Q40, 205 50, 230 T90, 230 relleno = ninguno trazo = ancho de carrera azul = 5/svg>

Este ejemplo dibuja muchas formas: rectángulos normales, rectángulos con esquinas redondeadas, redondas, ovales, rectas, plegables, polígono y ruta. Estos son elementos gráficos básicos. Aunque hay muchas formas de dibujar un gráfico, como los rectángulos se pueden implementar con RECT, o se pueden implementar con Rath, pero aún debemos tratar de mantener el contenido del SVG corto e inteligente, fácil de leer.