Home > Articles

Painting with SVG

  • Print
  • + Share This
SVG provides a framework for fills and strokes that can match the output of other traditional design tools. Examine the complete palette of possibilities including transparency, gradients, and much more.

See all Sams Teach Yourself on InformIT Design & Creative Media Tutorials.

This chapter is from the book

This chapter is from the book


Drawing your artwork's containers (its shapes and forms) is only part of a designer's challenge. Tied to this challenge is what goes in and around the containers you've drawn. In SVG, the method of applying visual information to a shape is called "painting." In this hour, you will execute five common painting attributes used in designers' palettes (visualized in Figure 7.1):

  • Fills

  • Strokes

  • Transparency

  • Gradients

  • Patterns

Figure 7.1 Comparing the different painting attributes available in SVG.

With these five methods of applying visual information to your artwork's shapes, your content can begin to take form. Before diving into the process of these methods, however, you will need to learn how SVG handles color information (a key component to nearly all of these methods).

  • + Share This
  • 🔖 Save To Your Account