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.
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
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
drop-shadow without referencing a
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.
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.
'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
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.
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
SVG Paint Servers
SVG paint servers demonstrate another approach of the WG to harmonize SVG with CSS. The
'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 (
<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
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
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.
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.