As you saw in Chapter 1, Introducing Scalable Vector Graphics, SVG elements use a coordinate plane positioning system. Elements in an SVG document are located using x and y coordinates. This should be familiar to you from your geometry class or, more specifically to the web, if you're used to working with CSS, absolutely positioned elements. The following code shows two variations on the positioning scheme that you've already seen with both a circle element, which uses (cx, center x), and (cy, center y), attributes to place the circle element based on the center of the circle and the rect element, which will use the x and y attributes to place the upper left-hand corner of the square on the coordinate plane:

     <svg xmlns="http://www.w3.org/2000/svg" width="350" height="150"
       viewBox="0 0...

By far the most important element in the SVG specification is the path element. path allows you to draw lines and shapes using vectors defined by a series of commands passed in as values to the d attribute. Remember when I mentioned that one of the biggest roadblocks to SVG adoption was the lack of a friendly API? This path element is likely to be the biggest sore spot in the entire specification. The values you might see in a d attribute can be incredibly dense and difficult to read. How difficult to read? Feast your eyes on the S element from the SVG logo:

<path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23...

Now that you've learned about path, let's take a look at some more straightforward parts of the SVG universe and let's examine some more basic shapes. You've already learned about circle and rect. Let's take a look at a few more basic shapes.

The path element allows you to draw anything you can imagine using a long series of instructions. Thankfully, there are many convenient elements that define common shapes that are a lot easier to work with than the path element. The first of these that you'll learn about is the line element.

The following example draws a grid on a 500 by 500 square. The line elements in use here take five arguments: x1, y1,...

You've seen them in use in most of the examples, now let's take a little bit of a more complete look at fills and strokes. These presentation attributes are important to SVG, especially when working with them dynamically, as it's much easier to manipulate elements directly as compared to writing dynamic CSS.

fill and stroke are collectively referred to as paint properties. fill sets the inside color of the object and stroke sets the color of the line drawn around the object. As you've already seen, they can accept any valid CSS color value. They can also accept a reference to a paint server element (these are hatch, linearGradient, meshgradient, pattern, radialGradient, and solidcolor), which are elements that define a paint style for the element. You've already seen one of these (linearGradient) and will learn about the more...

All of the examples so far in the book have been generated by hand. In practice, as you'll learn throughout this book, SVG is often generated by software. Most of this book will look at creating and manipulating SVG using web-based tools and libraries, but SVG images can also be generated by desktop drawing applications. While working on the web, you will often work with SVG images that have been created by designers in applications, such as Inkscape (https://inkscape.org/en/), Adobe Illustrator (https://www.adobe.com/products/illustrator.html), or Sketch (https://www.sketchapp.com/). These applications are wonderful because they allow non-technical designers to work with SVG to create images using advanced drawing tools.

While it's not a requirement for the rest of this book, I would suggest getting your hands on something you can use to author SVG...

In this chapter, you learned about multiple SVG features. You learned about path, which allows you to draw complex shapes using lines and curves. You also learned about a number of basic drawing tools that allow you to draw lines, ellipses, polygons, and polylines. In addition, you learned about a number of stroke and fill options.

Finally, you learned a little bit about the options for using software to draw static SVG and learned a little bit about the potential drawbacks of doing so.

In Chapter 3, Digging Deeper with SVG Authoring, you'll continue to learn about SVG authoring, adding on to the growing list of tools you've experienced, and allowing you to create even more complex SVG images.