Objective: Get familiar with the main SVG shape elements and other major SVG that can be drawn with SVG and other major SVG.

This is the starter-list of SVG elements you need to understand to create basic illustrations. The basic element names are descriptive and obvious. You will need to remember and be able to use all of these shapes at any time.

2.1 Basic Shape Elements

<circle /> Draw a circle

<ellipse /> Draw an ellipse

<line /> Draw a simple straight line

<rect /> Draw a rectangle.

<polygon /> Draw a polygon with any number of sides

<polyline /> Draw a series of straight line connecting at several points. 

2.2 Text Elements

Text is very powerful in SVG and can be used in many ways.

<text>TEXT</text> Put text as a graphic element.

<tspan>text</tspan> Used inside a text element to break text up and position it anywhere.

<textPath>Text</textPath> Create text on a path such as a curve. The path has to have been already defined.

<tref>Text</tref> Allows text that has been pre-defined to be used multiple times at different locations.

2.3 Group

<g> Lets a number of shapes and text be grouped together. A group of shapes can be styled and transformed as as if they were a single shape. The <g>...</g> element is very power and is a major tool for creating small and efficient SVG files.

2.4 Path

<path /> Draws a line that can form virtually any shape and be an outline for parts of an image.

SVG Editor

This example has no height or width settings so the image is controlled by the page margin. Make your page narrower and wider to see the picture instantly scale to fit the width of your window.

2.5 Exercises

There are no editing exercises for this Lesson. The drawing below can be looked at in the SVG Editor to understand how much markup can be required in a more complex SVG illustration. Comments are very useful.

This drawing also uses three very strong features of SVG you will be learning:

1. SVG can be used inside SVG. This makes reusing standard SVG components very easy if they are prepared well.
2. Transform is an attribute that can be used on almost every other element and delivers presentation and layout power easily.
3. Grouping is a powerful tool to allow the manipulation of shapes and groups of shapes.