Introducción a HTML5 SVG 2D 1 - SVG (gráficos de vector escalables)

En el pasado, los gráficos que se muestran en los navegadores, como JPEG, GIF, etc., eran mapas de bits, y estos formatos de imagen se basaron en rásters. En una imagen ráster, el archivo de imagen define el valor de color de cada píxel en la imagen. El navegador necesita leer estos valores y tomar las acciones correspondientes. Este tipo de capacidad de reproducción de imágenes es relativamente fuerte, pero parecerá insuficiente en algunos casos. Por ejemplo, cuando un navegador muestra una imagen en diferentes tamaños, generalmente se genera un borde irregular, y el navegador tiene que insertar o adivinar valores para píxeles que no existen en la imagen original; Esto causará distorsión de la imagen. Además, la animación para mapas de bits se limita a la generación de animaciones de tipo de libro volteadas, es decir, mostrar imágenes individuales de manera rápida y continua.

El diagrama del vector supera algunas de estas dificultades al especificar las instrucciones necesarias para determinar los valores de cada píxel en lugar de especificar los valores en sí. Por ejemplo, en lugar de proporcionar valores de píxeles para un círculo con un diámetro de una pulgada, los gráficos vectoriales le dan al navegador que cree un círculo con un diámetro de una pulgada y luego deje que el navegador (o complemento) haga el resto. Esto elimina muchas limitaciones de los gráficos de trama; Con los gráficos vectoriales, el navegador solo sabe que debe dibujar un círculo. Si la imagen debe mostrarse tres veces el tamaño normal, el navegador simplemente dibuja el círculo al tamaño correcto sin realizar el método de inserción habitual de las imágenes ráster. Del mismo modo, las instrucciones recibidas por el navegador pueden estar más fácilmente vinculadas a fuentes de información externas (como aplicaciones y bases de datos), y para animar la imagen, el navegador solo necesita recibir instrucciones sobre cómo manipular las propiedades (como el radio o el color).

En el sistema HTML, la tecnología más utilizada para dibujar gráficos vectoriales son los elementos de lona recientemente agregados en SVG y HTML5. Ambas tecnologías admiten diagramas de vector de dibujo y ráster.

Los gráficos vectoriales escalables (gráficos vectoriales escalables, SVG para cortos) es un lenguaje que utiliza XML para describir gráficos bidimensionales (SVG sigue estrictamente la sintaxis XML). SVG permite tres tipos de objetos gráficos: formas gráficas vectoriales (como rutas compuestas de líneas rectas y curvas), imágenes y texto. Los objetos gráficos (incluido el texto) se pueden agrupar, diseñar, convertir y combinarse en objetos renderizados previamente. El conjunto de características SVG incluye transformaciones anidadas, rutas de recorte, máscaras alfa y objetos de plantilla.

Los dibujos SVG son interactivos y dinámicos. Por ejemplo, los scripts se pueden usar para definir y activar animaciones. Esto es muy poderoso en comparación con Flash. Flash es un archivo binario, y es difícil crear y modificar dinámicamente. Si bien SVG es un archivo de texto, las operaciones dinámicas son bastante fáciles. Además, SVG proporciona directamente elementos relevantes 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 DOM. Este también es un punto muy poderoso en comparación con el lienzo en HTML5 (tenga en cuenta que SVG también usa algo similar al de lienzo para mostrar gráficos SVG. Más tarde encontrará que muchas características son un poco similares al lienzo en HTML5; si el artículo no indica claramente que es el lienzo de SVG, todo se refiere al elemento Canvas en HTML5). Por lo tanto, muchas aplicaciones avanzadas de SVG se pueden implementar fácilmente utilizando scripts. Además, los elementos gráficos de SVG básicamente admiten eventos estándar en el DOM. Se puede asignar una gran cantidad de controladores de eventos como OnMouseOver y OnClick a cualquier objeto gráfico SVG. Aunque la velocidad de representación de SVG no es tan buena como el elemento de lienzo, es mejor porque la operación DOM es muy flexible, y esta ventaja puede compensar por completo la desventaja de la velocidad.

Se puede decir que SVG es tanto un protocolo como un idioma; Es un elemento estándar de HTML y un formato de imagen.

SVG no es algo en HTML5, pero también es una de las tecnologías populares para la página. Vamos a decirlo en este tema.

En comparación con otros formatos de imagen, SVG tiene muchas ventajas (muchas ventajas provienen de las ventajas de los gráficos vectoriales):

• Los archivos SVG son XML puro y pueden leerse y modificarse por muchas herramientas (como el bloc de notas).

• SVG es de menor tamaño y más compresible en comparación con las imágenes JPEG y GIF.

• SVG es escalable, se puede ampliar sin degradar la calidad de la imagen y se puede imprimir con alta calidad en cualquier resolución.

• El texto en la imagen SVG es opcional y se puede buscar (muy adecuado para hacer mapas).

• SVG puede funcionar con la tecnología Java.

• SVG es un estándar abierto.

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 fácil de operar, mientras que Flash es una tecnología privada de origen sin abrir. SVG también tiene una gran ventaja en otros aspectos, como formatos de almacenamiento, generación de gráficos dinámicos, etc.

Con respecto a los navegadores que admiten HTML5 y SVG, no es el foco de discusión aquí. Básicamente, casi se realiza con el último navegador Chrome o Firefox (es decir, los usuarios deben instalar IE9. Como para las versiones antes de IE9, si necesita instalar complementos SVG, lo omitiré aquí). Para los navegadores que admiten directamente SVG, SVG adopta principalmente métodos de representación de dos lados y dos lados.

SVG es un elemento HTML estándar, simplemente escríbelo directamente en HTML, vea el siguiente ejemplo:

<? xml versión = "1.0" encoding = "utf-8"?>

<! Doctype html>

<html>

<Evista>

<!-<meta content = "text /html; charset = utf-8" http-oquiv = "content-type" />->

<title> Mi primera página SVG </title>

</ablo>

<Body>

<svg xmlns = "http://www.w3.org/2000/svg" versión = "1.1"

width = "200px">

<rect x = "0" y = "0"

relleno = "Ninguno" Stroke = "Black"/>

<círculo cx = "100" cy = "100" r = "50"

style = "Stroke: Black; Fill: Red;"/>

</svg>

</body>

</html>

Tenga en cuenta que la parte inicial de la Declaración XML, que está relacionada con los XMLN de espacio de nombres SVG, versión de versión y otras partes, principalmente considerando problemas de compatibilidad; Estas partes no son básicamente necesarias en HTML5 (es mejor hacerlo usted mismo si escribirlo o no).

SVG independiente se refiere a proporcionar formatos de archivo de gráficos vectoriales mediante el uso de extensiones de archivos SVG. Incruste este archivo SVG en el navegador y puede usarlo.

1. Archivos/páginas SVG independientes, las plantillas definidas son básicamente las mismas que las siguientes:

<svg>

<!- ​​Svg Markup aquí. ->

</svg>

Guarde dichos archivos de texto en archivos con SVG como extensión, como Sun.svg. Dichos archivos se pueden abrir y navegar directamente en el navegador o incrustarse en otras páginas como referencias.

2. HTML hace referencia a archivos SVG externos.

Simplemente use el objeto o el elemento IMG para incrustar el gráfico SVG, por ejemplo, el siguiente pequeño ejemplo:

<! Doctype html>

<html>

<Evista>

<title> Mi primera página SVG </title>

</ablo>

<Body>

<Object data = "sun.svg" type = "image/svg+xml"

width = "300px">

<!-Implemente el código de respuesta aquí o muestre un mensaje:->

<p> Su navegador no es compatible con SVG, actualice a un navegador moderno. </p>

</objeto>

<img src = "sun.svg" />

</body>

</html>

De hecho, SVG también se puede colocar en otros documentos XML, o se puede formatear y verificar utilizando tecnologías relacionadas con XML como otros documentos XML. Este no es el punto, por lo que se omite aquí.

SVG se representa estrictamente en el orden de definición de elementos, que es diferente de HTML que controla la jerarquía por los valores del índice Z. En SVG, los elementos escritos en el frente se representan primero, y los elementos escritos en la parte posterior se representan más tarde. Los elementos presentados más tarde sobrescribirán los elementos anteriores. Aunque a veces afectado por la transparencia y no parecen estar sobrescribidos, SVG de hecho se presenta estrictamente en orden de secuencia.

Nota: SVG se define en XML, por lo que es sensible a la caja, que es diferente de HTML.

Documento oficial: http://www.w3.org/tr/svg11/

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de desarrollo: https://developer.mozilla.org/en/svg

Referencia popular: http://www.chinasvg.com/