With some SVG under our belt, now it’s time to learn more about the elements available to us. We won’t cover them all (there are dozens) but I do want to review the most important ones you’ll encounter while working with generated SVG or SVG you coded yourself.
We’re very familiar with this already in the previous examples. It’s the main element of SVG and inside of which you nest any shapes, paths, lines, etc. that you want to draw.
The SVG element defines the viewport or canvas for SVG content.
Here are some of the specific attributes for
height- the height of the viewport
preserveAspectRatio- forces the aspect ratio so your image isn’t stretched when using the
viewBoxelement to define a new coordinate system.
viewBox- Allows you to set a new coordinate system by defining where x,y coordinates where the system starts as well as the width and height.
width- The width of the viewport for this SVG element.
This element is used to create groups of SVG objects. For example, if you had a series of related rectangles (
rect), you can group them together inside of a
g element. The nice thing about this is that any transformations you apply to
g apply to everything inside of the group.
g element accepts all global attributes (like
This element does exactly what it says in the name: it creates circles.
circle accepts three element-specific attributes:
cx- This attribute defines the x coordinate of the center of the shape.
cy- This attribute defines the y coordinate of the center of the shape.
r- Defines the radius of the circle.
This is the elements we used in all our examples up to this point. It creates rectangles.
rect elements takes the following attributes:
height- Defines the height the shape.
width- Defines the width of the shape.
x- The x coordinate where the shape should start drawing.
y- The y coordinate where the shape should start drawing.
line element allows you to draw lines in SVG. Each line connects two points by setting x and y coordinates.
Here are the attributes available in
x1- the start of the line on the x axis
y1- the start of the line on the y axis
x2- the end of the line on the x axis
y2- the end of the line on the y axis
You’ll see the
path element if you take an existing artwork and convert it to SVG (in Adobe Illustrator, for example). Illustrator converts the artwork to SVG by tracing the shapes in the image and converting them to SVG
Any shape can be created with the
path element. It takes the following specific attributes:
d- this is the definition attribute, which defines the path to follow to create the shape. The path is defined using “path descriptions:” Moveto, Lineto, Curveto, Arcto, ClosePath.
pathLength- Use this attribute to define the total length of the path.
polygon elements allows you to create any shape with many sides. A typical example would be an octagon. You plot the sides of the polygon using
points (the only specific attribute for this element).
text element to set text in your SVG.
text takes the global
style attribute, which you can use to apply styles (size, font, stroke, etc) to the text.
Here are some of the attributes:
textLength- An exact value of the length of the text. This used for very specific layouts.
rotate- A list of numbers that will determine the rotation of the text.
x- the coordinate where the text begins
y- the coordinate where the text begins
textPath element allows you to put text along a
path element and have the text follow the shape. This is a classic SVG demo element because it can make text on a curve.
To review all of their SVG elements and their usage, please refer to the Mozilla documentation on SVG.