SVG: Basic Examples
SVG is XML. You can put any of the following SVG example in a HTML file, and open the file in browser.
line
<svg width="100" height="100"> <line x1="0" y1="0" x2="50" y2="10" style="stroke:black" /> </svg>
Here is example of complete html file:
<!doctype html><html><head><meta charset="utf-8" /> <title>svg test</title> </head> <body> <svg width="100" height="100"> <line x1="0" y1="0" x2="50" y2="10" style="stroke:black" /> </svg> </body> </html>
rectangle
<svg width="100" height="100"> <rect x="9" y="0" width="30" height="80" style="fill:green; stroke:blue; stroke-width:5" /> </svg>
2 optional attributes {rx,ry}, makes round corners. Their value can be different. If one is missing, the other has the same value. Max effective value is half of the corresponding x or y attribute's value.
<rect x="9" y="0" width="30" height="80" rx="15" ry="15" …><rect x="9" y="0" width="30" height="80" rx="15" ry="40" …>circle
<svg width="100" height="100"> <circle cx="50" cy="50" r="50" style="fill:yellow; stroke:blue; stroke-width:5" /> </svg>
See also: SVG: Circle Arc
ellipse
<svg width="100" height="100"> <ellipse cx="50" cy="50" rx="50" ry="30" style="fill:yellow; stroke:red; stroke-width:5" /> </svg>
See also: SVG Path: Elliptical Arc
polygon
<svg width="100" height="100"> <polygon points="0 0, 40 20, 90 90, 10 70" style="stroke: blue; fill: yellow;" /> </svg>
- Numbers can be separated by space or comma.
- Each pair of numbers represent a point. That is, the {x,y} coordinates of a point.
- There must be even number of values.
- The last point will be connected to the first point.
If the lines made by the points intersect each other, you can use the style fill-rule to specify how inside/outside is determined.
polyline
polyline is similar to polygon element, except the last point does not connect to the first.
text
<svg width="100" height="100"> <text x="10" y="20">cats</text> </svg>
path
<svg width="100" height="100"> <path d="M 0 0 L 50 50 L 40 10 m 40 10 l 10 10" style="stroke:black; fill:green"></svg>
M- moveto
L- lineto
m- moveto (coordinates relative to previous point)
l- lineto (coordinates relative to previous point)
path with Cubic Spline
path tag is the most versatile and most frequently used. It can be used to draw curves using bezier curves.
<svg width="100" height="100"> <path d="M 10 20 C 50 -15 90 45 10 80 L 60 80" style="stroke:black; fill:none" /> </svg>