Introduction to HTML5-Introduction to SVG 2D-Overview of 1-SVG

Bitmap and vector graph
Previously, all the images displayed in the browser, such as jpeg and gif, were bitmap. These images were based on the grating format. In a grating image, an image file defines the color values of each pixel in the image. The browser needs to read these values and take actions accordingly. This kind of image has a strong reproduction capability, but in some cases it may be insufficient. For example, when a browser displays an image of different sizes, it usually produces a jagged edge. In this case, the browser has to insert or guess values for pixels that do not exist in the original image; this will cause image distortion. In addition, bitmap animation can only be used to generate an animation of the "flip book" type, that is, to quickly and continuously display individual images.
Vector graphs overcome these difficulties by specifying the commands required to determine the values of each pixel rather than specifying the values themselves. For example, a vector graph does not provide a pixel value for a circle with a diameter of 1 inch, but instead tells the browser to create a circle with a diameter of 1 inch and then asks the browser (or plug-in) to do other things. This eliminates many restrictions on raster graphics; with vector graphics, the browser only needs to know that it must draw a circle. If the image needs to be displayed three times the normal size, the browser only needs to draw a circle based on the correct size without the need to perform the normal insertion of the grating image. Similarly, the commands received by the browser can be more easily bound to external information sources (such as applications and databases), and images must be animated, the browser only needs to receive instructions on how to manipulate attributes (such as radius or color.
In the HTML system, the most common technology used to draw vector images is the newly added canvas elements of SVG and HTML5. Both technologies Support Vector and grating graphs.
 
SVG Overview
Scalable Vector Graphics (SVG) is a language that uses XML to describe two-dimensional Graphics (SVG strictly follows the XML syntax ). SVG allows three types of graphics objects: vector shapes (such as paths composed of straight lines and curves), images, and text. You can group, style, convert, and combine graphic objects (including text) into previously rendered objects. The SVG feature set includes nested conversions, cut paths, alpha masks, and template objects.
SVG plotting is interactive and dynamic. For example, you can use a script to define and trigger an animation. This is more powerful than Flash. Flash is a binary file, making it difficult to dynamically create and modify it. While SVG is a text file, it is quite easy to perform dynamic operations. In addition, SVG directly provides the relevant elements for animation, making operations very convenient.
SVG is compatible with other Web standards and directly supports the Document Object Model DOM. This is also quite powerful than canvas in HTML5. (Note that SVG uses something similar to canvas to display SVG images, later, you will find many features and HTML5 canvas also have some images. If it is not explicitly stated that it is SVG canvas, it all refers to the canvas Element in HTML5 ). Therefore, you can easily use scripts to implement many advanced applications of SVG. In addition, the graphical elements of SVG basically support Standard Events in DOM. A large number of Event Handlers (such as onmouseover and onclick) can be allocated to any SVG graphics object. Although SVG rendering speed is inferior to that of canvas elements, it is more flexible than DOM operations. This advantage can completely compensate for the speed disadvantage.
SVG is both a protocol and a language. It is both a standard element of HTML and an image format.
SVG is not a thing in HTML5, but it is also one of the technologies that are popular on pages. Let's move it to this topic.
 
Comparison between SVG and other image formats
SVG has many advantages over other image formats (many advantages come from the advantages of vector graphs ):
• SVG files are pure XML and can be read and modified by many tools (such as NotePad ).
• SVG is smaller in size and more compact than JPEG and GIF images.
• SVG is scalable and can be amplified without degrading the image quality, and can be printed with high quality at any resolution.
• Text in SVG images is optional and searchable (suitable for creating maps ).
• SVG can run with Java technology.
• SVG is an open standard.
 
Comparison between SVG and Flash
The main competitor of SVG is Flash. Compared with Flash, SVG is compatible with other standards (such as XSL and DOM) for convenient operations, while Flash is a private technology not open source. SVG also has great advantages in other aspects, such as storage formats and Dynamic Graph Generation.
 
SVG Rendering Method
Browsers that support HTML5 and SVG are not the focus of this discussion. Basically, the latest Chrome or FireFox browsers are installed. (for IE users, install IE9. For versions earlier than IE9, the SVG plug-in needs to be installed, So I skipped it here ). For browsers that directly support SVG, SVG can be presented in two ways.
Inline to HTML
SVG is a standard HTML element and can be directly written to HTML. See the following example:
<? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE html>
<Html>
<Head>
<! -- <Meta content = "text/html; charset = UTF-8" http-equiv = "Content-Type"/> -->
<Title> My First SVG Page </title>
</Head>
<Body>
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"
Width = "200px" height = "200px">
<Rect x = "0" y = "0" width = "100%" height = "100%"
Fill = "none" stroke = "black"/>
<Circle cx = "100" cy = "100" r = "50"
Style = "stroke: black; fill: red;"/>
</Svg>
</Body>
</Html>

Note the xml declaration at the beginning, and the xmlns and version of the svg namespace; these parts can be basically written in HTML5 (write or not ).
Independent SVG file
Standalone SVG provides vector graphics file formats by using the svg file extension. You can use the svg file embedded in the browser.
1. An independent SVG file/Page defines the template as follows:
<Svg width = "100%" height = "100%">
<! -- SVG markup here. -->
</Svg>

Save such text files as files with the extension svg, such as sun. svg. Such files can be opened in a browser or embedded into other pages as references.
2. HTML references external SVG files.
You can use an object or img element to embed an svg image, for example, the following small example:
<! DOCTYPE html>
<Html>
<Head>
<Title> My First SVG Page </title>
</Head>
<Body>
<Object data = "sun. svg" type = "image/svg + xml"
Width = "300px" height = "300px">
<! -- Implement fallback code here, or display a message: -->
<P> Your browser does not support SVG-please upgrade to a modern browser. </p>
</Object>

</Body>
</Html>

 
SVG Rendering sequence
SVG is rendered strictly in the order of defined elements, which is different from HTML's control hierarchy by z-index value. In SVG, the elements written in front are rendered first, and then rendered after the elements written in the back. The post-rendered element will overwrite the previous element. Although it sometimes does not seem to be overwritten due to transparency, the SVG is actually rendered strictly in order.
 
Note: SVG is defined in XML, so it is case sensitive. This is different from HTML.

 

From the autumn army