The Painter’s Model

Chapter 2 discusses the rendering model used to convert SVG code into visual graphics, and introduces the basic properties you can set on your shapes and text to control how they are painted to the screen.

The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.

Example 2-1 & Figure 2-1 (fill-rule):
- SVG file
- screenshot
Example 2-2 & Figure 2-2 (stroke properties):
- SVG file
- screenshot
Example 2-3 & Figures 2-3, 2-4 (paint-order, without fallbacks):
Example 2-4 & Figure 2-5 (paint-order, using the @supports rule):
- SVG file
- screenshot without support (Internet Explorer)
Example 2-4 & Figure 2-6 (simulating paint-order with a script):
- SVG file
- screenshot when script detects no support (Internet Explorer)
Figure 2-7 (shape-rendering):
- SVG file
- screenshot
Figure 2-8 (text-rendering):
- SVG file
- screenshot (Firefox)

Return to the main table of contents.