In the past, graphics displayed in browsers, such as jpeg, gif, etc., were bitmaps, and these image formats were based on rasters. 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 take corresponding actions. This kind of image reproduction ability is relatively strong, but it will appear insufficient in some cases. For example, when a browser displays an image at different sizes, a jagged edge is usually generated, and 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, animation for bitmaps is limited to generating flipped book-type animations, that is, displaying individual images in a fast and continuous manner.
The vector diagram overcomes some of these difficulties by specifying instructions required to determine the values of each pixel rather than specifying the values themselves. For example, instead of providing pixel values for a circle with an inch diameter, vector graphics tell the browser to create a circle with an inch diameter and then let the browser (or plugin) do the rest. This removes many limitations of raster graphics; with vector graphics, the browser only knows that it must draw a circle. If the image needs to be displayed three times the normal size, the browser simply draws the circle at the correct size without performing the usual insertion method of raster images. Similarly, instructions received by the browser can be more easily bound to external information sources (such as applications and databases), and to animate the image, the browser only needs to receive instructions on how to manipulate properties (such as radius or color).
In the HTML system, the most commonly used technology to draw vector graphics are the newly added canvas elements in SVG and HTML5. Both technologies support drawing vector and raster diagrams.
SVG OverviewScalable Vector Graphics (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, converted, and combined into previously rendered objects. The SVG feature set includes nested transformations, clipping paths, alpha masks, and template objects.
SVG drawings are interactive and dynamic. For example, scripts can be used to define and trigger animations. This is very powerful compared to Flash. Flash is a binary file, and it is difficult to create and modify dynamically. While SVG is a text file, dynamic operations are quite easy. Moreover, SVG directly provides relevant elements for completing animation, which is very convenient to operate.
SVG is compatible with other web standards and directly supports document object model DOM. This is also a very powerful point compared to the canvas in HTML5 (note here that SVG also uses something similar to canvas to display SVG graphics. Later you will find that many features are a bit similar to the canvas in HTML5; if the article does not clearly state that it is the canvas of SVG, it all refers to the canvas element in HTML5). Therefore, many advanced applications of SVG can be easily implemented using scripts. Moreover, SVG's graphic elements basically support standard events in the DOM. A large number of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. Although the rendering speed of SVG is not as good as the canvas element, it is better because the DOM operation is very flexible, and this advantage can completely make up for the disadvantage of 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 also one of the popular technologies for the page. Let's put it in this topic.
Comparison between SVG and other image formatsCompared with other image formats, SVG has many advantages (many advantages come from the advantages of vector graphics):
• SVG files are pure XML and can be read and modified by a lot of tools (such as Notepad).
• SVG is smaller in size and more compressible compared to JPEG and GIF images.
• SVG is scalable, can be enlarged without degrading image quality and can be printed with high quality at any resolution.
• The text in the SVG image is optional and searchable (very suitable for making maps).
• SVG can run with Java technology.
• SVG is an open standard.
Comparison between SVG and FlashSVG's main competitor is Flash. Compared with Flash, SVG's biggest advantage is that it is compatible with other standards (such as XSL and DOM) and is easy to operate, while Flash is an unopen source private technology. SVG also has a great advantage in other aspects such as storage formats, dynamic graphics generation, etc.
How SVG is presentedRegarding browsers that support HTML5 and SVG, it is not the focus of discussion here. Basically, it is almost done with the latest Chrome or FireFox browser (IE users are required to install IE9. As for the versions before IE9, if you need to install SVG plug-ins, I will skip it here). For browsers that directly support SVG, SVG mainly adopts two-sided and two-sided rendering methods.
Inline to HTMLSVG is a standard HTML element, just write it directly into 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">
<rect x="0" y="0"
fill="none" stroke="black"/>
<circle cx="100" cy="100" r="50"
style="stroke: black; fill: red;"/>
</svg>
</body>
</html>
Please note that the beginning part of the xml declaration, which is related to the svg namespace xmlns, version version and other parts, mainly considering compatibility issues; these parts are basically not required in HTML5 (it is better to do it yourself whether to write it or not).
Standalone SVG filesIndependent SVG refers to providing vector graphics file formats by using svg file extensions. Embed this svg file in the browser and you can use it.
1. Independent SVG files/pages, the defined templates are basically the same as the following:
<svg>
<!-- SVG markup here. -->
</svg>
Save such text files into files with svg as the extension, such as sun.svg. Such files can be opened and browsed directly in the browser or embedded in other pages as references.
2. HTML references external SVG files.
Just use object or img element to embed the svg graph, 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">
<!-- Implement fallback code here, or display a message: -->
<p>Your browser does not support SVG - please upgrade to a modern browser.</p>
</object>
<img src="sun.svg" />
</body>
</html>
In fact, SVG can also be placed in other XML documents, or can be formatted and verified using XML-related technologies like other XML documents. This is not the point, so it is omitted here.
The rendering order of SVGSVG is rendered strictly in the order of defining elements, which is different from HTML that controls hierarchy by z-index values. In SVG, the elements written in the front are rendered first, and the elements written in the back are rendered later. The elements rendered later will overwrite the previous elements. Although sometimes affected by transparency and do not appear to be overwritten, SVG is indeed rendered strictly in order of sequence.
Note: SVG is defined in XML, so it is case sensitive, which is different from HTML.
Practical reference :Official document: http://www.w3.org/TR/SVG11/
Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Development Center: https://developer.mozilla.org/en/SVG
Popular reference: http://www.chinasvg.com/