New features in SVG2

Oct 3, 09:14 PM

The SVG working group (WG) tried to collect as many improvements, suggestions and feature requests for the next version of SVG from web authors, designers and implementers as possible. The members of the WG went through all requests and created a wish list of features for SVG2 – the next version of SVG after version 1.1 and 1.2 Tiny.

Sadly not all requests could be addressed. Even though there were a lot of exciting ideas, the WG does not have the resources to work on all of them at the same time.

I won’t list all features that will get into SVG2 or are already in the first public working draft of SVG2 . Instead I will pick up and present some key features.

New naming convention

We not only have added lots of features, we even added a 2 after the acronym “SVG”: “SVG2”. This is, of course, just a small difference but demonstrates a changed philosophy. This will no longer be a monolithic specification anymore. Moving forward, the specification will be split into multiple modules around a core specifications. “SVG2” will be a common prefix for new modules that depend on SVG (like SVG2 Connectors). This is similar to the naming convention of CSS and “CSS3”.

New modules based on SVG

The goal is not just to split SVG into modules but also to harmonize the web platform through better cooperation with CSS. The new specifications CSS Compositing and Blending, CSS3 Transforms, Filter Effects 1.0 and CSS Masking will be commonly published by the SVG WG and the CSS WG. This allows web authors to use a lot of features from SVG in HTML as well.

CSS Compositing and Blending

Compositing and blending started as a primitive in SVG Filters. Later it was proposed and extended in a working draft called SVG Compositing. Finally the feature moved into the new specification CSS Compositing and Blending. This feature allows color and transparency channels of shapes to interact with the whole canvas or parts of it (the so called backdrop). For more information read the great blog post from Rik Cabanier, editor of the specification.

CSS3 Transforms

SVG Transforms, CSS3 2D Transforms and CSS3 3D Transforms are well known and used in both the SVG and the HTML world. CSS3 Transforms combine all three specifications in one specification. It brings frequently requested features like transform origin or 3D operations to SVG.

Filter Effects 1.0

The section SVG Filters has moved to the module Filter Effects 1.0. Beside the well known primitives feGaussianBlur and feColorMatrix, Filter Effects has new primitives like feDropShadow and the awesome filter function shorthands. Filter functions are simple CSS functions that take a few arguments like blur, sepia or drop-shadow without referencing a <filter> element.

A brand new feature is the custom shader. Custom shaders give authors granular control of the transformation on any shape and even provide per-pixel manipulation.

Take a look at the examples or experiment yourself with CSS FilterLab.

CSS Masking

Masking and clipping has been in SVG since 2000 but was not required for SVG 1.2 Tiny. Now it has moved into the new module CSS Masking and applies to HTML elements as well.

At the same time, masking earns the power of the prefixed masking property introduced in WebKit. The 'mask' property turns into a shorthand property for a series of other masking properties that are allowed to reference multiple CSS image values (other SVG files, rasterized images and even CSS gradients) that can then be stacked on a single mask, clipped to specific boundaries, or stretched and repeated. The syntax is similar to the 'background' property of HTML elements. The 'mask-type' property applies to <mask> elements and differentiates between alpha and luminance masking.

The 'clip-path' property lets one use CSS basic shapes from the CSS Exclusions specification. The shape is used for directly clipping instead of referencing a <clipPath> element.


SVG2 fully integrates the CSS Color module in its latest version. Furthermore, it takes the increased needs of graphic designers into account that are not addressed by CSS Colors yet. SVG2 does not only allow color space definitions via ICC colors, it also extends the predefined color spaces to a new linear color space: LAB.

SVG Markers

Markers have been very useful and allow arbitrary shapes like arrows to be positioned on the start, middle or the end of a path. The limitation to these three marker types can be quite a burden for creating repeating patterns of shapes along a path. Right now authors need to split up the path into multiple path elements or use JavaScript.

The new proposal for markers allows positioning multiple markers as repeating patterns from the start of the path, or the start of each segment. Furthermore, markers provide the possibility to control the shape of repeating “gaps” beyond the functionality of the 'stroke-dasharray' property.

SVG Paint Servers

SVG paint servers demonstrate another approach of the WG to harmonize SVG with CSS. The 'fill' and 'stroke' presentation attributes take a CSS image value as input. This does not only allow authors to fill or stroke shapes with an image, but makes it possible to use CSS Gradients in SVG as well.

New shape primitive

The family of basic shapes (<rect>, <circle>, <polygon>, …) gets a new member – <star>. The star element is a very powerful shape, which lets one draw (obviously) stars, but is not limited to stars. SVG-Whiz! created a great demonstration page that lets authors experiment with this shape and its potentially functionality.

Better interoperability with HTML Canvas

HTML Canvas defined a new global object called Path. The Path object has similar drawing operations like Canvas itself. You can create path segments with the functions moveTo(), lineTo() or arc(). It is possible to add the path segments of one created Path object to another one and transform them at the same time.

SVGPathSegList is the powerful SVGDOM representation of a <path> element and will have a better cooperation with the Path object. Besides the functions to add new path segments, it will have a function to normalize and add the segments of a Path object to an existing SVG path.

The SVG path syntax changes as well. The current definition of an arc is very powerful but too difficult for a lot of authors at the same time. The WG decided to add the segments arc, ellipse, arcTo and ellipseTo from the corresponding Canvas arc functions.

To reflect the changes of the path syntax, the SVGPathSegList will have new functions for the new segments as well.


The whole specification document was cleaned up and adapted to the changes of the web platform. The DTD for SVG was removed and all interfaces are described with the new description language WebIDL. That causes some internal restructuring of the interfaces. Interfaces don’t use multiple inheritance anymore, but are still consistent and backward compatible. None of the changes affect existing content, but still add new functionality. A lot of SVGDOM objects get constructors, like SVGRect and SVGMatrix. These constructors allow creating SVGDOM objects without creating a DOM element first.

Unconsidered features

A lot of features haven’t been considered yet. Some of these features are: super path, variable stroke width or direct embedding of HTML elements without <foreignObject>. All these features are very interesting and we have all of them on our plate. The WG is maybe able to add more features to the next working draft of SVG2. But even if not, don’t be disappointed. SVG2 is not the end. A next level or a new module will cover these features.

Note that a W3C specification needs at least two independent implementations to get the status of a recommendation candidate. If a feature does not get adopted by enough browsers, it may get delayed to a later level of the specification.