HTML5 SVG can scaling vector graphics

SVG can zoad vector graphics (SCALABLE VECTOR GRAPHICS) is a graphic format based on scalable tag language (XML) to describe the two -dimensional vector graphics. SVG is a new two -dimensional vector graphic format formulated by W3C, and it is also a network vector graphics standard in the specification. SVG strictly follows the XML syntax and describes the image content in the descriptive language of the text format. Therefore, it is a vector graphic format that has nothing to do with image resolution.

SVG refers to scalable vector graphics

SVG is used to define vector -based graphics for networks

SVG uses xml format to define graphics

SVG images will not lose the graphics quality when zooming or change the size

SVG is the standard of the Wanwei Network Alliance

SVG and W3C standards such as DOM and XSL are a whole

SVG is a language that describes 2D graphics in XML.

SVG is based on XML, which means that each element in SVG DOM is available. You can add a JavaScript event processor to a certain element.

In SVG, each drawn graphic is considered an object. If the attribute of the SVG object changes, the browser can automatically reproduce the graphics.

Features:

Non -dependent resolution

Support event processor

The most suitable application with large rendering areas (such as Google Map)

High complexity will slow down the rendering (the application of any excessive DOM is not fast))

Not suitable for game applications

Canvas draws 2D graphics through JavaScript.

Canvas is rendered by pixels.

In Canvas, once the graphic is drawn, it will not continue to get the attention of the browser. If the location changes, the entire scene also needs to be re -drawn, including any object that may have been covered by graphics.

Features:

Dependencies

Do not support event processor

Weak text rendering ability

Can save the result image in the .png or .jpg format

The most suitable game -intensive game, many of them will be frequently painted

Simple example:

 <svg Width = 100% Height = 100%> <Circle CX = 300 CY = 60 R = 50 Stroke =#FF0 Stroke-Width = 3 Fill = Red /> < /svg>

In the past, the graphics displayed in the browser, such as JPEG, GIF, etc., were all graphics. These image formats are based on grating. In the grating image, the image file defines the color value of each pixel in the image. The browser needs to read these values ​​and make corresponding actions. This image has a strong reproduction ability, but it will appear insufficient in some cases. For example, when the browser is displayed in different sizes, the edge of jaggedness is usually generated. At this time, the browser has to insert or guess the value for pixels that do not exist in the original image; this will cause image distortion. In addition, the animation for the bitmap is limited to the animation that generates the type of rolling books, that is, quickly and continuously display separate images.

The vector diagram is specified to determine the instructions required for each pixel value instead of the specified value itself, which overcomes part of these difficulties. For example, vector graphics no longer provide pixel values ​​for a diameter of one inch, but tell the browser to create a diameter one inch circle, and then let the browser (or plug -in) do the rest. This eliminates many restrictions on grating graphics; using vector graphics, as long as the browser knows that it must draw a circle. If the image needs to be displayed three times the normal size, then the browser is used to draw a circle according to the correct size without having to perform the common insertion method of the grating image. Similarly, the instructions received by the browser can be easier to bind to the external information sources (such as the application and the database). The image is made to make an animation. Essence

In the HTML system, the most commonly used vectoring technology is SVG and HTML5 newly added Canvas elements. Both technologies support drawing vector maps and grating.

The scaling vector graphics (SVG (SVG) is a language that describes the two -dimensional graphics (SVG strictly follows the XML syntax). SVG allows three types of graphics objects: vector graphics (such as paths composed of linear and curves), images and texts. Graphic objects (including text) can be packed, stylized, transformed, and combined into the previously presented objects. SVG function sets include nested conversion, shear paths, Alpha masks and template objects.

SVG drawing is 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 more difficult to create and modify it. SVG is a text file, and dynamic operation is quite easy. Moreover, SVG directly provides related 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 to the Canvas in HTML5 (note here, the SVG also uses a similar canvas to show the SVG graphics. You will find that many features are a bit similar to the Canvas of HTML5; in the article If it is not clearly stated that it is SVG's Canvas, it refers to the Canvas element in HTML5). Therefore, it can be convenient to use the script to achieve many advanced applications of SVG. And SVG's graphics elements basically support standard events in DOM. A large number of events processing programs (such as onmouseover and onclick) can be allocated to any SVG graphic object. Although the rendering speed of SVG is not as good as the Canvas element, it is very flexible in the DOM operation. This advantage can completely make up for the disadvantage of speed.

SVG can be said to be a protocol or a language; it is a standard element of HTML, but also a picture format.

SVG is not something in HTML5, but it is also one of the technical techniques on the page, and let's put it on this topic.

Compared with other picture formats, SVG has many advantages (many advantages come from the advantages of vector map):

• SVG file is pure XML, which can be read and modified by a lot of tools (such as notepad).

• Compared with JPEG and GIF images, SVG is smaller and more compressed. Summary, vector diagram, small memory, zoom in, and zoom in.

• SVG is scalable and can be enlarged when the image quality is decreased. It can be printed at high quality at any resolution.

• The text in the SVG image is optional, and it is also available (suitable for making maps).

• SVG can run with Java technology.

• SVG is the standard of openness.

The main competitor of SVG 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 convenient to operate, while Flash is an unpopular private technology. Others, such as storage formats and dynamic graphics, SVG also occupies a great advantage.

The browser that supports HTML5 and SVG is not the focus of discussion here. Basically, it is almost installed with the latest Chrome or Firefox browser. Sometimes it is slightly). For browsers that directly support SVG, SVG mainly uses two sides and two ways.

Inner United to HTML

SVG is the standard HTML element, just write it directly to HTML. Look at the example below:

 <?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> <st> x = 0 y = 0 width = 100% height = 100% fill = none stroke = black/> <circle CX = 100 CY = 100 R = 50 STYLE: Black; Fill: red;/> </svg> </svg> < /body> </html>

Please note that the beginning of the XML statement at the beginning, and the name space of the SVG, XMLNS, version Version, etc., mainly considering the problem of compatibility; these parts can basically be written in HTML5 Essence

Independent SVG file

Independent SVG refers to providing a vector graphical file format by expanding the SVG file extension. This SVG file is embedded in the browser.

1. The independent SVG file/page, the defined template is basically like the following:

 <svg width = 100% height = 100%> <!-SVG Markup Here .-> </svg>

Save such text files into files with SVG as an extension, such as Sun.SVG. Such files can be directly opened with a browser, or they can be embedded in other pages.

2.html references the external SVG file.

Use Object or IMG elements to embed the SVG graphics, for example, the following example:

 <! Doctype HTML> <HTML> <Head> <Title> My First SVG Page </head> </head> <blect 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-Please Upgrade to a Modern Browser. </P> </Object> <IMG> src = sun.svg < Rect x = 10 y = 10 width = 30 height = 30 stroke = Black Fill = transparent stroke-width = 5/> <rad = 10 RX = 10 width = 30 Height = 30 TROKE = BLACK FILL = Transparent Stroke-Width = 5/> <circle CX = 25 CY = 75 R = 20 Stroke = Red Fill = Transparent Stroke-Width = 5/> <Ellipse CX = 75 RX = 20 RY = 5 S TROKE = red Fill = Transparent Stroke-Width = 5/> <Line x1 = 10 x2 = 50 y1 = 110 y2 = 150 stroke = Orange Fill = Transparent Stroke-Width = 5/> <PolyLine Points = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 Stroke = Orange Fill = Transparent Stroke-Width = 5/> <Polygon Points = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 stroke = Green Fill = Transparent Stroke-Width = 5/> <PATH D = M20, 230 Q40 ,205 50, 230 T90, 230 Fill = None Stroke = Blue Stroke-Width = 5/SVG>

This example draws a lot of shapes: normal rectangles, rectangles with rounded corners, round, oval, straight, folding, polygon, and path. These are basic graphic elements. Although there are many ways to draw a graphic, such as rectangles can be implemented with RECT, or can be implemented with PATH, but we should still try to keep the content of the SVG short and smart, easy to read.