SVG 2 features

[Fyrd]

SVG 2 features: https://www.w3.org/TR/SVG2/

• stroke-alignment
• shape-rendering
• paint-order
• context-stroke and context-fill

For more features please create new, separate issues. Votes should be made on individual features so they can be added to the site based on popularity.

---

This issue was imported from Google Moderator

Moderator votes: +9 Issue added by Bell on 2014-08-20

[Llbe]

I can add to this that some of the features in SVG 2 are available already, for example the paint-order property exists in Chrome and Firefox.

[Llbe]

+1

[Ugoku]

+1

[rotsee]

+1

[dcorb]

+1

[Schweinepriester]

+1

[violacase]

+1

[Kay2dan]

+1 pleeasseee!!! We need more SVG more than ever!

[neoncitylights]

+1

[pixeltherapy]

+1

[sdras]

+1

[AmeliaBR]

To clarify: this would not be one table, but many. Browsers are implementing individual features as the spec stabilizes and interest exists, they are not waiting to implement "SVG 2" all at once.

Some examples of features for which compatibility data would be useful:

• paint-order (as mentioned, already implemented in Firefox, WebKit & Blink)
• z-index for SVG elements
• keyboard focus control (tabindex and the focus/blur functions, already supported in Blink & WebKit)
• geometry properties (x, y, width, height, cx, cy, r, rx, ry) specified via CSS (already supported in Blink & WebKit)
• multi-line SVG text (partial support already in Firefox, for hard line breaks)
• white-space control via CSS (some support already, haven't tested recently)
• SVG-specific text-decoration fill and stroke styling properties
• HTML canvas, video, audio, and iframe elements directly embedded within SVG
• New stroke-linejoin values
• mesh gradients
• hatch patterns

[dcorb]

About paint-order: implemented in Firefox 31, Blink (since Chromium version 35), and WebKit (since March 2014) browsers. Internet Explorer and Edge use the default paint order. Based on this article of @AmeliaBR http://radar.oreilly.com/2015/11/elegant-outlines-with-svg-paint-order.html

[fabb]

Also there is stroke-alignment: https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment

[Lucas-C]

+1 A compatibility check for <use href="..."> instead of <use xlink:href="..."> would be awesome.

[adam77]

+1

[elliotchi]

+1

[naught101]

+1, especially for z-index ordering.

[rlambertsen]

+1

[Herst]

The correct link for paint-order is https://github.com/Fyrd/caniuse/issues/3394

Oh and +1 BTW.

[vwkd]

Any updates on this? Would like to check support for geometry properties.

[LifeIsStrange]

I (and probably a lot of content creators) where misled under the belief that they can't use SVG 2 can't be used in web browsers, but the same way we didn't wait a decade for full support of CSS 3 to use the features, can I use should document the support for individual features of SVG 2. It seems chromium suppports ~40-50% of SVG 2 which is huge and enable many impacting usecases.

1) it seems some have been documented e.g. https://caniuse.com/mdn-css_properties_paint-order but most have not 2) they should be a naming convention/tag/ui to clarify that each feature is part of SVG 2 and a way in can I use (e.g. tag) to search them all at once so that you would easily get a list of each feature and quickly access their respective browser support.

https://bugs.chromium.org/p/chromium/issues/detail?id=225863 https://bugzilla.mozilla.org/show_bug.cgi?id=1328534 https://bugs.webkit.org/show_bug.cgi?id=191292

friendly pings @Schweinepriester @dstorey

[rianmurnen]

Paul Herbert, writing on the Cloud Four blog: So… you can set an SVG circle’s radius in CSS?

So, I tried it out… and it seemed to work! Well, at least in Firefox. With a bit of trepidation, I started testing in our other supported browsers. It worked in Chrome. It worked in Edge. It even worked in Safari!

[…]

My impression was that setting r from CSS was part of the SVG2 draft, but I didn’t think that was supported by any browsers, and VS Code doesn’t seem to like it. But it turns out that setting r is supported in all the browsers I care about?

[…]

Tyler and I tried to find mention of this new feature on caniuse, MDN, and various browser bug trackers but came up empty.

[vanillajonathan]

I created issue #6593 for the inline-size property on the text element which is used for word wrapping.