New features in SVG2
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.
Colors
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.
SVGDOM
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.