After going through the Mozilla Developer Network documentation on SVG, here is a much more accessible breakdown of shapes and workflows to help get you started on your drawing journey.

SVG File Setup and Use

SVG files are written in XML, and the syntax is similar to HTML and CSS, but pay close attention to how shapes and objects are closed. The files themselves are text files that have the ".svg" file extension; when saving out from notepad++, TextEdit, or whatever you are using as a text editor, just add the extension after your filename and it will become an SVG file.

While the drawings/graphics can exist as their own files, they can also be written inline within HTML documents, provided that all the code is wrapped within the <svg> tags.

It's recommended that you make a template file with the following code so you always have the correct SVG tags ready for your next project. Just open your template, save it as another file, then start writing your drawing between the SVG tags. Copy and paste this as your template file:

```

</svg>

```

Just adjust the width and height to whatever canvas size you want to use, and off you go!

Sizing and Units

All units in SVG code are relative units, meaning they adapt into whatever units are being used by the device they are being viewed on. It's generally alright to think of them as pixels,but since these graphics can scale infinitely up or down, they could also be understood as millimeters, inches, feet, etc. Embossers can vary in print resolution, but 100 pixels per inch can be understood as a standard. If your canvas is 400 SVG units wide, this can equate to 4 inches across a page when embossed.

The entire canvas can be understood as one quadrant of a graph. Points and attributes can be expressed as x, y coordinates. The origin of the graph is in the upper-left corner of the canvas; this is the coordinate point (0, 0). Note that while you increase the number for an X value to move it from left to right, increasing the number for a Y value will actually move it down in the canvas.

Basic Shapes

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 blue stroke with a width of 4 units and a yellow fill color. 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.

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:

```

```

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 teal, and the stroke has been omitted. Again, note how there is a forward slash just before the closing angle bracket! Can't stress that enough.

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.

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.

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 line that alternates up and down starting at the upper left of the canvas and moving down and 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.

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 blue diamond is drawn using four defined points, and the last point will automatically be connected to the first point to complete the shape.

Paths

Paths are incredibly powerful tools in our drawing arsenal, but they definitely take a lot of practice and spatial understanding to get them rendered just right. Paths are defined with a specific syntax using coordinates and single letter codes to define how the points are connected and how they are drawn. The more complex the path, the better it is to write each new point on its own line so you can keep track of every part of the shape. Indenting with a tab isn't required, but helps with general readability both visually and with a screen reader.

Defining a Path and Straight Lines

```

```

The Path object has a data attribute, written as d, which accepts all of the data we feed it to draw the line. It's best to think of the path object as giving instructions to a pen placed on a piece of paper. As you add more data into the d element between the quotes, it will make the pen move about the paper and draw the shape. We start off with the letter M followed by an x, y coordinate. The M stands for "Move To" and means it is defining the point where you are moving your pen to on the paper before you start drawing, essentially placing your pen down on that starting point and getting ready for the next drawing motion.

You have a variety of options to draw straight lines between points. Throughout all of this, it's important to understand that if a letter is capitalized, it means the coordinates are absolute, while a lowercase letter means the following units are relative to the previous instruction.

In our above example, we've placed the pen at the upper-left corner of the canvas by writing "M 0, 0" and we are now ready to draw. To draw a straight line out to the point 30, 40 on the canvas, we would write it as this:

```

<path d="M 0, 0

L 30, 40"/>

```

The capital L means that the 30, 40 is an absolute point on the canvas where we want to move our pen, drawing a line from 0, 0 to 30, 40. The letter L stands for "Line To" as in "draw a Line To this point."

From this point, perhaps we want to draw a straight line angling up and to the right from where we stopped. If we want the resulting second line to be half the length of the previous line and match the angle to create a checkmark shape, we could use the relative lowercase L character like this:

```

<path d="M 0, 0

L 30, 40

L 15, -20"/>

```

This lowercase l will draw a line to a point that is 15 units to the right of the previous point, and 20 units up from the previous point. Note the negative value for the Y value to make the next point be higher up relative to the previous point. You could also define this with absolute terms by writing it with an uppercase L as "L 45, 20."

Horizontal and Vertical

Instead of using X and Y values, if you just wanted to create perfectly straight horizontal or vertical lines, you can use the H and V letter codes in the path. The uppercase H and V codes will use absolute units to make horizontal and vertical lines respectively, while lowercase h and v codes will use relative values to draw based on the previous point. The following path code will create a set of stairs going from the canvas origin and moving down and to the right into the canvas:

```

<path d="M 0, 0

H 20

V 20

H 40

V 40

H 60

V 60

H 80

V 80" stroke="blue" stroke-width="4"/>

```

Each step of the staircase is 20 units wide and 20 units high. Alternatively, and especially if you don't want to have to use math when calculating the absolute values of where you want the points to go, you can use the lowercase h and v codes to keep it all relative. The following code will produce the exact same shape, this time without having to add 20 each time to the H and V values:

```

<path d="M 0, 0

H 20

V 20

H 20

V 20

H 20

V 20

H 20

V 20" stroke="blue" stroke-width="4"/>

```

You'd have to keep track of how many h and v entries you have, but if you have odd repeated numerical values for where you want your horizontal and vertical lines to end up and you know the amount you want of their length, you can switch to a lowercase relative code.

Relative lowercase and absolute uppercase codes can be intermixed with no issues whatsoever, just be sure to keep track of where you are moving your pen with each code entry so you don't lose spatial track of how the path is being formed.

Curves

Curves are a bit of a beast with SVG drawing, and practice will always make perfect with these, but there is definitely a reason as to why designers and developers warn us to only attempt these with an illustration program. The more complex these get, the harder they are to manage within the code unless you are meticulous with your units and pay close attention as to how the control points work with the different curve types.

Quadratic Curves

Quadratic curves are great for simpler, one-arc curves anywhere within your path. You define a Quadratic curve with the Q letter code, and instead of one x and y value pair, it actually takes two. The first value pair defines the control point for the curve, and the second pair defines where the curve ends.

The control point for a curve sets the direction and strength of the curve, and mathematically it creates a curve based on the slopes of the straight lines drawn to it from the beginning of the curve and the slope of the line drawn from the control point to the end of the curve. The further away the point is from the curve starting and ending points, the more dramatic the curve. The closer If you were to draw a straight line between the starting and ending points of the curve, the closer you place the control point to that line, the more subtle the curve will be. The following code will make a perfect arc appear in the middle of a straight line:

```

<path d="M 0, 100

L 100, 100

Q 150, 0 200, 100

L 300, 100" stroke="black" stroke-width="3"/>

```

Our Move To point is set to start at the extreme left edge of the canvas but down 100 units on Y. We draw a horizontal line out to 100 units over on X, then we have the Quadratic arc. After the Q code, the first value places the control point at 150 on x, halfway between the 100 starting point and the 200 ending point, plus it puts the Y value at 0, so the point is all the way at the top of the canvas. The ending point of the curve is at 200, 100. Since the control point is directly between the start and end of the curve, and the Y value of the control point is equal to the overall distance between the start and end points, we end up with a perfect convex arc with the arc apex pointing up towards the control point. The final path command draws another horizontal line 100 more units out to the right of the end of the arc.

Smooth Quadratic Curves

The T letter code is used in conjunction with a quadratic code in order to create a smooth continuation of the curve to another point. Instead of defining another control point and end point, the T command takes the control point position from the previous Q command and mirrors it to create an equal curve transition from the end of the Quadratic curve to the end point written for the T code. The T code only takes one x, y value pair to define the end of that particular curved line segment, and they can be strung together to create smoother curves along a path.

The following will create a smooth undulating sine wave horizontally across the screen:

```

<path d="M 0, 100

Q 50, 0 100, 100

T 200, 100

T 300, 100

T 400, 100

T 500, 100" stroke="orange" stroke-width="5"/>

```

Our pen starts off on the extreme left of the canvas and down 100 units on Y. The first quadratic curve is defined, with the control point placed at the very top of the canvas but halfway between the start and end point on X. Each T code that follows mirrors the control point of the previous command before it, so each one only requires an endpoint. Each T code end point is placed 100 more units out on X for each iteration, giving us a repeating up and down curve that runs from left to right. If the T values weren't in line with the previous ones, we'd end up with more interesting organic shapes, and understanding how these work together can really help when making subtle and complex curves.

Cubic Curves

Cubic curves are written using the C letter code, and they take x, y value pairs for two control points and a final end point. So instead of one control point defining the slope between itself and the starting and ending points, the first control point defines the slope between it and the starting point, and the second control point defines the slope between itself and the ending point of the curve. Much more complex curves can be defined by mastering the manipulation of these points, and once again subtlety or strength is determined by how far the points exist in relation to one another.

```

<path d="M 0, 100

C 50, 0 100, 150 150, 100" stroke="teal" stroke-width="4"/>

```

This example starts off on the extreme left of the canvas and 100 units down on Y. The first control point is placed 50 units out on X and all the way to the top of the canvas on Y, and the second control point is 50 more units over on X from the first control point but is placed 50 units lower on Y than the starting and ending points. The ending point is 150 units out on X and is at the same Y value as the starting point. This creates one large arc that goes up from the starting point and comes back down towards the second control point, then dips below the horizontal plane between the starting and ending points before curving back up to the ending point. Basically a sine wave where the second part of the wave is half the size of the first. Again, the closer the points are to the starting or ending points, the more subtle the curve, and the farther away the more dramatic.

Smooth Cubic Curves

Just like the Quadratic curves, Cubic curves have a smooth transition letter code, conveniently written as a capital S. Using S after a Cubic curve will automatically mirror the second control point of the previous curve, so the S code only takes x, y value pairs for its own second control point and the ending point of the curve. More complex organic curves can be defined using these transitions, but pay close attention to how the second control points of the previous curves affect how the curve bends before it starts to move towards your S control point.

To continue with our above example, we could completely mirror the sine wave curves like so:

```

<path d="M 0, 100

C 50, 0 100, 150 150, 100

S 250, 200 300, 100" stroke="teal" stroke-width="4"/>

```

Adding the S code to our line essentially creates a mirrored version of our curve. The C code makes one big swoop and then a little swoop that goes under the horizontal plane of the line, and then the S code continues the curve smoothly back up above the line for a small swoop followed by a large concave arc that goes way under the horizontal plane before arching back up to the ending point. Pay attention to the values of the control points and the ending points and how they relate to each other.

Text

Text and all the CSS text styling properties are available in SVG drawings. It's been suggested to use the braille 36 font in order to add braille dots into a drawing, otherwise the text itself can be embossed to varying degrees of tactile legibility. Unlike the basic shape and path construction we've seen so far, text is created in more of an HTML fashion, using opening and closing <text> tags and adding in the written text between them. Consider the following code:

```

<text x="100" y="20" text-anchor="middle" fill="blue" font-size="36pt" font-family="sans-serif">This text sure is spiffy!</text>

```

A few things are happening here. We have the text 100 units over on X and 50 units down on Y. The text-anchor attribute sets where the text actually starts drawing. Setting this to middle means that the entirety of the text will be centered using the anchor point as the middle. Setting this to "left" will make the first letter of the sentence appear wherever you have set the x and y values, and setting this to "right" will make the last letter of the sentence appear wherever the x and y values are set.

Just like our shapes, you can use fill and stroke to color in the text or give it an outline. We can also apply font-size and font-family here, along with many other CSS text properties. Kerning, or spacing between the letters, line-height, font-weight, and more are available for all your text needs!

Text on a Path

If we don't want our text to be straight, we can certainly apply it to a shape or a path to make more dynamic presentations of text. Arcing text, circular text, sideways text, all is possible through creative combinations of paths and the textPath element.

This does take a little more advanced setup for your file, however. Remember that weird looking xmlns attribute with a URL that is up in our opening svg tag? That defines the namespace for everything contained between the opening and closing svg tags, allowing browsers and other technology to fully understand that all the code within those tags is to be understood as svg code as opposed to anything else.

Previous versions of SVG would use a complicated xmlns xlink declaration to allow you to reference ids and connect shapes and text to paths, but it's been made much easier by allowing us to just use an "href" attribute to make the same connections without all the extra code.

You can define your path in the definitions section of your drawing, or just have it as a visible path. We'll go in-depth with the definitions section later in this guide. The following code will make a wavy line of text.

```

<path id="wavy" d="M 0, 100

C 100, 25 200, 125 300, 100" stroke="black" stroke-width="2" fill="none"/>

</text>

```

We start the text object off at the same coordinates of the path, have the text-anchor set to left so all the text will emanate out to the right, and note the href attribute in the textPath object that allows us to link the text to the id of the path. Once that is set, the text will flow and wave along the path instead of just staying straight across the page. Pretty nifty, right?

Styles

Styling your shapes is done with CSS code. We've seen individual attributes appear in some of the above examples, and they can either be individually broken out on their own or be grouped all within a style attribute and written like true CSS. For example, we'll go back to a simple rectangle with a stroke. The following code will produce the exact same shapes with the exact same styling:

e```

<rect x="10" y="10" width="100" height="100"

style="stroke: teal; stroke-width: 5; fill: teal;"/>

```

I put the style attribute on a separate line and indent it with a tab for my own screen reader readability, but the whole thing can be placed on one line. The important thing to note is how the CSS version is written compared to the individual attributes. The individual attributes all equal a value in quotes, like fill="orange" while the CSS style version have them all within the style attribute, each option ending in a colon and each value ending in a semicolon, especially the last value,so style="fill: orange;".

Use whichever method makes the most sense to you or is the easiest for you to write and hear, but pay close attention to the syntax as missing a semicolon or a stray quote can ruin your day when debugging.

Strokes

Strokes have a few different attributes that can be played with regarding how they are shaped at their ends and how they connect with other line segments.

Stroke-linecap controls the ends of your lines. By default, the lines end with a sharp square edge directly at the ending point.

stroke-linecap="butt" is the default edge, and it's just fun having a butt in your code.
stroke-linecap="round" creates a rounded edge at the ends of your lines. The radius of this round edge is defined by the stroke-width value.
stroke-linecap="square" creates a square edge similar to the butt but will extend out the distance set by the stroke-width value

Stroke-linejoin will define how your line segments will connect in polyline, polygon, and path shapes.

stroke-linejoin="round" creates smooth and rounded elbows/transitions between the line segments.
stroke-linejoin="miter" creates even transitions between segments no matter at what angle they connect. Think of these like how a picture frame comes together at the corners.
stroke-linejoin="bevel" creates hard transitions between two angles as line segments come together. It will produce an equal flat edge between two line segments instead of a sharp point.

Dashed lines can be made using the stroke-dasharray attribute. This attribute can receive up to 4 comma-separated values as input to make complex dashes, but it's very simple to make a basic dashed line with even dashes and spaces.

stroke-dasharray="4" will create a dashed line with a 4 unit long dash and a 4 unit long space, so perfectly even dashes and spaces.
stroke-dasharray="4, 2" creates 4 unit long dashes and 2 unit long spaces.
stroke-dasharray="4,2,2" creates a 4 unit long dash, a 2 unit long space, then a 2 unit long dash, repeating the pattern to create alternating dashes of differing size.

In code, this would look like:

```

```

Defs

The <defs>, or Definitions, part of the SVG drawing appears in its own section at the top of the file. The defs section can contain multiple objects that can be referenced by any of your shapes and can be used for more advanced illustration techniques. Gradients, clipping paths, filters, CSS styling, and more can exist within this section, and anything written up here should be given a clear and concise id attribute so it can be easily referenced later on when incorporating the effect.

The Use element

The Use element is extremely useful for keeping your code clean and not repeating yourself. Essentially it allows you to code/replicate shapes that you've already coded without having to copy paste the code everywhere. A shape can be drawn in the defs section and given an id, then all the Use objects will reference that id to copy the same shape while giving you some basic transform and styling attributes to play with.

Note: While this is being referenced from the defs section, any shape in your code can be replicated with the Use element provided the original shape has an id the Use shape can reference.

```

<defs>

</defs>

```

Note the "href" attribute in the Use elements and how a hashtag is used in front of the id within the quotes. This is the currently recommended way to reference ids within SVG files. Each Use element will draw the exact same circle that is in the defs section, except we have a few attributes we can impart on the copies. The x and y values give us absolute positioning that overrides the original position of the circle. Any CSS styling attributes not written in the original shape can be added, such as the strokes, but be mindful that any styling added to the original shape will not be able to be changed in the copies.

Gradients

Gradients smoothly blend between as many colors as you add to them to fill in a shape or a stroke. Gradients can be linear, or having colors change along a direction, or radial, where the colors change as they radiate out from a central point in a circular shape.

Linear Gradients

Linear Gradients are set up within the defs section as follows. Note that this example only has one gradient in the defs section, but you can have as many items as you want here, provided they are written in between the opening and closing defs tags.

```

<defs>

</defs>

```

Note the syntax for how to open and close the gradient. "linearGradient" is typed together in camel case, and has a closing tag like an HTML element after the color stops are defined. The stop elements define where colors appear in the overall position along the gradient. 0% is the start of the gradient, 100% is the end, and more stops can be added at any percentage value along the gradient. Note that each stop element closes with the forward slash appearing just before the closing angle bracket.

The opening linearGradient tag has a few things going on within it. The id is crucial, as that is what you'll use to actually apply the gradient to shapes and items in your drawing. The x1, x2, y1, and y2 values are all set up much like the Line element that we've already encountered. These attributes define the starting and ending point of your gradient.

Envision that shape that you want to apply a gradient to, and then surround it entirely with a box. Now consider the upper-left corner of this box as point (0, 0) and the lower-right corner as (1, 1). This is the gradient coordinate system we use to define the position and direction of our linear gradient. In our example, the x1 and y1 values are set to 0, and the x2 value is set to 1 with the y2 value set to 0. This places the end of the gradient all the way across the square in the upper-right corner, creating a perfectly horizontal gradient spreading across the entirety of the shape. You can define points within the square as decimal values. If you wanted the horizontal gradient to stop halfway across the shape, you'd enter x2="0.5" and so on.

A 45° angle would be made by setting x2 and y2 both to 1, a vertical gradient going from top to bottom would have x2 set to 0 and y2 set to 1, and all other angles in between can be set with a variety of decimal values for wherever you want to place the first and second points of the gradient.

Note the url object in the fill attribute in the rectangle under the defs section. Using this url object and referencing the id using a hashtag is how we apply our gradient to our shapes. In this case, it is fill="url(#horizontalGradient)" which illustrates the importance of using understandable id names for anything you put in the defs section.

Radial Gradient

Radial Gradients are set up much the same way as Linear Gradients, but rather than defining x and y coordinates, you set the center x and y values for a circle, a radius for the final size of the gradient circle, and the focal point x and y values from where the gradient will emanate on your shape. Leaving these values out will just make your radial gradient start in the center of your shape and end by the time it reaches the outermost edges of the shape. Here is a basic radial gradient setup:

```

<defs>

</radialGradient>

</defs>

```

This example will create a circle that has a center color of white, blends to teal midway between the center and the edges of the circle, and ends up blending to black by the edges.

You control the position of the gradient by using the Circle attributes along with the focal point attributes, or fx and fy. The following example will start the same gradient from above in the upper right corner of the circle and have it fading to teal and black heading down towards the lower-left:

```

<defs>

</radialGradient>

</defs>

```

Gradient Tricks

The relative positions of the color stops determine how quickly the colors change into one another. The farther away the stop offsets between two colors, the longer it takes for one to go to the other. Conversely, the closer the stops are to one another, the sharper the color transition. By placing stop offsets 1% away from each other, you can make hard color transitions across your gradient for artistic effects. In the following example, we make a simple eyeball staring out at you! See if you can follow along with the color patterns:

```

<defs>

</radialGradient>

</defs>

```

The gradient is made up of two offsets for each ring of color we want to create. Note how each color has two stop entries, one for the start position of the color, and one for the end position of the color. This keeps the color the same between those percentage values, and putting the offset only 1% larger than the previous colors creates a hard transition. So having a black color start at 0% and end at 30% creates a black pupil that takes up 30% of the circle from the center out, then starting the light blue color at 31% gives us the hard transition from the pupil to the iris, then that blue iris continues on to 65% of the circle. The iris has a hard transition to the sclera, or white of the eye at 66%, and then the white continues on to fill in the rest of the eye up to 100%.

Gradient Patterns

You can create gradient patterns by setting the spreadMethod attribute on the gradient. By default, the spreadMethod attribute is set to "pad" which extends whichever color you end the gradient with past the edges of the set gradient area until it fills up the rest of your shape.

A spreadMethod of "reflect" will continue the gradient past the set edges by reversing the order of the colors back and forth until the shape is filled.

A spreadMethod of "repeat" will repeat the order of the gradient colors over and over again until the shape is filled.

Recall that gradient starting and ending points can be set as if the coordinates were applied to a bounding box around your shape. If you set up the starting and ending points to end within your shape, you can take full advantage of the spreadMethod to build color patterns without having to write a ton of offsets. For example, the following code will produce a square with a repeating yellow and black stripe pattern:

```

<defs>

</linearGradient>

</defs>

```

Note how the x2 and y2 coordinates of the linearGradient are set to 0.25 each. This places the end point of the gradient at a 45 degree angle down and to the right of the starting point, and it ends a quarter of the way through the square. The yellow stops go from an offset of 0% to 50% to take up the first half of the gradient pattern, and the black stripe goes from 51% to 100%. Of course, you don't have to use hard offsets like this and only make repeating stripes. The spreadMethod works for all gradient styles.

Clipping Paths

Clipping paths are another element you can add to the defs section to help create different kinds of shapes in your drawings. Essentially, a clipping path defines an area where shapes are visible. If a shape uses a clipping path,if it is positioned outside the area of the clipping path shape, it will not be visible. If you place a shape halfway into a clipping path area, only half of it will be visible, and so on. It's as if you had a shape or object on a sheet of paper, then took a stencil or another sheet of paper with a shape cut out of it and placed it on top of the shape.

The following example will make a half-circle by creating a clipPath with a rectangle shape that is larger than our circle, and then positioning the circle shape halfway in and out of the clipPath rectangle shape area. The clipPath shape itself is not visible, only the effects that it has on other shapes, and multiple shapes can use the same clipPath. Pay close attention to the syntax:

```

<defs>

</clipPath>

</defs>

```

Note how we define a clipping path by using the clipPath element in the defs section. The clipPath id is what you use to reference the path with your shapes later on. Any shapes placed within the clipPath tags become areas in which your drawn shapes can be visible. In this case, it's a 100x100 square. A circle shape is drawn with its center set on the right-most edge of the square. The circle has the clip-path attribute pointing to the id of the clipPath definition; pay attention to the syntax as clipPath is how you define the clipping path, and clip-path is the attribute you use to make a shape using the clipPath object. With the circle positioned as it is and using the clip-path attribute, only the left half of the circle will be drawn/visible on screen or printed in an embosser. The half that lies outside of the clipPath rectangle will not be drawn at all.

Can you think of some interesting shapes you can create by combining basic shapes and paths together using clipping paths?

Note: Don't use CSS styling on your clip path objects. Fill and strokes don't matter and will be ignored. The important part is the actual space the shape or path takes up as the clipPath object. Using a line shape and giving it a stroke and stroke width to cut a line out of a shape will not work, but defining a path or rectangle that defines the outline of the line you are trying to make will work.

```

<defs>

</clipPath>

</clipPath>

</defs>

```

Just to illustrate the point, the first clip path in the example uses a line with a thickness of 10, so if the center of the line starts at (0, 100) the upper part of the line would actually start at (0, 95) and the bottom part of the line would be at (0, 105). Stroke and Stroke Width aren't seen by clipping paths, so we recreate the line using a rectangle object instead.

Masks

Similar to clipping paths, we can use masks to creatively cut out or reveal single or groups of shapes within our drawings. Instead of using paths, hwoever, masks determine what is visible and what is hidden by using white, black, and greyscale colors which all come together into what is called an alpha matte. When the mask is applied to a shape, any part of the shape that falls within a white part of the mask will be visible, any part that falls within the black part of the mask will be cut out or invisible, and anything in greyscale will be partially see-through depending on how bright the grey is; the brighter the grey, the more opaque the shape will be.

Masks can be built by importing alpha mattes and greyscale images in from external sources, but for our purposes, we can construct them within the mask object using shapes and paths just like our normal drawings. The mask objects can exist inside or outside of the defs section, and for organizational purposes it's usually a good idea to keep them near the top of your drawing code and give them understandable and easy to use id names.

To create a mask, we just have to use the <mask> tag and give it an id, draw our alpha matte with a variety of white, black, or greyscale shapes within the mask object, then close the mask tag. We then apply the mask to a single shape by putting the "mask" attribute into the shape statement just as we do with stroke, fill, etc., and pointing it to the id of the mask, or if you want to apply the mask to a bunch of shapes, just wrap the shapes in a <g> group tag and put the mask attribute on the group. Let's check this out in code:

```

<path d="M 200, 100

V 500

M 100, 300

H 300"

style="stroke: white; stroke-width: 25" fill="none"/>

</mask>

```

IWe start off the mask by putting in a white rectangle that fills the entire width and height of the canvas. This ensures that everything we want visible will stay visible. A black rectangle is drawn on top of the white background to establish the area that will cut out the window shape. A path is put on top of that with white strokes to create the window vertical and horizontal crossbars. After closing the mask tag, there is a background rectangle drawn to fill the whole canvas with a dark blue color. On top of that is the actual house wall rectangle which has the old lace color. Note how we use the url argument in the mask attribute to apply the mask id to the house wall shape. This will cut out any part of the house wall that is under wherever the mask has a black shape; basically every black part of the alpha matte will act like a hole punch. This reveals the dark blue background rectangle behind the house wall and makes a very basic window looking outside.

Greyscale colors/shapes can also be used to make things more translucent instead of fully invisible. You can certainly utilize linear and radial gradients to have shapes gradually fade away as the gradient goes from white to black. Alternatively, just like with the clipping paths, you can reverse the colors in the mask to only reveal a certain portion of a shape or group of shapes. This can be very useful when you have a series of shapes that you want to have all line up perfectly without having to stress about making all the math, point values, or coordinates perfect.

Just be aware that if you move your shapes around that have masks, you'll need to update your mask layer as well to accommodate for the new position of the shapes.

Describing Your Drawing

Congratulations! You've mastered all the shapes, drawing techniques, and have created a beautiful drawing that's ready to be shared out to the world! We still need to consider digital accessibility with our files apart from the overall goal of print/embossing accessibility, and that means adding a description to your drawing.

When sourcing your SVG drawing online in HTML, you'd apply an alt attribute to the <img> tag and write in your alt text there. SVG files by themselves can have their own embedded alt text and you provide that with the <desc> tag.

```

<desc>

This is a swanky teal circle with an orange stroke.

</desc>

```

You can write anything you'd like between the <desc> tags, and when opening the SVG file by itself in a browser, the <desc> text will be the alt text for the file. Follow the same a11y best practices concerning alt text regarding the length of the description, accuracy, detail, etc., but now anyone opening your file will be able to hear and read your description and any other notes you care to include.

Describing Individual Shapes or Groups

Additionally, you are able to apply descriptions directly to shapes themselves. This has a whole bunch of interesting applications for making your actual drawings interactive when navigating them with a screen reader. Just like with Text objects, shapes with descriptions will appear as focusable objects in a browser, and also just like Text, it changes the syntax of the shape code a little bit. Check out the following example of a circle with a description:

```

<circle cx="100" cy="100" r="25" fill="red"><desc>I'm a nifty red circle</desc></circle>

```

Note how we no longer close the circle with the "/>" tag, and that it functions more like an HTML element with a full "</circle>" tag. Essentially, the <desc> tag exists within the shape tags. This will apply to any shape that you add a description to, so a <rect> will have a </rect> after you close your <desc> tag, a <path> will have a </path>, and so on.

For right now, it seems that <desc> tags cannot be applied to groups. A workaround is to create a null or invisible shape within your group and apply the description to that. This gives you the ability to describe something but not have that shape get printed out or rendered.

```

<g>

<rect x="0" y="0" width="1" height="1" fill="none"><desc>A cool bunch of boxes.</desc></rect>

…

</g>

```

In the above example, the described rectangle will not actually be rendered visually or in a print, but will be focusable by screen readers when opening the drawing in Chrome or a browser. Anything else within the group will be visible and printable/embossable.

Note: Text in the <desc> tags does not render on the final drawing.

If you would like to add title text that gets rendered on the final image, you can use the aptly named <title> tag. This works exactly the same as the <desc> tag, but the text will render using default browser text styling in the upper-right portion of the overall canvas.

```

<title>This is a fancy title for my drawing!</title>

```

It's generally a good practice to put description and title tags up at the top of your file before the definitions section or any other parts of your drawing.

References

Feel free to add more references as you come across them!