Shulou(Shulou.com)06/02 Report--

This article focuses on "what is SVG 2D in HTML 5". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is SVG 2D in HTML 5"?

Bitmap and vector map

Previously, the graphics displayed in browsers, such as jpeg, gif, and so on, were bitmaps, and these image formats were based on raster. In a raster image, the image file defines the color value of each pixel in the image. The browser needs to read these values and act accordingly. The reproduction ability of this kind of image is relatively strong, but it will be insufficient in some cases. For example, when a browser displays an image of different sizes, it usually produces jagged edges, and the browser has to insert or guess values for pixels that do not exist in the original image; this results in image distortion. In addition, animating bitmaps is at most limited to generating "flipped book" animations, that is, fast and continuous display of individual images.

The vector graph overcomes some of these difficulties by specifying the instructions needed to determine the values of each pixel rather than the values themselves. For example, instead of providing pixel values for a circle one inch in diameter, vector graphics tell the browser to create a circle one inch in diameter and let the browser (or plug-in) do the rest. This removes many of the limitations of raster graphics; with vector graphics, the browser only needs to know that it must draw a circle. If the image needs to be displayed at three times the normal size, the browser only needs to draw a circle at the correct size without having to perform the usual insertion of raster images. Similarly, the instructions received by the browser can be more easily bound to external sources of information, such as applications and databases, and to animate the image, the browser only needs to receive instructions on how to manipulate attributes such as radius or color.

In HTML system, the most commonly used techniques for drawing vector graphics are SVG and the newly added canvas element of HTML5. Both techniques support the drawing of vector and raster images.

Overview of SVG

Scalable vector graphics (Scalable Vector Graphics, referred to as SVG) is a language that uses XML to describe two-dimensional graphics (SVG strictly follows XML syntax). SVG allows three types of graphic objects: vector graphics shapes (such as paths made up of lines and curves), images, and text. Graphic objects, including text, can be grouped, styled, transformed, and combined into previously rendered objects. The SVG feature set includes nested transformations, clipping paths, alpha masks, and template objects.

SVG drawing is interactive and dynamic. For example, you can use scripts to define and trigger animation. This is powerful compared to Flash. Flash is a binary file, which is difficult to create and modify dynamically. While SVG is a text file, dynamic operation is quite easy. Moreover, SVG directly provides the relevant elements to complete the animation, which is very convenient to operate.

SVG is compatible with other Web standards and directly supports the document object model DOM. This is also very powerful compared with canvas in HTML5 (note here that SVG also uses something like canvas to show SVG graphics, and later you will find that many features are a bit similar to HTML5's canvas; if it is not clearly stated that it is SVG's canvas, it all refers to the canvas element in HTML5). Therefore, it is very convenient to use scripts to achieve many advanced applications of SVG. And the graphical elements of SVG basically support standard events in DOM. A large number of event handlers, such as "onmouseover" and "onclick", can be assigned to any SVG drawing object. Although the rendering speed of SVG is not as fast as that of canvas elements, the advantage lies in the flexibility of DOM operation, which can completely make up for the disadvantage of speed.

SVG is both a protocol and a language; it is both a standard element of HTML and a picture format.

SVG is not something in HTML5, but it is also one of the technologies that are in vogue on the page, so let's put it under this topic.

Comparison between SVG and other picture formats

Compared with other image formats, 1.SVG has many advantages (many advantages come from the advantages of vector graphics):

2.SVG files are pure XML and can be read and modified by many tools (such as notepad).

3.SVG is smaller and more compressible than JPEG and GIF images.

4.SVG is scalable, can be magnified without deterioration in image quality, and can be printed with high quality at any resolution.

The text in the 5.SVG image is optional and searchable (ideal for making maps).

6.SVG can be run with Java technology.

7.SVG is an open standard.

Comparison between SVG and Flash

The main competitor of SVG is Flash. The advantage of SVG over Flash is that it is compatible with other standards (such as XSL and DOM) and is easy to operate, while Flash is an unopen source proprietary technology. SVG also has a great advantage in other aspects, such as storage format, dynamic generation of graphics and so on.

The presentation of SVG

Browsers that support HTML5 and SVG are not the focus of discussion here. Basically, it is enough to install * * Chrome or FireFox browsers (for IE users, please install IE9. As for the previous version of IE9, you need to install SVG plug-ins, which is simply skipped here). For browsers that directly support SVG, SVG can be rendered in two ways.

Inline to HTML

SVG is a standard HTML element, which can be written directly into HTML. See the following example:

My First SVG Page

Please note the xml declaration at the beginning, with the svg namespace xmlns, version version, etc.; these parts can basically not be written in HTML5 (whether to write or not to look at the browser).

Standalone SVG file

Stand-alone SVG refers to providing a vector graphics file format by using the svg file extension. Embed this svg file in the browser and you can use it.

1. A separate SVG file / page with a template defined basically like the following:

Save such a text file as a file with the extension svg, such as sun.svg, which can be opened and browsed directly in a browser or embedded in another page as a reference.

2.HTML references an external SVG file.

It is fine to embed svg graphics using object or img elements, such as the following small example:

My First SVG Page

Your browser does not support SVG-please upgrade to a modern browser.

Rendering order of SVG

SVG is rendered strictly in the order in which elements are defined, unlike HTML, which controls layering by z-index values. In SVG, the elements written in front of them are rendered first, and the elements written later are rendered later. Post-rendered elements will overwrite the previous elements, although sometimes affected by transparency, it does not appear to be overridden, but SVG is indeed rendered in strict order.

Note: SVG is defined in XML, so it is case-sensitive, unlike HTML.

At this point, I believe you have a deeper understanding of "what is SVG 2D in HTML 5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.