HTML5 SVG 2D Introduction 1—SVG (Scalable Vector Graphics) Overview_html5 Tutorial Tips

Bitmaps and Vector Graphics
Previously, graphics displayed in browsers, such as jpeg, gif, etc., were all 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 appear insufficient in some situations. For example, when a browser displays an image at different sizes, jagged edges often result, and the browser has to interpolate or guess values ​​for pixels that do not exist in the original image; this results in image distortion. Additionally, animating bitmaps is, at best, limited to producing "flip book" type animations, where individual images are displayed in rapid succession.

Vector graphics overcome some of these difficulties by specifying the instructions needed to determine the value of each pixel, rather than specifying the values ​​themselves. For example, instead of providing pixel values ​​for a one-inch diameter circle, vector graphics tell the browser to create a one-inch diameter circle 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 knows that it must draw a circle. If an image needs to be displayed at three times its normal size, the browser simply draws the circle at the correct size without having to perform the usual interpolation of raster images. Similarly, the browser receives instructions that can be more easily tied to external information sources such as applications and databases. To animate an image, the browser simply receives instructions on how to manipulate properties such as radius or color. .
In the HTML system, the most commonly used technology for drawing vector graphics is SVG and the newly added canvas element of HTML5. Both technologies support drawing vector and raster images.

SVG Overview
Scalable Vector Graphics (SVG for short) is a language that uses XML to describe two-dimensional graphics (SVG strictly follows XML syntax). SVG allows three types of graphic objects: vector graphic shapes (such as paths composed of straight 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 transforms, clipping paths, alpha masks, and template objects.

SVG drawings are interactive and dynamic. For example, you can use scripts to define and trigger animations. This is very powerful compared to Flash. Flash is a binary file, which is difficult to create and modify dynamically. SVG is a text file, and dynamic manipulation is quite easy. Moreover, SVG directly provides relevant elements to complete 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 a very powerful point compared with the canvas in HTML5 (note here that SVG also uses a similar canvas internally to display SVG graphics. Later you will find that many features are somewhat similar to the canvas of HTML5; in the article If it is not explicitly stated that it is the canvas of SVG, it refers to the canvas element in HTML5). Therefore, many advanced applications of SVG can be easily implemented using scripts. Moreover, SVG graphic elements basically support standard events in the DOM. A number of event handlers (such as "onmouseover" and "onclick") can be assigned to any SVG graphic object. Although the rendering speed of SVG is not as fast as that of canvas elements, the advantage is that DOM operations are very flexible. This advantage can completely make up for the disadvantage in speed.

SVG can be said to be both a protocol and a language; it is both a standard element of HTML and an image format.
SVG is not something in HTML5, but it is considered one of the popular web technologies, so it will be included in this topic for the time being.

Comparison of SVG and other image formats
Compared with other image formats, SVG has many advantages (many advantages come from the advantages of vector graphics):
• SVG The file is pure XML and can be read and modified by many tools (such as Notepad).
• SVG is smaller and more compressible than JPEG and GIF images.
• SVG is scalable, can be enlarged without losing image quality, and can be printed with high quality at any resolution.
• Text in SVG images is optional and searchable (great for making maps).
• SVG can run with Java technology.
• SVG is an open standard.

Comparison of SVG and Flash
SVG’s main competitor is Flash. Compared with Flash, the biggest advantage of SVG is that it is compatible with other standards (such as XSL and DOM) and is easy to operate, while Flash is a proprietary technology that is not open source. In other aspects such as storage format and dynamically generated graphics, SVG also has great advantages.

How SVG is presented
The browser that supports HTML5 and SVG is not the focus of the discussion here. Basically, it is enough to install the latest Chrome or FireFox browser (IE users please Just install IE9. As for versions before IE9, you need to install the SVG plug-in, which will be skipped here). For browsers that directly support SVG, SVG mainly uses two presentation methods on both sides.

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

Copy code

The code is as follows:

width="200px" height="200px">
fill= "none" stroke="black"/>
style="stroke: black; fill: red;"/>


The main reason for considering the compatibility issues is to consider these parts; these parts basically don’t need to be written in HTML5 (it’s up to you whether to write them or not).

Stand-alone SVG file

Stand-alone SVG refers to the vector graphics file format provided by using the svg file extension. Embed this svg file in your browser and it's ready to use. 1. Independent SVG file/page, the defined template is basically as follows:

Copy code

The code is as follows:

< ;/svg>


Save such a text file as a file with an svg extension, such as sun.svg. Such a file can be opened directly with a browser or embedded as a reference. in other pages.
2.HTML references external SVG files.

Just use object or img elements to embed SVG graphics, such as the following small example:

Copy code

The code is as follows: