Basic Shapes

On This Page

• Introduction
• Rectangle
• Circle
• Ellipse
• Line
• Polyline
• Polygon
• Practice, Practice, Practice!

Introduction

Here is a list of basic SVG shapes that you can create with a simple code example of each along with an explanation of the different attributes available for each one.

Rectangle

This code will produce a 100x100 square where the upper-left corner is positioned 10 units over on the X-axis and 10 units down on the Y-axis. The square has a black stroke with a width of 4 units and a oldLace fill color.

While you can use any color for the stroke and fill, remember our set of standards from the Home page. Black will be the most pronounced for good embossed or Swell-formed shape outlines, and "oldLace" is a light cream color that produces a very nice and light paper texture as an infill. Set the fill to "none" if you don't want texture in the shape.

Important: Note how there is a forward slash just before the closing angle bracket. This is how you properly close your shape code and your drawing will break without these in place.

The x and y attributes define where the upper-left corner of your square will appear in the canvas, and the width and height attributes set how wide and how tall your shape will be. The styling attributes will be explained later on.

Note: while the width and height attributes can be set with units, percentage values can also be used. Width="100%" will ensure that the rectangle completely fills the width of the SVG canvas, and height="100%" will fill the entire height of the canvas.

If you want to make a rectangle with rounded corners, you can use the rx and ry attributes to provide a radius for the corners, like so:

Rectangles and squares are fantastic building blocks for a variety of applications. Consider using the <rect> shape for the following:

• Laying out landmarks for a webpage, also known as creating wireframes for design.
• Setting up cutout stencils for a signature or check guide.
• Bar Charts and tactile data visualization.
• Building parts of a circuit diagram.
• Arranging rooms and spaces for an architectural draft.
• Placing buildings on a map.
• Arranging comic panel sections or working with print layout.
• Organizing a flow chart or an exhibit hall setup.
• Bases for 3D prints
• Filling in solid backgrounds for drawings.

This is by no means an exhaustive list. Can you think of other ways you'd use squares and rectangles for graphics, art, data rendering, drafting, or design?

Circle

The cx and cy attributes define where the center of your circle will appear in the canvas on x and y respectively. The r attribute defines the radius of your circle.

This code puts the center of the circle 50 units over on X and 50 units down on y, and the radius of the circle is set to 20, creating a circle 40 units in diameter. The circle also has a fill color set to oldLace and a black stroke.

Again, note how there is a forward slash just before the closing angle bracket! Can't stress that enough.

Here are some practical uses for circles. Can you think of any more?

• Defining touch target areas for app interface design.
• Venn diagrams and Pie Charts.
• Transistors in a circuit schematic.
• Circular fountains and features on a map or architectural blueprint.
• Organizational flowcharts, idea map bubbles, data visualization.
• Appliance interface layout, stencil creation.

Ellipse

The ellipse allows you to make oblong or squished and stretched circular shapes. It uses the same xc and cy attributes to define where the center of your ellipse will be on the canvas, but adds the rx and ry attributes to define the different radius values for the shape along the x and y axes.

A larger rx value will stretch the ellipse horizontally, while a larger ry value will stretch the ellipse vertically.

This example again has placed the ellipse 50 units over on X and 50 units down on Y, but the rx set to 20 gives the ellipse a total horizontal diameter of 40, and the ry value of 10 gives the ellipse a total height of 20, making it half as high as it is wide.

Here are some ideas where ellipses can come in handy in drawings:

• Flower petals.
• Stylized windows, portholes, and button shapes.
• Defining the edge or opening of a cup/mug when viewing it from an angle.
• Drawing tops and bottoms of cylinders.
• Rendering component designs.
• Marking points or areas of interest on a map.

Line

The line object draws a straight line between two points which you define using the x1, y1, x2, and y2 attributes. You can place these attributes in any order, but the way they are placed here in the example makes it a little easier to keep the numbers together in terms of starting and ending points for the line.

The stroke attribute makes this line black and stroke-width makes this line 4 units thick. This example has the line starting at the upper-most left corner of the canvas and drawing to the (30, 30) point on the canvas.

When you add a stroke to a line or shape, the stroke-width is divided evenly on either side of the line. A stroke-width of 4 means that 2 units of thickness will be on the "outside" of the line and 2 units will be on the "inside" of the shape or line. Non-even values will get split with a decimal, so a stroke-width of 7 means that 3.5 units will extend from either side of the line.

There are multitudes of possibilities where Line shapes can be of use. Try thinking of other options that could be added to this list:

• Streets on a map.
• Connecting lines between org chart bubbles and squares.
• Line charts and linear mathematical graphs.
• Electrical component details and circuit routes on schematics.
• Directional routing for signs.
• Print layout and customizing wireframes for UX/UI design.
• Perspective lines for a landscape drawing
• Sound lines, speed/motion lines, light ray lines, etc. for cartoon details.

Polyline

The Polyline element allows you to draw multiple connected straight lines all at once. The x and y coordinates appear together and are separated by a comma, and the separate points only have to have a space or line break between them to define them as being separate from the other points.

The x, y value pairs don't need to have a space after the comma when writing the y value, but for general readability and understandability, it's a good practice to do so.

For screen reader accessibility, hitting return after writing your starting point and then putting each new point on its own line and indented by a tab can help make it easier to navigate much larger polyline objects, such as if you are drawing a large line chart, but you do you.

This example draws a jagged black line that alternates up and down starting at the upper left of the canvas and moves across to the right. Note how there are spaces between the y value of a point and the x value of the following point, and how the x and y value pairs are separated by commas.

Much like the <line> element, the Polyline has multiple uses, especially for when you want ongoing lines defined purely by x, y coordinates. Try coming up with more ways you can use the Polyline:

• Financial and scientific data charts.
• Drawing mazes and puzzles.
• Creating items with very specific unit dimensions.
• Making angular patterns for sewing, origami folding, and articulating movement.

Polygon

The Polygon is set up exactly the same way as a Polyline, except the shape will automatically be closed by drawing a straight line between the last defined point and the first point.

In this example, a diamond is drawn using four defined points, and the last point will automatically be connected to the first point to complete the shape.

The fact that this closes itself can save you an extra step when you want to draw closed multi-sided shapes. Here are some fun ideas:

• Stop signs.
• Electrical components.
• Multi-sided die
• Triangles, icosahedrons, dodecahedrons, shapes with however many facets you'd like.
• Complex Lego bricks or origami patterns.
• Creating iconography, logos, or interface elements.

Practice, Practice, Practice

With just these basic SVG shapes, you'll already be able to create quite an array of objects and designs. Play around with them, get the hang of the syntax, write several of them, and practice getting your SVG files ready to print.

Try placing multiple shapes on a page using different sizes, then emboss/print them out and feel how the numbers you've typed translate into the true spatial reality on the page. Knowing exactly what a 100x100 unit square feels like on a page can go a long way in how you'll come to understand the coordinates of all the more advanced shapes and paths ahead.

Open your SVG files in Google Chrome to ensure that there are no errors. Perhaps try making some intentional errors so you can experience what it is like when one shows up.

And again, depending on your embosser brand and setup, even if you have up to 8 dot heights to play with, sticking to 4 colors total is ideal for the most legibility when feeling your drawings. Stick to black, white/no fill, oldLace, and a greyscale value for a little heavier texture.