Home > Articles

SVG's Shape Toolbox

  • Print
  • + Share This
Learn the simplicity of writing Scalable Vector Graphics (SVG), how to apply filter effects to vector artwork, the power of symbols, and its ability to work seamlessly with other technologies. Learn how basic SVG drawing functionality can help you create complex designs.

I am often asked what is the one most amazing feature of SVG (Scalable Vector Graphics). Frankly, I can't narrow the advantages down to one killer feature. Whether it is the simplicity of writing SVG, applying filter effects to vector artwork, the power of symbols, or even its ability to work seamlessly with other technologies, SVG can do an awful lot of amazing things for an awful lot of audiences.

Knowing that there are a number of uses for SVG, I wrote "Teach Yourself SVG in 24 Hours" to do two things. First, the book needed to give readers the basics of the technology, such as drawing, painting, applying filters, using symbols, and creating and using fonts. Second, the book would have to explain a variety of practical uses for the technology.

With these goals in mind, my book walks readers through the building of an information graphic using dozens of SVG's commonly-used features. I couldn't answer every possible question or show every possible use of SVG in the book, but I am confident that readers will receive a solid foundation to begin developing SVG content for their own needs. Further, by the time you've finished the book, you'll have an impressive example to show your colleagues.

The chapters you will be reading here on InformIT.com are some of first hours in the book. With them, you'll learn how to begin creating SVG artwork. Hopefully, by the time you've finished reading them, your curiosity will be sparked enough to want to create more advanced imagery and see some amazing uses of the technology.

—Micah Laaker

This chapter is from the book

This chapter is from the book

Vector Graphics

Now that you're familiar with how an SVG document is set up and structured, you are ready to move on to more exciting challenges. Vector graphics are generally made from a variety of shapes. Unlike raster imagery, such as a photograph, vector artwork is composed of a series of strokes (lines) and fills that define geometric shapes, such as rectangles, ellipses, and freeform paths.

Before you can learn to "paint" your artwork (with fills and strokes), you must learn how to draw the shapes that define the borders for such painting. In this chapter, you will learn how to create the following shapes:

  • rectangles

  • circles and ellipses

  • polygons, polylines, and lines

  • freeform paths

After learning how to draw each of these shapes, and after understanding their common and unique notations, you'll be ready to face the challenge of determining how they look in the next hour.

  • + Share This
  • 🔖 Save To Your Account