Explore the exciting new features in SVG 2

SVG 2 offers many improvements, from interoperability clarifications, to ease-of-use simplifications, to new features. In this article, I’ll go through some of the key changes you should be aware of.

Bug fixes

First off, based on your reports on rendering and performance pain points, SVG 2 includes dozens of bug fixes for things that didn't work the same way across different browsers – for instance, transforms on the SVG root and sizing of SVG in HTML. These fixes aren't exciting, but they do make consistent authoring much easier.

And speaking of making SVG easier to use, we've harmonised features with CSS and HTML – like removing the XLink namespace on links (good riddance!) and loading external style sheets with a <link> element – and pared SVG down to the essentials. Also, we've added CSS z-index, as well as automatic text-wrapping, using familiar CSS syntax. No more tedious manual text layout.

How to implement SVG icons

But the game-changer is that most of SVG's geometric attributes – like x, y, r (radius) and d (the path description) have now been promoted to CSS properties. This means you can define and animate your SVG shapes in CSS. For integration with HTML, SVG 2 defines new security, privacy and interactivity modes, and we're importing the <video>, <audio>, <canvas> and <iframe> elements directly into SVG for convenience.

We've also greatly improved the accessibility of SVG. We've added ARIA and tabindex for interactivity and navigation, and defined how screen readers 'see' SVG.

New features

Some new features are small but powerful, like the non-scaling-stroke vector effect, which keeps the same stroke width no matter how far you zoom in (useful for floor plans and diagrams), and paint-order, which prevents even thick strokes from overlapping the fill – essential for stroking text. Another common request is context-fill and context-stroke, which lets markers and 'use' elements take on the colours of the element they're applied to.

Other new features are bigger, like the <meshgradient> for gorgeous colour blends along a curved path. Artists and developers alike have been clamouring for this richer, curvier and more colourful effect for simpler, more realistic, and performant 3D drawings. And if you've ever been frustrated by rendering artefacts in your fill patterns, you'll love the new <hatch> pattern that makes smooth continuous lines.

SVG 2 also introduces the first new path microsyntax command. The bearing command lets you pivot the pen around an angle, making for easier regular shapes, and less maths. Check out w3.org/TR/SVG2 for more details.

Implementation status

Many of these features are already usable in browsers and authoring tools. Next we need to write interoperability tests and wait on all these features to be implemented in browsers. And that's the problem. Not every feature is on the browsers' radar yet, which puts SVG 2 at risk.

All of these features make it easier for you to code SVG, but unless browser makers commit to shipping them soon, they'll never see the light of day. If you want these features, make your voice heard loud and clear.

This article was originally featured in net magazine issue 288; buy it here

Related articles: