HTML5 First Glimpse of 6--svg

1. HTML5 supports inline SVG.

2. What is SVG?

1) SVG refers to a scalable vector graph (which magnifies or alters the size of the case as if it were not distorted or mass lossy).

2) SVG uses XML format to define graphics

3. Advantages of SVG: (compared to other images, such as PNG format)

1) SVG images can be created and modified using a text editor, such as a text document.

2) svg images can be searched, indexed, scripted, or compressed.

3) The SVG image is scalable.

4) high-quality printing at any resolution. (vector)

4. In HTMl5, SVG can be embedded directly into the page, such as:

<! DOCTYPE html><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  <polygon points="100,10 40,180 190,60 10,60 160,180"  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg> </body>
/** remove style, is a black pentagram **/

5. The difference between Canvas (paintbrush) and SVG:
1) SVG uses XML to describe 2D images, andCanvas draws 2D graphics through JavaScript. 
2)SVG is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element. 
3) canvas is rendered per pixel.
4) in SVG, each drawn graphic is treated as an object. If the properties of the SVG object change, then the browser can automatically reproduce the graphics, and in the canvas, once the drawing is finished, it will not continue to get the browser's attention. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic. 


 
 

  
  
 
   
 
    
Canvas
 
    
SVG
 
   
 
   
 
    
 
     
 
      
 dependent resolution 
 
      
 Not  support event handlers 
 
      
 weak text rendering capability (pixel rendered) 
 
      
 can be. The PNG or. jpg format saves the resulting image 
 
      
 best for image-intensive games  where many of the objects are redrawn frequently 
 
     
 
    
 
     
 
      
not dependent on resolution
 
      
Support for event handlers
 
      
Best for applications with large rendering areas (e.g. Google Maps)
 
      
high complexity slows rendering speed (any applications that overuse the DOM are unpleasant)
 
      
Not suitable for gaming applications
 
     
 
   
 
  
 
 

Reference: http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp
Http://www.w3cschool.cc/html/html5-svg.html


HTML5 First Glimpse of 6--svg