# 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

### rectangle

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.

### circle

### ellipse

For the math of ellipse, see: Ellipse.

### polygon

- 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.
Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)#FillRuleProperty

### polyline

`polyline`

is similar to `polygon`

element, except the last point does not connect to the first.

### text

### path

`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 Path Tutorial

## SVG Style Sheet

## Reference

Basic Shapes – SVG 1.1 (Second Edition)