SVG Shapes: Line, Circle...
There are several basic shapes used for most SVG drawing.
To insert a shape, you create an element in the document. Different elements correspond to different shapes and take different parameters to describe the size and position of those shapes. Some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and to keep your SVG documents as short and as readable as possible.
circle
Element circle draws a circle. Its attributes are:
- cx: X coordinate of its center
- cy: Y coordinate of its center
- r: its radius
Example:
<circle cx="50" cy="50" r="50" />
rect
Element rect draws a rectangle. Its attributes are:
- x: The x position of the top left corner of the rectangle.
- y: The y position of the top left corner of the rectangle.
- width: The width of the rectangle.
- height: The height of the rectangle.
- rx: The x radius of the corners of the rectangle.
- ry: The y radius of the corners of the rectangle.
- :
ellipse
Element ellipse draws an ellipse. Its attributes are:
- rx: The x radius of the ellipse.
- ry: The y radius of the ellipse.
- cx
- cy
line
Element line draws a line or segment between two given points. Its attributes are:
- x1
- y1
- x2
- y2
Example:
<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
polyline
Element polyline draws a group of connected straight lines. Since the list of points can get quite long, all the points are included in one attribute:
<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>
Its attribute points: a list of points. Each number must be separated by a space, comma, EOL, or a line feed character with additional whitespace permitted. Each point must contain two numbers: an x coordinate and a y coordinate. So, the list (0,0), (1,1), and (2,2) could be written as 0,0 1,1 2,2.
polygon
A <polygon> is similar to a <polyline>, in that it is composed of straight line segments connecting a list of points. For polygons though, the path automatically connects the last point with the first, creating a closed shape. Its attributes are the same as polyline's.
path
A path is the most general shape that can be used in SVG. Using a path element, you can draw rectangles (with or without rounded corners), circles, ellipses, polylines, and polygons. Basically any of the other types of shapes, bezier curves, quadratic curves, and many more.
Its one specific attribute is d, which is a list of points and other information about how to draw the path.
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>