"SVG" entries
Elegant Outlines with SVG paint-order
Get fine-grained control over your design with an SVG 2 property implemented by many browsers.
SVG rendering uses a painter’s model to describe how graphics are rendered to the screen. Like layers of paint on a wall, content on top obscures content below. The SVG specifications define which content gets painted over which other content. The different parts of each shape — the stroke, fill, and markers — each create layers of paint. Those shapes are then layered one on top of the other, in the order they are defined in the document.
Two new properties introduced by the SVG 2 specification, z-index and paint-order, allow you to change up the rendering rules.
Most web designers will be familiar with z-index, which has been supported in CSS layout for years. Unfortunately, it is not yet supported in any major web browser for SVG content. At present, the only solution is to arrange your markup (or the DOM created by scripts) so that elements are listed in the order you want them to be painted.
In contrast, the paint-order property has already been implemented in a number of web browsers. If you’re willing to make adjustments in your design according to browser support level, you can use the fine-tuned control in the latest browsers and replace it with a simpler effect in others. If you need the same appearance in all browsers, however, you can create something that looks like paint order control with SVG 1.1 code. This post describes why paint-order is useful, how to use it in the latest browsers, and how to fake it in the others.
The Once and Future SVG
Plugin-free vector graphics are now easier than ever before
Thirteen years ago, in 2001, the World Wide Web Consortium (W3C) finalized the specification for Scalable Vector Graphics, version 1.0. A few months later, in early 2002, O’Reilly published the original SVG Essentials, describing both the basics and the wonderful potential of SVG. An open standard for vector graphics, with support for scripting and animation, was an area of boundless possibility.
From some perspectives, not much has changed. The official SVG specification is still at version 1.1, which was released in 2003 and edited in 2011. Neither update introduced new features to SVG, instead focusing on improving clarity and consistency in the details.
In practice, however, SVG has changed considerably. There are numerous tools for creating SVG, both full-featured graphics programs and online widgets. Most importantly, nearly every web browser out there treats SVG as a first-class citizen (some outdated mobile and Internet Explorer versions being exceptions), displaying SVG as an interactive part of your document with no need for plug-ins.