RAID HTML5 svg 2D Getting Started 1-svg overview////////////////zzzzzzzz

RAID HTML5 svg 2D Getting Started 1-svg overview

SVG Scalable Vector Graphics (scalable vector graphic) is a graphic format for describing two-dimensional vector graphics based on Extensible Markup Language (XML). SVG is a new two-dimensional vector graphics format developed by the web, and also the standard of network vector graphics in Specification. SVG strictly conforms to the XML syntax and describes the image content in a descriptive language of the text format, so it is a vector graphics format independent of the image Resolution.

What is svg?

SVG refers to a scalable vector graphic (scalable vector graphics)
SVG is used to define vector-based graphics for the network
SVG defines graphics using XML format
SVG images have no loss of graphics quality when zoomed in or changed size
SVG is the standard of the World Wide Web Consortium
SVG is a whole with a broad standard such as DOM and XSL

The difference between Canvas and SVG:
Svg
SVG is a language that uses XML to describe 2D Graphics.
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.
In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the Graphic.
Characteristics:
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
Canvas
Canvas uses JavaScript to draw 2D Graphics.
The Canvas is rendered per pixel.
In the canvas, once the drawing is drawn, it will not continue to get the attention of the Browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the GRAPHIC.
Characteristics:
Dependent resolution
Event handlers are not supported
Weak text rendering capabilities
Ability to save result images in. png or. jpg format
Best for image-intensive Games where many of the objects are redrawn frequently

Simple example:

<svg width= "100%" height= "100%"  > <circle cx= "" "cy=" "r=" "" stroke= "        #ff0" stroke-width= "3" Fill = "red"/></svg>

Bitmap and Vector graphics

previously, graphics that were displayed in the browser, such as jpeg, gif, and so on, were bitmaps, which were based on raster Images. In a raster image, an image file defines the color value of each pixel in the Image. The browser needs to read these values and act accordingly. This image is more reproducible, but in some cases it may seem inadequate. For example, When a browser displays a pair of images at different sizes, it usually produces jagged edges, when the browser has to insert or guess values for pixels that do not exist in the original image, which can result in distorted Images. In addition, animations for bitmaps are limited to the creation of "flip book" types of animations, which are quick and continuous display of individual images.

Vector graphs overcome some of these difficulties by specifying the instructions required to determine the value of each pixel rather than specifying the values Themselves. For example, vector Graphics no longer provide pixel values for an inch-in-diameter circle, but instead tell the browser to create a circle with an inch in diameter, and then let the browser (or plug-in) do the Rest. This eliminates many of the limitations of raster graphics, and using vector graphics, the browser simply knows that it must draw a circle. If the image needs to be displayed at three times times the normal size, then the browser simply draws a circle at the correct size without having to perform the usual insertion of the raster Image. similarly, the instructions received by the browser can be more easily bound to external sources of information, such as applications and databases, to animate an image, as long as the browser receives instructions about how to manipulate properties such as radius or Color.

In the HTML system, the most commonly used techniques for drawing vectors are the newly added canvas elements of SVG and HTML5. Both of these techniques support drawing vector and raster plots.

SVG overview

A scalable vector graphic (scalable vector graphics, or svg) is a language that uses XML to describe two-dimensional graphics (svg adheres to XML syntax). SVG allows three types of graphic objects: vector graphics shapes (such as paths that consist of lines and curves), images, and Text. You can group, style, transform, and group drawing objects, including text, 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, You can use a script to define and trigger Animations. This is very powerful compared to Flash. Flash is a binary file, and dynamic creation and modification are Difficult. While SVG is a text file, dynamic operation is fairly easy. moreover, SVG directly provides the relevant elements to complete the animation, the operation is very convenient.

SVG is compatible with other Web standards and directly supports the Document Object Model DOM. This is also very strong compared to the canvas in HTML5 (note that SVG is also a similar canvas to display SVG graphics, you will find a lot of features and HTML5 canvas is a bit like If the canvas of SVG is not explicitly stated, it refers to the canvas element in HTML5. As a result, many advanced applications of SVG can be implemented conveniently using SCRIPTS. and Svg's graphical elements basically support standard events in the DOM. You can assign a large number of event handlers, such as "onmouseover" and "onclick", to any SVG drawing Object. Although SVG renders slower than canvas elements, it is flexible to operate in dom, which can compensate for the speed Disadvantage.

SVG can be said to be a protocol or a language; it is both a standard element of HTML and an image Format.

SVG is not something in HTML5, but it is one of the most popular technologies in the web, but it is also under the Topic.

Comparison of SVG and other image formats

SVG has many advantages over other picture formats (many of the advantages come from the advantages of vector graphs):

The SVG file is purely XML and can be read and modified by very many tools (such as notepad).
SVG with JPEG and GIF images, smaller size, and more compressible, summary, vector graphics, small memory, amplification without losing True.
The SVG is scalable and can be amplified in the case of image quality without degradation and can be printed at high quality at any Resolution.
The text in the SVG image is optional and searchable (ideal for making maps).
SVG can be run with Java technology.
The SVG is an open Standard.

The comparison between SVG and Flash

The main competitor of SVG is Flash. Compared to 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 an open source proprietary technology. Other aspects such as the format of storage, dynamic generation of graphics and so on, svg also occupies a great advantage.

How SVG is rendered
About support HTML5 and SVG browser is not the focus of discussion here, basically loaded with the latest Chrome or Firefox browser is almost the same (ie users please install IE9 is right, as for the version before IE9, need to install SVG plug-in, here directly skipped). For browsers that support SVG directly, SVG mainly uses two different ways of Rendering.
Inline to HTML
SVG is a standard HTML element that can be written directly into html, as shown in the following example:

<?xml version= "1.0" encoding= "UTF-8"? ><! DOCTYPE html>
Note that the first part of the XML declaration, with the SVG namespace xmlns, version versions, and so on, is primarily concerned with compatibility issues; these parts are basically not written in the HTML5 (write or do not write).
Standalone SVG file
Independent SVG refers to the use of SVG file extensions to provide a vector graphics file format. Embedding this SVG file in the browser is ready to Use.
1. Independent SVG file/page, the definition of the template is basically the same as the following:
<svg width= "100%" height= "100%" >     <!--svg Markup here--    </svg>
Save such a text file as a file with an SVG extension, such as sun.svg, which can be accessed directly from the browser or embedded in another page as a reference.
2.HTML references the external SVG file.
It is possible to embed SVG graphics using object or IMG elements, such as the following small example:
<! DOCTYPE html>
In fact, SVG can also be placed in other XML documents, as well as other XML documents, the use of xml-related technical formatting and validation, This is not the focus, omitted Here.
Rendering Order of SVG
SVG is rendered strictly in the order of the defined elements, which is not the same as HTML by Z-index values to control Hierarchies. In svg, the elements written in front are rendered first, written behind the Elements. After the rendered element overwrites the previous element, although it is sometimes affected by transparency, it does not seem to be overwritten, but SVG is actually rendered strictly in Order.
Note: svg is xml-defined and therefore case-sensitive, which is not the same as Html.
RAID HTML5 svg 2D Getting Started 2-drawing
<svg width= "$" height= "30" > <rect x= "ten" y= "ten" width= "" "height="--"----"--- stroke= "black" fill= "transparent" stroke-width= "5"/> <rect x= "the y=" rx= "ten" ry= "ten" width= "" "height=" St roke= "black" fill= "transparent" stroke-width= "5"/> <circle cx= "" "" cy= "" r= "[]" stroke= "red" fill= "transparent "stroke-width=" 5 "/> <ellipse cx=" page "cy=" 5 "rx=" ry= "5" stroke= "red" fill= "transparent" stroke-width= > <line x1= "ten" x2= "y1=" "y2=" "stroke=" "orange" fill= "transparent" stroke-width= "5"/> <polyline PO ints= "," "the" "the" "135" "stroke=" Orange "fill=" Transparent "stroke-widt"  h= "5"/> <polygon points= "the" "205" in the 195, 205, and stroke= Fill= "transparent" stroke-width= "5"/> <path d= "m20,230 q40,205 50,230 t90,230" fill= "none" stroke= "blue" stroke-w Idth= "5"/></svg> 
This example draws a lot of shapes: normal rectangles, rectangles with rounded corners, circles, ellipses, lines, polylines, polygons, and Paths. These all belong to the basic graphical elements. Although there are many ways to draw a graph, such as rectangles can be implemented with rect, but also can be implemented with path, but we should try to keep the content of SVG short and easy to Read.
The following is a description of each Shape's use (here are only the basic properties that control the shape and position of the graphic, and the properties of the fill are summarized later).
Rectangle-rect element
This element has 6 properties that control the position and shape, respectively:
X: The x value of the coordinate (user coordinate system) of the upper-left corner of the Rectangle.
Y: The Y value of the coordinate (user coordinate system) of the upper-left corner of the Rectangle.
Width: Rectangle Width.
height: Rectangle Height.
Rx: the radius of the fillet along the x axis when the fillet effect is Achieved.
Ry: the radius of the fillet along the y-axis when the fillet effect is Achieved.
In the example above, the fillet effect is achieved, and you can also set the Rx,ry to achieve the ellipse angle effect for different values.
circle-circle element
The attributes of this element are simple, mainly defining the center and Radius:
R: The radius of the Circle.
Cx: Center coordinate x value.
Cy: the y-value of the center Coordinate.
Ellipse-ellipse element
This is a more general round element, you can control the length of the half-length axis and the Semi-short axis, respectively, to achieve different ellipses, it is easy to think that when the two half axes equal, is the Circle.
Rx: half-length Axis (x radius).
Ry: Half-short Axis (y-radius).
Cx: Center coordinate x value.
Cy: the y-value of the center Coordinate.
Lines-line element
The line needs to define the start and end Points:
X1: start x Coordinate.
Y1: the start Y Coordinate.
X2: endpoint x Coordinate.
Y2: the y-coordinate of the end Point.
Polyline-polyline element
Polylines are primarily about defining the endpoints of each segment, so you only need a collection of points as Parameters:
Points: a series of points separated by spaces, commas, line breaks, and so On. Each point must have 2 digits: x value and y Value. So the following 3 points (0,0) and (2,2) can be written as: "0 0, 1 1, 2 2".
Polygon-polygon element
This element is one step more than the polyline element, which connects the last point with the first point to form a closed graph. Parameters are the Same.
Points: a series of points separated by spaces, commas, line breaks, and so On. Each point must have 2 digits: x value and y Value. So the following 3 points (0,0) and (2,2) can be written as: "0 0, 1 1, 2 2".
Paths-path element
This is the most versatile, the most powerful element, you can use this element to achieve any other graphics, not only the basic shapes above, but also to achieve a complex shape such as Bezier curve, in addition, using path can achieve smooth transition segments, Although you can also use polyline to achieve this effect, But there are a lot of points that need to be provided, and the effect is not good. This element controls the position and shape of only one parameter:
D: A series of drawing instructions and drawing parameters (points) combined Into.
The drawing instructions are divided into absolute coordinates and relative coordinate directives, both of which use the same letter, that is, the case is not the same, the absolute instruction uses uppercase letters, the coordinates are absolute coordinates, the relative instruction uses the corresponding lowercase letters, the coordinates of the points are the Offsets.
Absolute coordinate drawing instructions
The parameters of this set of instructions represent absolute coordinates. Assuming that the current brush is located at (x0,y0), the following absolute coordinate directives represent the following meanings:

 
  

  
   
 
    
 
     
Instructions
 
     
Parameters
 
     
Description
 
    
 
    
 
     
M
 
     
X y
 
     
Move brush to point (x, y)
 
    
 
    
 
     
L
 
     
X y
 
     
Brushes draw segments from current point to points (x, Y)
 
    
 
    
 
     
H
 
     
X
 
     
Brush draws a horizontal segment from the current point to the dot (x,y0)
 
    
 
    
 
     
V
 
     
Y
 
     
The brush draws a vertical segment from the current point to the dot (x0,y)
 
    
 
    
 
     
A
 
     
Rx ry x-axis-rotation large-arc-flag sweep-flag x y
 
     
Brush draws an arc from the current point to the dot (x, y)
 
    
 
    
 
     
C
 
     
X1 y1, x2 y2, x y
 
     
Brush draws a three-time Bezier curve from the current point (x, y)
 
    
 
    
 
     
S
 
     
X2 y2, x Y
 
     
Three Bezier curves for special versions (omit first control Point)
 
    
 
    
 
     
Q
 
     
X1 y1, x Y
 
     
Plot two Bezier curve to point (x, y)
 
    
 
    
 
     
T
 
     
X y
 
     
Two Bezier curves for special versions (omit control points)
 
    
 
    
 
     
Z
 
     
No parameters
 
     
Draws a closed shape, and if the D property does not specify a Z command, the segment is drawn instead of the enclosing shape.
 
    
 
   
 
  
Move the brush instruction m, draw the line command: l,h,v, the closing instruction Z is relatively simple, the following focus on the drawing curve of a few instructions.
Draw arc directive: A rx ry x-axis-rotation large-arc-flag sweep-flag x y
Connecting 2 points with arcs is more complex and a lot of situations, so this command has 7 parameters, respectively, to control the various properties of the Curve. Let's explain what the value means:
Rx,ry is the half-length axis and the half-short axis length of the arc
The x-axis-rotation is the angle between the x-axis and the horizontal direction of the arc, that is, the x-axis counterclockwise rotation angle, and the negative number represents the clockwise rotation angle.
Large-arc-flag is 1 for large angle arcs and 0 for small angle arcs.
Sweep-flag for 1 represents the clockwise direction from the beginning to the end of the arc around the center, and 0 for the counterclockwise Direction.
x, y is the arc terminal Coordinates.
The first two parameters and the last two parameters are not much to say, very simple; Let's talk about the 3 parameters in the Middle:
X-axis-rotation represents the angle of rotation and realizes the different arcs in the following example:
<svg width= "320px" height= "320px" >  <path d= "M10 315           L 215           A 0 0 1 162.55 162.45           L 172.5 5 152.45           A 50-45 0 1 215.1 109.9           L 315 "stroke=" Black "fill=" Green "stroke-width=" 2 "fill-opacity=" 0.5 "/> ;</svg>
The above HTML draws the following graphic:
You can see that the different ellipse rotation parameters cause the arc direction to be drawn differently, but this parameter has no effect on the positive circle.
Large-arc-flag and Sweep-flag control the size and direction of the arc, and realize the different arcs in the following example:
<svg width= "325px" height= "325px" >  <path d= "M80           A, 0, 0, 0, the" fill= ""           Green " />  <path d= "M230,           0, 1, 0, 275           L 275 Z" fill= "red"/> <path  d= "M80           0, 0, 1, 275           L, Z "fill=" purple "/>  <path d=" M230           A, 0, 1, 1, 275 275           L 275 Z "fill=" Blue "/></svg>
This HTML plots the following images:
As can be seen from the above, these parameters are actually the only parameters that determine the need for an arc. As you can see here, the arcs in SVG are more complex than those in the Canvas.

Plot three Bezier curve directives: C x1 y1, x2 y2, x y
The Three-time Bezier curve has two control points, that is (x1,y1) and (x2,y2), and the last Face (x, Y) represents the end point of the Curve. Experience the following example:
This HTML fragment draws the following graphic:
<svg width= "190px" height= "160px" >  <path d= "M10 (C), ten, ten" stroke= "black" fill= "transparent"/& Gt;  <path d= "M70", "stroke=" black "fill=" transparent "/> <path d=  " M130 C 120 20, 180 2 0, "stroke=" Black "fill=" transparent "/> <path d=" "M10", "stroke=", the "black" fill= "  trans" Parent "/>  <path d=" M70, "stroke=" black "fill=" transparent "/> <path d=" M130  6 0 c, in the "stroke=" black "fill=" transparent "/>  <path d=" M10 "c-a," Strok e= "black" fill= "transparent"/>  <path d= "M70" C, the "stroke=", "black" fill= "TRANSPARENT"/&G t;  <path d= "M130 C, the" stroke= "black" fill= "transparent"/></svg> "
Special version of three Bezier curves: S x2 y2, x y
Many times, in order to draw a smooth curve, you need to draw the curve multiple Times. This time, in order to smooth the transition, the control point of the second curve is often the mapping point of the first curve control point on the other side of the Curve. This simplified version can be used at this Time. It is important to note that if there is no other s instruction or C instruction in front of the S instruction, the two control points are considered to be the same and degenerate to two Bezier curves, if the s instruction is used after another s instruction or C instruction, This time the first control point of the s instruction is set by default to a mapping point of the second control point of the preceding curve, and experience:
<svg width= "190px" height= "160px" >  <path d= "M10" C, ten, ten, the "stroke=", "black" fi Ll= "transparent"/></svg>
This HTML fragment is drawn as a shape:
Relative coordinate drawing instructions
The letters that are drawn with absolute coordinates are the same, except that they are all lowercase. The parameters of the set of instructions that involve coordinates are relative coordinates, meaning that the parameter represents the offset from the current point to the target point, a positive number represents a forward offset to the axis, and a negative number represents a reverse offset. however, There is no difference between the case and the z command.
It is important to note that absolute coordinates and relative coordinate directives can be mixed. Sometimes mixed use can lead to more flexible drawing.
SVG Path Drawing Considerations:
Note that drawing with holes should be noted that the outer edges are drawn in a counter-clockwise order, and that the sides of the holes in the hole must be clockwise. Only the drawing fill effect will be correct.
Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v=vs.85). aspx
Development Center: Https://developer.mozilla.org/en/SVG
Hot Reference: http://www.chinasvg.com/
Official Document: http://www.w3.org/TR/SVG11/
This article originates from: http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html
From the Dream station: http://www.w3cdream.com/content-sort-5-article-479.html Joint finishing, If necessary reprint please indicate the source
RAID HTML5 svg 2D Getting Started 1-svg overview////////////////zzzzzzzz