"Concept" SVG (1)

OK, let's talk about SVG.

Learning Prerequisites: Understanding HTML and Basic XML

Introduction to SVG:

1.SVG full name scable vector Graphic, Scalable vector image

2.SVG is used to define vector-based graphics for the web

3.SCG defines a picture in the form of XML

4.SVG never distorts in scaling

5. The elements and attributes in each SVG can be animated

5.SVG is greatly recommended!

6.SVG combines standards such as DOM and XSL

<width= "widthpx"  height= "HEIGHTPX"  viewBox= "x1 X2 y1 y2 ">

Note that the starting point is the upper-left corner, and Viewbox represents the visible canvas area.

SVG Shapes

SVG has the following predefined shape elements:

• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

• <svgwidth= "The "Height= " the">  <rectx= " the"y= " the"Rx= " the"ry= " the"width= "Max"Height= "Max"style= "fill:red;stroke:black;stroke-width:5;stroke-opacity:0.5;fill-opacity:0.9">Sorry, your browser does not support inline SVG.</svg>

Effect:

The RX and ry represent the radius of the fillet axis, similar to the Border-radius in CSS

<svgHeight= "+"width= "$">  <CircleCX= "+"Cy= " the"R= "Max"Stroke= "BLACK"Stroke-width= "3"Fill= "Red" />Sorry, your browser does not support inline SVG. </svg> 

<svgHeight= "$"width= "$">  <EllipseCX= "$"Cy= "a"Rx= "+"ry= " the"style= "Fill:yellow;stroke:purple;stroke-width:2" />Sorry, your browser does not support inline SVG. </svg>

Multiple ellipses are superimposed

<svgHeight= "Max"width= "$">  <EllipseCX= "+"Cy= "+"Rx= "The "ry= "+"style= "Fill:purple" />  <EllipseCX= "The "Cy= "The "Rx= " the"ry= " the"style= "Fill:lime" />  <EllipseCX= " the"Cy= "$"Rx= "The "ry= " the"style= "Fill:yellow" />Sorry, your browser does not support inline SVG.</svg>

Line

<svgHeight= " the"width= "$">  < LineX1= "0"Y1= "0"X2= "$"y2= "$"style= "Stroke:rgb (255,0,0); Stroke-width:2" />Sorry, your browser does not support inline SVG.</svg>

<height= "All" width= "$">  <  points= "100,10 40,198 190,78 10,78 160,198"  style= "Fill:lime;stroke: Purple;stroke-width:5;fill-rule:nonzero; " />   Sorry, your browser does not support inline SVG. </ svg >

<height= " All" width= "+">  <  d= "M150 0 L75 L225 Z"/></svg> 

The following commands is available for path data:

• M = MoveTo
• L = LineTo
• H = Horizontal LineTo
• V = Vertical LineTo
• C = Curveto
• S = Smooth Curveto
• Q = Quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = Elliptical ARC
• Z = Closepath

Note: upper case indicates absolute position, lowercase for relative position

<svgHeight= "$"width= "$">  <textx= "0"y= " the"Fill= "Red"Transform= "Rotate (20,40)">I Love SVG</text>Sorry, your browser does not support inline SVG.</svg>

Stroke

<?XML version= "1.0" standalone= "no"?><svgwidth= " the"Height= "$"xmlns= "Http://www.w3.org/2000/svg"version= "1.1">  < LineX1= "Max"X2= "+"Y1= " the"y2= " the"Stroke= "BLACK"Stroke-width= " the"Stroke-linecap= "Butt"/>  < LineX1= "Max"X2= "+"Y1= "$"y2= "$"Stroke= "BLACK"Stroke-width= " the"Stroke-linecap= "Square"/>  < LineX1= "Max"X2= "+"Y1= "+"y2= "+"Stroke= "BLACK"Stroke-width= " the"Stroke-linecap= "Round"/></svg>

<?XML version= "1.0" standalone= "no"?><svgwidth= " the"Height= "280"xmlns= "Http://www.w3.org/2000/svg"version= "1.1">  <polylinepoints= " All in All"Stroke= "BLACK"Stroke-width= " the"Stroke-linecap= "Butt"Fill= "None"Stroke-linejoin= "Miter"/>    <polylinepoints= " all in all."Stroke= "BLACK"Stroke-width= " the"Stroke-linecap= "Round"Fill= "None"Stroke-linejoin= "Round"/>    <polylinepoints= " all in all."Stroke= "BLACK"Stroke-width= " the"Stroke-linecap= "Square"Fill= "None"Stroke-linejoin= "Bevel"/></svg>

<svgwidth= "$"Height= "Max">  <PathD= "M-Q-Ten"Stroke= "BLACK"Stroke-linecap= "Round"Stroke-dasharray= "5,15,8"Fill= "None"/>  <PathD= "M-ten L"Stroke= "Red"Stroke-linecap= "Round"Stroke-width= "1"Stroke-dasharray= "5,5"Fill= "None"/></svg>

Stroke-dasharray= "Real segment distance, blank line segment distance" If there are multiple values, such as 5,15,8 then the solid line, the blank so that the continuous loop.

So, the first example is 5 solid line, 15 blank, 8 solid line, 5 blank, 15 solid line, 8 blank, 5 solid line .....

"Concept" SVG (1)