SVG

With SVG, you can draw most basic shapes; moreover, they are vector graphic, that means, you can zoom in or zoom out the shapes without distortion. SVG is the acronym of scalable vector graphics. It’s defined with XML format. In the examples below, stroke and fill can be color name, RGB, or six digit hex value. For example, stroke=”blue”, or stroke=”RGB(0,0,255)”, or stroke=”#0000ff” has the same effect.

SVG rectangle

In the tag rect, x, and y are the left corner of the rectangle. If you don’t specify a fill-opacity, its default value would be 1.0, that is totally opaque.

Source Code Box: SVG rectangle | Browser: IE9+,Firefox,Chrome

<svg width="400" height="120"> <rect x="100" y="10" width="200" height="100" stroke="rgb(0,0,255)" stroke-width="4" fill="#ff00ff" fill-opacity="0.8" > Your browser does not support SVG. </svg>

SVG circle

In the tag circle, cx(center x cordinate), and cy(center y coordinate) are the center coordinates of the circle. r is the radius of the circle. Since we didn’t specify a fill-opacity, its default value would be 1.0, that is totally opaque.

Source Code Box: SVG circle

<svg width="100" height="100"> <circle cx="50" cy="50" r="30" stroke="green" stroke-width="4" fill="yellow" /> </svg>

SVG ellipse

In the tag ellipse, cx(center x-axis coordinate), and cy(center y-axis coordinate) are the center coordinates of the ellipse. rx is the x-axis radius. ry is the y-axis radius.

Source Code Box: SVG ellipse

<svg width="100%" height="120" > <ellipse cx="200" cy="60" rx="100" ry="50" fill="yellow" stroke="blue" stroke-width="20" /> </svg>

SVG line

In the tag line, x1,y1 are the starting point coordinates; and x2,y2 are the ending point coordinates.

Source Code Box: SVG line

<svg height="30" width="100%"> <line x1="0" y1="10" x2="200" y2="20" stroke="blue" stroke-width="5" /> </svg>

SVG polygon

You can draw a multiple-sided closed shape(at least three sides) with the tag polygon. Each side is a straigh line. In the tag polygon, the x and y coordinates of different points are separated with space.

Source Code Box: SVG polygon

<svg height="50" width="100%"> <polygon points="10,10 150,10 290,35 123,45" stroke="blue" stroke-width="5" fill="yellow" /> </svg>

SVG polyline

Polyline is quite similiar to polygon, except it is not a closed shape. Compare this with last example output, you will see that easily.

Source Code Box: SVG polyline

<svg height="50" width="100%"> <polyline points="10,10 150,10 290,35 123,45" stroke="blue" stroke-width="6" fill="yellow" /> </svg>

SVG path

A path passes through many points. Adjacent points can be connected by a strait line or a curve. In the tag path, M20 10 means moving to point(20,10). Q100 20 190 170 means a curve connecting point(20,10), point(100,20), and point(190,170). L123 237 means a line from point(190,170) to point(123,237).

Source Code Box: SVG path

<svg height="270" width="100%"> <path d="M20 10 Q100 20 190 170 L123 237" stroke="blue" stroke-width="7" fill="yellow" /> </svg>

SVG text

You can specify text coordinates, color and font size.

Source Code Box: SVG text

<svg height="35" width="100%"> <text x="0" y="25" fill="red" font-size="25"> SVG is good </text> </svg>