SVG image encoding and svg graphics

SVG image encoding and svg graphics
Svg: You can scale the rectangle without changing the quality: rect

<svg>  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>

Rounded rectangle: Set the rx and ry values.

<svg>  <circle id="circle"cx="100" cy="80" r="50" stroke="gray" stroke-width="10" fill="red"></svg>

Circle: circle

Circle: No attributes of x and y, because the circle of cx and cy has been set.

<svg class="grid-50">  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>

Elliptic: ellipse

Ellipse: the ellipse is actually a rectangle and the border is a rounded corner.

<svg >  <ellipse  rx=100 ry=30 cx=150 cy=60 fill="yellow" stroke="gray" /></svg> 

Line Segment: line (two points determine a straight line)

<svg>  <line x1="0" y1="0" x2="200" y2="20" fill="gray" stroke="gray" stroke-width="2" /></svg>

Line: polyline (that is, multiple coordinate points are set)

Note that failure to use () is invalid.

<svg>  <polyline points="0,0  0,20  20,20  20,40  40,40"  fill="white" stroke="gray" stroke-width="2" /></svg> 

Polygon

Of course, for more complex graphics, you only need to know the coordinates of each point.

<svg >  <polygon points="50,50 0,100 100,100 50,50" fill="blue" stroke="gray" stroke-width="1">  </svg> 

Path: path (all the above images can be drawn using path)

The following command can be used for path data:

• M = moveto // move coordinates
• L = lineto // draw
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic belserx curve
• T = smooth quadratic belgiscurveto
• A = elliptical Arc // elliptic
• Z = closepath // end path

Note: all the preceding commands allow lowercase letters. Upper case indicates absolute positioning, and lower case indicates relative positioning.

Must follow the rules

<svg>  <path d="M50 50 L200 50 L200 0 L50 0 Z" fill="blue" stroke="gray" stroke-width="2" /></svg>

Demo: http://2.liteng.sinaapp.com/svg/index.htmloriginal address url:http://liteng.org/node/51