tutorial original from http://tutorials.jenkov.com/svg/index.html, modified by me

What is SVG?

SVG is a language for describing two-dimensional vector graphics in XML.

Why is SVG important?

The reason for me is that d3.js (d3 stands for Data-Driven Documents) build different graphics using SVG. And d3.js is now one of the most popular data visualization library.

Basics

group tag

SVG <g> tag is used in grouping a set of SVG shapes, after grouping some shapes you can do some useful operations, such as rotations, zoom…

Example:

Testing SVG Testing SVG Testing SVG

code:

 1    <svg>
 2        <svg>
 3            <g>
 4                <line x="10" y="10" x1="60" y1="10" style="stroke: #006"/>
 5                <rect x="10" y="20" width="30" height="40" style="stroke: red; fill:#CCC"/>
 6                <text x="10" y="80" style="stroke: red; fill:#CCC">Testing SVG</text>
 7            </g>
 8
 9             <!-- rotated 180 degrees around the point 200,50. -->
10            <g transform="rotate(180, 200, 50)">
11                <line x="10" y="10" x1="60" y1="10" style="stroke: #006"/>
12                <rect x="10" y="20" width="30" height="40" style="stroke: red; fill:#CCC"/>
13                <text x="10" y="80" style="stroke: red; fill:#CCC">Testing SVG</text>
14            </g>
15        </svg>
16
17        <!-- g tag is not working with x, y, you will have to set to svg tag -->
18        <svg y="100">
19            <!-- element in side g tag will inherient the styles -->
20            <g style="stroke: red; fill:#CCC" y="100">
21                <line x="10" y="10" x1="60" y1="10"/>
22                <rect x="10" y="20" width="30" height="40"/>
23                <text x="10" y="80">Testing SVG</text>
24            </g>
25        </svg>
26    </svg>

Rectangle

Example:

code:

1<svg style="width:300px;">
2    <rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600; fill: #00cc00"/>
3    <rect x="70" y="10" height="50" width="50" rx="10" ry="10" style="stroke:#006600; fill: #00cc00"/>
4    <rect x="130" y="10" height="50" width="50" rx="15" ry="15" style="stroke:#006600; fill: #00cc00"/>
5</svg>

Circle

Example:

Code:

1<svg style="height:200px;">
2 
3    <circle cx="40" cy="40" r="24" style="stroke: red; fill:#CCC"/>
4    <circle cx="20" cy="50" r="30" style="fill: #333"/>
5
6</svg>

Ellipse

Example:

Code:

1<svg style="height:200px;">
2<ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#00cc00"/>
3</svg>

Line

Example:

Code:

1<svg style="height: 200px;">
2    <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
3    <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
4    <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
5    <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
6</svg>

Polyline

Example:

Code:

1<svg style="height: 200px;">
2    <polyline points="10,2  60,2  35,52" style="stroke:#006600; stroke-width: 2; fill: #33cc33;"/>
3
4    <polyline points="10,52  60,52  35,102 10,52" style="stroke:#006600; stroke-width: 2; fill: #33cc33;"/>
5</svg>

Polygon

Example:

Code:

1<svg style="height: 200px;">
2    <polygon points="50,5   100,5  125,30  125,80 100,105 50,105  25,80  25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
3</svg>

References