Copyright © 2004-2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
SVG is a language for describing vector graphics. SVG vector effects is a way of elaborating the vector geometry prior to rasterisation and rendering. This allows the authored geometry to be kept simple, while the rendered result is more complex.
This document introduces the features used by SVG Vector Effects.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.
This document is the first public working draft of this specification. It is derived from chapter 9 of the SVG 1.2 Full specification, which is no longer developed.
This document has been produced by the W3C SVG Working Group as part of the W3C Graphics Activity within the Interaction Domain.
We explicitly invite comments on this specification. Please send them to public-svg-Vector Effects@w3.org (archives). For comments on the core SVG language, use www-svg@w3.org: the public email list for issues related to vector graphics on the Web (archives). Acceptance of the archiving policy is requested automatically upon first post to either list. To subscribe to these lists send an email to public-svg-Vector Effects-request@w3.org or www-svg-request@w3.org with the word subscribe in the subject line.
The latest information regarding patent disclosures related to this document is available on the Web. As of this publication, the SVG Working Group are not aware of any royalty-bearing patents they believe to be essential to SVG.
Publication of this document does not imply endorsement by the W3C membership. A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR/. W3C publications may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to cite a W3C Working Draft as anything other than a work in progress.
This is a primer for the SVG Vector Effects specification. It gives guidelines on how to use the SVG Vector Effects specification with SVG 1.2. In many cases the reader will have to be familiar with the SVG language.
This document is informative.
The default rendering for a shape is (in both SVG1.1 and SVG Tiny 1.2) to fill the geometry with a specified paint, then stroke the outline with a specified paint; in SVG 1.1, there is also the option to finally draw markers at the vertices.
This means that the stroke is always drawn on top of the fill, obscuring part of it. This is particularly noticeable when the stroke is partially transparent.
It is sometimes useful to have a different rendering order, for example to place the stroke behind the fill. This is particularly desirable for text, to preserve the glyph shape.
Figure xx: Text with default stroke (top) and stroke below fill (bottom).
This can be simulated by duplicating the shape, with one copy having stroke but no fill, the other having fill but no stroke. Besides being cumbersome - particularly when maintaining or animating the graphic - and increasing file size, this also reduces accessibility if multiple redundant copies of text are made purely for graphical effect. SVG Vector effects enhances accessibility by allowing the same visual rendering to be produced without duplication.
@@maps with shared borders@@
Vector Effects allows control over the stroke, fill, and geometry of shapes. For example a shape may have multiples strokes, and several shapes can be combined.
Figure xx: Stroking, skewed stroking, and combining a shape.
Vector effects offer the following options:
The veStrokePath element produces an outline of the input path's stroke as a path.
Fig. xx: A path (left) has the thick stroke applied, then the stroke is converted to a path which is itself stroked (right).
Vector effects allows stroking to be applied multiple times.
Fig. xx A path with three strokes
Reversing a path has several effects. It swaps the position of the start and end markers, and flips the orientation of all markers (this is only visible if they are not axially symmetrical, clearly).
Fig. xx A path with markers, both normal and reversed
If the path is subsequently combined with others, it is sometimes necessary to reverse some of the paths so that all the segments join correctly. When multiple shapes share path cmponents - a typical situation on a map, for example, where national borders are shared by two countries - it is often the case that a path needs to be used in both orientations. veReverse helps avoid needless data duplication and also helps ensure that two shapes with a common border fit together precisely, even when zoomed in.
Union may be thought of as "adding together" two shapes to make the resultant shape.
Fig. xx Two paths combined to generate their union
One particularly useful effect is to convert a stroke to a path, then to union this with the original path. This gives an 'outset' effect.
Fig. xx Outset by union of a shape with its stroke
Intersection may be thought of as "subtracting" one shape from another.
Fig. xx Two paths combined to generate their intersection
Exclusion clips out one shape by a second one. One useful effect is to convert the stroke to a path, then use this to exclude the original shape. This gives an 'inset' effect.
Fig. xx Inset by exclusion of a shape with its stroke
The following slightly more complex examples use multiple vector effects primitives in combination.
A non-scaling line width, with non-scaling markers:
<vectorEffect>
<veFill/>
<veStroke transform="ref(host)"/>
<veMarker transform="ref(host)"/>
</vectorEffect>
Non-scaling fill/stroke patterns:
<vectorEffect>
<veFill transform="ref(host)"/>
<veStrokePath in="SourcePath"/>
<veFill transform="ref(host)" fill="StrokePaint"/>
<veMarker in="SourcePath" transform="ref(host)"/>
</vectorEffect>
An effect that strokes a path twice, once normally and then again with a thinner red stroke:
<vectorEffect>
<veStroke/>
<veStroke fill="red" stroke-width-adjust="50%"/>
</vectorEffect>
Nice, but there is no stroke-width-adjust attribute in the spec nor does stroke-width take percentage values. Suggest adding percentages to the values, making it a superset of the stroke-width property. Might be useful for other attributes, too.
Making the stroke be under, rather than on top of, the fill (useful for text)
<vectorEffect>
<veStroke/>
<veFill/>
</vectorEffect>
Making markers take the stroke colour, whatever that may be; even if the markers themselves have multiple, differently coloured components
<vectorEffect>
<veStroke/>
<veMarkerPath/>
<veFill fill="currentStroke"/>
</vectorEffect>
This seems like an obvious effect, but does require that fill and stroke are allowed to take the union of the attribute values (so fill=currentStroke and so forth).
Another way to acheive the same effect, more useful if the fill is not a solid colour but a paint server, such as a gradient.
<vectorEffect>
<veStrokePath id="s"/>
<veMarkerPath id="m"/>
<veUnion in="s" in2="m" />
<veFill fill="currentStroke"/>
</vectorEffect>
Using vector effects to produce shared borders on paths:
<defs>
<path id="border1" d="..."/>
<path id="border2" d="..."/>
<path id="border3" d="..."/>
<path id="border4" d="..."/>
<path id="border5" d="..."/>
</defs>
<vectorEffect>
<vePath>
<vePathRef xlink:href="#border1"/>
<vePathRef xlink:href="#border2"/>
<vePathRef xlink:href="#border3"/>
</vePath>
<veFill color="red"/>
<vePath>
<vePathRef xlink:href="#border4"/>
<vePathRef reverse="true" xlink:href="#border2"/>
<vePathRef xlink:href="#border5"/>
</vePath>
<veFill color="blue"/>
</vectorEffect>