SVG Shape Reference

The SVG specification provides all the basic shapes needed to render two-dimensional vector graphics. Most shapes are drawn with a pen, and have a group of styles related to that pen. Shapes that have a region also have a group of styles related to how they get filled.

Lines

line

The line tag draws a line from one point to another.

  • x1 - Horizontal position of the first point.
  • y1 - Vertical position of the first point.
  • x2 - Horizontal position of the second point.
  • y2 - Vertical position of the second point.

Rectangles

rect

The rect tag draws a rectangle beginning at some point, with a given width and height.

  • x - Horizontal position of the starting point.
  • y - Vertical position of the starting point.
  • width - Width of the rectangle.
  • height - Height of the rectangle.
  • rx - Horizontal radius of the rounded corners. This is an optional parameter.
  • ry - Vertical radius of the rounded corners. This is an optional parameter.

Polygons

polygon

There are two tags that can be used to draw polygons. The polyline tag draws a sequence of lines, but does not draw a final line back to the first point. The polygon tag does draw a line back to the first point.

  • points - List of points along the polygon. Separate the x and y of each point with a comma, and separate each point with a space.

Circles

circle

The circle tag draws a circle centered at some point, with a given radius.

  • cx - Horizontal position of the center point.
  • cy - Vertical position of the center point.
  • r - Radius.

Ellipse

ellipse

The ellipse tag draws an ellipse centered at some point, with a given horizontal and vertical radius.

  • cx - Horizontal position of the center point.
  • cy - Vertical position of the center point.
  • rx - Horizontal radius.
  • ry - Vertical radius.

Images

image

The image tag draws a referenced image beginning at some point, with a given width and height. Note that if the SVG specifies to preserve aspect ratio, then the image will preserve aspect ratio as well.

  • x - Horizontal position of the starting point.
  • y - Vertical position of the starting point.
  • width - Width of the image.
  • height - Height of the image.

Paths

path

The path tag uses a draw string for lines, arcs, and curves. This tag can be used to draw any of the previous shapes above (except referenced images), or combine them together. It is the most flexible SVG shape available, and deserves a reference page of its own.

  • d - Draw string, specifying a series of commands.

Pen CSS Properties

The CSS properties related to the pen affect all shapes (except referenced images).

  • stroke - Specifies the pen colour. The default is black.
  • stroke-width - Specifies the width of the pen. The default is one unit (one "pixel").
  • stroke-opacity - Specifies the opacity of the pen. The default is 1. Valid values are between 0 and 1.
  • stroke-linecap - Specifies how the ends of lines are rendered. The default is butt, which cuts off the end of the line exactly where it ends. A value of square draws a square end. A value of round draws a semi-circle end.
  • stroke-linejoin - Specifies how the join points of two lines are rendered. A value of miter causes the end to render itself to a corner. Each browser renders a miter in slightly different ways. A value of bevel causes the end to cut off as an edge. A value of round causes the end to render as a rounded edge.
  • stroke-miterlimit - If the stroke-linejoin is set to miter, specifies the limit at which the line join renders as a miter instead of a bevel. If the length of the miter would be shorter than this value, it renders as a bevel. Valid values begin at 1.0, or above.
  • stroke-dasharray - Specifies a series of values that indicate the dashed pattern of the line. Each number specifies the length of that portion of the pattern, with alternating numbers pressing versus lifting the pen.
  • stroke-dashoffset - Specifies the length at which the dashed pattern begins.

Examples for stroke-linecap

Default line cap
butt
square
round

Examples for stroke-linejoin (small angle)

Default line join
bevel
miter
round

Examples for stroke-linejoin (large angle)

Default line join
bevel
miter
round

Fill CSS Properties

The CSS properties related to how shapes are filled are described below.

  • fill - Specifies the colour used to fill the shape.
  • fill-opacity - Specifies the opacity of the fill colour. The default is 1. Valid values are between 0 and 1.
  • fill-rule - Determines how complex shapes are filled. A point inside the shape will fill based on the number of times a ray drawn from that point to infinity crosses an edge of the shape. A value of nonzero indicates it will fill so long as the ray crosses the edge of the shape. A value of evenodd indicates it will fill only if the ray crosses the edge an odd number of times.

Examples for fill-rule

nonzero
evenodd

The next article will act as a reference for the commands available in the path draw string.

SVG Tutorial and Reference

Introduction to SVG

SVG Co-ordinate System

Shape Reference

Path Reference

Text Reference

External SVG Resources

W3C SVG Specification Homepage

Mozilla Developer Network SVG Homepage

SVG Tutorial on jenkov.com