1, Introduction

SVG is a program language that uses XML to describe two-dimensional graphics and drawings. It became a W3C recommendation on January 14, 2003;
characteristic:
1. Is a scalable vector graphics
2. Is a vector based graph that uses xml format to define for the network
3. Enlarge or change the size of the picture without loss of quality
4. svg files must be used svg suffix to save

Creation of SVG graphics (in two ways)

html Create directly in:
	<svg width="" height="" version="1.1" 
	xmlns="http://www.w3.org/2000/svg">
		// Insert the desired drawing
	</svg>
	
External creation(This type of document needs to be described in the document): 
	<?xml version="1.0" standalone="no">
	<!DOCtype svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	<svg width="100%" height="100%" version="1.1"
	xmlns="http://www.w3.org/2000/svg">
		// Insert the desired picture
	</svg>

svg files can be embedded in HTML through the following tags (external imported. svg files):

<embed>case:
	<embed src="rect.svg" width="300" height="100" type="image/svg+xml"
		pluginspage="http://wwwadobe.com/svg/viewer/install/" />
		
<object>Case:
	<object data="rect.svg" width="300" height="100" 	
	type="image/svg+xml"
	codebase="http://www.adobe.com/svg/viewer/install/" />

<iframe>Case:
	<iframe src="rect.svg" wodth="300" height="100"></iframe>

2, Create SVG graphics

The created elements will not take effect until they are placed in the svg element
1, Rectangle (< rect > label)

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
	<rect width="30" height="40" x="20" y="20"
    style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)" />
</svg>
Notes:
	rect Properties:
		x: Defines the left position of the rectangle
		y: Defines the position of the top of the rectangle
		width: Define rectangle width
		height: Defines the height of the rectangle
		style: Style rectangle

***style contains (svg shape common):
Fill: defines the fill color of the rectangle
Stroke width: defines the width of the rectangular border
stroke: defines the color of the rectangular border
Fill opcity: defines the fill color transparency
Stroke opacity: defines the transparency of the border color
opcity: defines the overall transparency of the drawing

2, Circle (< circle > label)

<circle cx="50" cy="50" r="20" stroke="black" stroke-width="2" 
fill="red">
Notes:
	cx and cy Property defines the shape of the circle x and y coordinate
	stroke: Define black round background
	stroke-width: Defines the width of the circle border
	fill: Define border color

3, Ellipse (< ellipse > label)

<ellipse cx="200" ct="150px"
style="fill:rgb(200, 100, 50); stroke:rgb(0,0,100); stroke-width:2;">

Notes:
	cx: Polka Dot x coordinate
	cy: Polka Dot y coordinate
	rx: Horizontal radius
	ry: Vertical radius

4, Line (< line > label)

<line x1="0" y1="0" x2="300" y2="300" style="stroke: rgb(99,99,99); stroke-width:2" />

x1, y1 Where the line begins; x2, y2 Where the line ends

5, Polygon (< polygon > label)

<polygon points="220,100 300,210 170,250" style="fill: #ccc; stroke: #000; stroke-width:1" />

Notes: points Attribute defines the of each corner of the polygon x and y coordinate

6, Polyline (< polyline > label)

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" 
style="fill:white; stroke:red; stroke-width: 2" />

Notes: points Property defines the of each corner x and y coordinate

7, Path (< Path > label)

<path d="M250 150 L150 350 L350 350 Z" />

Path data:
	M = moveto(Start tracing points)
	L = lineto(Draw the line where you want to go)
	H = horizontal lineto(Where to draw the line horizontally)
	V = vertical lineto(Where to draw a vertical line)
	C = curveto(Corner position of bending curve, including multiple coordinates)
	S = smooth curveto(Position of curve angle of smooth curve, including multiple coordinates)
	Q = quadratic Belzier curve(secondary Belzier curve)
	T = smooth quadratic Belzier curveto(Smooth quadratic Belzier curve)
	A = elliptical Arc(Elliptic arc)
	Z = closepath(Close path)

3, Gradual change

SVG gradient must be in The gradient types include: linear gradient and radioactive gradient
: it can define special elements such as gradients

Linear gradient (< LinearGradient > label):
1. Horizontal gradient: Y1 = Y2, X1= x2
2. Vertical gradient: X1 = X2, Y1= y2
3. Angular gradient: X1= x2, y1 != y2

// definition
<defs>
	<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
		<stop offset="0%"
		style="stop-color:rgb(255,255,0); stop-opacity: 1" />
		<stop offset="100%"
		style="stop-color:rgb(255,0,0); stop-opacity: 1" />
	</linearGradient>
</defs>
// application
<ellipse cx="200" cy="190" rx="85" ry="50" style="fill: url(#orange_red)" /> 

Notes:
1. The fill:url(#orange_red) attribute links the ellipse element to this gradient
2. The x1,x2,y1,y2 attributes of the label define the start and end positions of the gradient
3, The label defines the components of the gradient color, and the offset attribute defines the start and end positions of the gradient

Radioactive gradient (< RadialGradient > label):

// definition
<defs>
	<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
	fx="50%" fy="50%">
		<stop offset="0%"
			style="stop-color: rgb(200,200,200); stop-opacity:0">
		<stop offset="100%"
			style="stop-color: rgb(0,0,255); stop-opacity: 1">
	</radialGradient>
</defs>
//Apply
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

Notes:
1. The cx,cy attributes define the outer circle
2. The fx,fy attributes define the inner circle

Filter

The elements beginning with fe are all filters, which are Gaussian blur as follows:
Gaussian blur (< fegaussian Blur > label)

// definition
<defs>
	<filter id="Gaussian_Blur">
		<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
	</filter>
</defs>
// application
<ellipse cx="200" cy="150" rx="70" ry="40"
	style="fill: #ff00; stroke: #0000; stroke-width: 2;
	filter: url(#Gaussian_Blur)"
/>

Notes:
1. The filter:url attribute is used to link elements to filters
2. stdDeviation: the attribute is used to define the degree of fuzziness
3. in = "SourceGraphic" definition has the effect of creating the whole image

Common elements in containers

It refers to some tag elements often used in svg:

defs: It is used to store the images to be used in the future fill:url(id)Reference
g: For other SVG Elements are grouped into containers, and setting attributes and transformations on their elements will affect g All elements grouped
mask: Used to define a alpha Channel to synthesize the current object into the background
pattern: Defines a fill object that can be repeated and tiled within its host element to fill its element
marker: Used in a given<path>,<line>,<polyline>or<polygon>Drawing an arrow or multipoint marker on an element
symbol:Define a template element,adopt use Attribute reference