SVG has no support for z-index in the spec. SVG renderers draw everything from the back to the front reading the elements as they appear in the doc tree - if you want put something on top of something else you have to move it down the document.
In my previous role I worked on a React app that was essentially just a big SVG editor for lawyers to make legal step diagrams (complex maps of legal structures that define how they change over time). Our solution to the z-index issue was to make extensive use of React portals to things lower down the doc tree when they were in focus. It worked really well, but I would have killed for proper z-index support. It would have greatly simplified my code.
I don't really care about the GPU acceleration; adding layers to SVGs is an amazing change on its own. Kudos to the team behind this. I hope it gets adopted everywhere.
> Our solution to the z-index issue was to make extensive use of React portals to things lower down the doc tree when they were in focus.
I’m curious why you went with portals? Seems to me you could use the normal render cycle to control order (keyed if you intend to just reorder siblings).
> I don't really care about the GPU acceleration; adding layers to SVGs is an amazing change on its own.
I may be mistaken but in my reading of the article, my understanding is that SVG layers are only about acceleration, and don’t change the stacking semantics of SVG elements. But maybe I missed something.
This article is just about acceleration and stacking is not introduced. WebKit's architecture ties together the concepts of stacking and acceleration. A positive effect is that it will be quite easy to support stacking in SVG with this work.
A negative of joining the concepts of stacking and acceleration is that it is difficult to get acceleration without introducing paint order bugs where the accelerated content starts painting above non-accelerated content.
The lack of z-index in SVG is such a drag. I'm working on a (relatively simple) project - think Figma in terms of interactions - and the hackery is inevitable and immediate when trying to deal with this. A hybrid approach of multiple SVG objects in a HTML tree seems to be working so far, but it's far from pretty.
This is a digression, but I'm really curious what you mean by a "legal step diagram". It sounds like a fascinating concept, but all I could find on Google were process flowcharts. Can you point me at more info on these? Thanks!
Step diagrams are what lawyers call flow charts, but with a design convention language that's a bit like UML, and with tons of meta data attached to each element. There's also a time dimension as you can step through to see each stage of a legal process.
I understand what they are as a dev but I'm not a lawyer so I can't point you to anything more unfortunately.
It's a subset of process mapping specific to the legal area. Since there is no agreed upon convention for process maps everyone does their own thing and calls them slightly different things. I tend to just use the six sigma convention even for non six sigma things.
It totally depends on the implementors, if no one implements it, it won't come. If nobody does the first implementation, no other vendor will follow - it's as easy as this.
For WebKit/SVG, features as z-index are easy to implement in the layer based SVG engine - it's currently disabled, but only because it's lacking dedicated tests: I'd still need to write new reftests covering that.
I remember a article already quite some years ago, expressing much frustration with that. Basically the spec is complicated - and the vendors were unwilling to integrate more complexy. And that seemed to not have changed. Most parties are just interested in making things faster and more stable. (And then one bright day, implement a better, cleaner designed 2D vector standard)
It's been a while since I've done any SVG, but it seems like you could just create a grouping element for each layer and not put any graphical elements in the doc root.
Didn't notice but Zimmermann, the author, has been back to WebKit land ! He's a super-long-time contributor of the project [1] and I got my code reviewed from him more than a decade ago. Glad he's back.
I'd also Appreciate Igalia sponsoring people like him who are enthusiastic to these open source projects.
On the surface, it is kind of wild, but I want to suggest that it's in some ways beneficial for work like this to be supported directly by the companies that benefit from them (including core dev work and engine improvements).
There are downsides to only having Google/Apple/Mozilla participating in this process, and it's that (regardless of whether you think they have good or bad intentions) they are extremely insular.
There are dangers to this as well of course. We don't want things getting derailed or worsened just because it makes life more convenient for some company somewhere. But in general I suspect it's good for more stakeholders to be getting their hands dirty engaging with both the standards processes and the minutia of actual browser development. They had a problem, they gave money to developers to fix it, and it got fixed with approval from upstream. In terms of Open Source, a pretty clear success story to me. We should encourage this.
Agreed - Igalia encourages companies to work upstream, it's part of the idea that we stand for.
A patch like the layer based SVG engine is imposssible to maintain by a single company - e.g. Vorwerk, downstream, for an extended period of time. You want to be able to follow upstream (e.g. for security updates), and that's hard when you change a piece of the core engine with your own stuff.
You are, the very first line of the article explains why they care. They make extensive use of the SVG api and it would benefit them to have this feature.
It's no different to Valve hiring CodeWeavers to implement new things in the Linux kernel to advance their efforts with Proton. Steam isn't in the kernel development space, but it behooves them to improve the kernel with features that are useful to more than just themselves, since features that are _only_ useful to them are likely to be rejected.
The first line (of the fourth paragraph, but still) does indicate that they make use of the SVG API, but what's baffling is not that they use it, but that apparently there's enough return on investment for them to be sponsoring this.
Is there no alternative for what they're using it for? How much extra money does this use bring in? Who managed to convince management to do this and how did they do it?
(I also imagine it's not so much a critical note as it is a "wow, I'd really like to understand the economics of this". It is for me.)
I can believe that, but it would still be hard to fathom that marketing to standards geeks like us brings in enough additional revenue to finance this, or that they'll be having access to talent that brings in so much more revenue than who they'd have been able to hire otherwise that it pays for this. But: that might very well be because I just don't understand the economics of this (which is why I'm hoping for someone to explain it with a back-of-the-napkin calculation :) ).
Having been involved in the discussions, maybe I can give a bit of an inside view here: When we got the suggestion to involve Igalia into building the TM6, it was on the one hand because of their proven expertise in webkit dev but on the otherhand also because they walk-the-talk on the OSS mindset - which is something our team values very much. We saw this as a chance
a) to have a higher chance of including changes into the upstream that would benefit our products and
b) to give back to opensource projects which our products benefit from for many years.
And yes of course we did consider that this might attract more like-minded fellows who are eager to build great products with great colleagues than our „corporate job advertisement“ ^^
Sounds great! So is it just that you're a relatively small company that can decide to give back just because the people it's made up of think it's the right thing to do?
With 12.000 employees worldwide I wouldn‘t say that Vorwerk is exactly small. ;) Yet, we are a family-owned company which takes pride in - as the marketing slogan said it - „putting a stubborn committment to the highest quality“. As we strive for long-term customer relationship by looking to build reliable, high-quality products, me and my colleagues value the work of the giants whose shoulders we‘re standing on - namely the open-source community. And we‘re lucky to have the backing and trust of our management team that giving back pays off for us and our customers in the long run.
I would certainly not call that small! I guess the fact that it's privately owned is then what made it possible. Good for you, sounds like a great place to work :)
Uh, why? Isn't that the whole point of open-source? Apple webkit engineers have been supportive from what it sounds like, it's not like they're against this patch.
Because it’s for a company that makes a high end blending appliance. The sponsor is what makes this odd. I don’t see Cuisinart or KitchenAid sponsoring much other open source code.
Well, Apple's devices presumably don't have any trouble rendering SVG on CPU. As explained in the intro, the embedded CPUs on the blenders do. The unusual part here is that they decided to fix it instead of just falling back to a less featureful UI framework, which I'd say demonstrates an unusual commitment to quality user experience (or if you want to be cynical, flashy user experience).
Thanks for your comment : that makes more sense now.
I had the assumption that efficient SVG rendering in Safari was critical and a UX bottleneck to work on from an Apple perspective, but maybe Apple hardware makes it moot.
It's not the hardware per se. CoreGraphics on macOS/iOS utilizes the GPU for painting, which is much faster than software rendering. Cairo, used for the Linux GTK/WPE ports, is software based, and thus much slower, when painting large scenes.
Therefore for embedded devices using WebKit/Linux GTK/WPE ports we see a huge improvment with the layer based engine. Also macOS/iOS benefits though -- animations are even faster, and you don't easily run into problems, when animating parts of a complex document. It's shown in the video linked in the article at the end: > 20% frame rendering time improvement on an already quite efficient rendering pipeline (Safari / macOS using CoreGraphics on M1 machine).
The number of people who want to do useful work that isn't sexy is vanishingly small, so I'm completely unsurprised that great, useful work comes from random places.
That's actually how progress gets made - by people doing thankless work in obscurity. Then opportunists usually take that effort, make it fit an existing industry and charge whatever the market will bear.
It'd all be fine if the middlemen didn't then proceed to claim greatness, insight and ingenuity, but they do (because then older middlemen give them money to replicate their success).
This social structure is quite bad because it makes people think the middlemen are capable of creating value through their 'insight', without people who did unsexy, hard, thankless work prior.
I can't think of many things flashier/sexier than high performance vector graphics. We live in a world with 8K displays. Pushing the envelope of attractive (2D) graphics is done in vector land.
Yes! You’re missing the most important aspect of open source projects. Anyone can contribute a feature they care about (within limits). Apple (apparently) doesn’t care that much about SVG performance, Vorwerk does, so they paid for it.
This is why companies like Google and Microsoft are big contributors to Linux: They add features they care about.
As for why companies care about upstreaming: It’s not even because they’re so kind (though FOSS contributions are good marketing) - it just tends to be easier than maintaining a private fork.
> Yes! You’re missing the most important aspect of open source projects. Anyone can contribute a feature they care about (within limits).
The biggest limit is resources. SVG is too big to be implemented by a lone wolf working for love alone, and too diverse in application for a tech company to embrace for the length of time and breadth of focus required.
This is a welcome development that validates the W3C model in a positive, constructive way.
It’s interesting to see Vorwerk described as a kitchen appliance company. I had heard of the Thermomix, but didn’t know it was made by them (or even German). I’ve mainly known them for their vacuums.
It does baffle me that Apple, who will benefit from this, couldn't spare the development funds themselves, considering they are worth more than God himself.
Apple has allegedly spent billions on the development of a car, yet could not spend what was probably $100K of consultancy to fix this issue.
> Am I missing something to think it is insane a kitchen appliance manufacturer fund such core dev work
It’s a great development and the key to open standards success. Not, of course, that a kitchen appliance manufacturer stepped up, but that any outsider was interested and willing to contribute to a general computing tech stack.
For a thousand flowers to bloom, the bird must leave the nest.
This reminds me how we got film which was better able to represent people of color because (as one reason, I don’t hink it was entirely this) of wood and chocolate manufactures wanting film which better showed the colors of their products.
We are speaking about the most rich company in the world. You'd think they'd have the resources to fix their shit. Vorwerk probably got fed up with it too and decided to fix it themselfs.
This is not a good look for Apple IMO. I completely dropped iOS support for an app I made because it used SVG's and clogged up every iPhone. It's a serious issue.
You assume, incorrectly, that having money and other resources means you can snap your fingers and immediately hire the right person with the right skills to solve any arbitrary problem you might have.
The world just doesn't work that way. There's a shortage of talent out there, and they often don't want to work for the richest players.
Kind of wild that “completely redesign the SVG engine” was found to be the most economical option (I also wonder what it cost them).
Alternatives could’ve been switching engines, the animation approach, the UI toolkit or throwing more hardware at it.
At the scale they operate it makes sense, I guess. They likely already have a large code base on their current technology, lots of devices already sold and more powerful hardware might cut into margins by half a percent.
This sounds great, a lot of chart/graph libraries are SVG based and rendering performance is a common bottleneck for these libraries. Hopefully this will help.
No it does not. Firefox/Gecko implements SVG on top of the same framework as their HTML engine. So do WebKit and Blink, and even EdgeHTML and Presto had their own SVG implementations back when they were actively developed.
Web standards effectively mandate the SVG and HTML implementations be implemented on top of the same DOM, because when you embed an SVG inside an HTML document, you're allowed to use CSS selectors like `html div svg path { stroke: blue }` and JavaScript that treats SVG elements as being part of the HTML document.
librsvg's API isn't nearly rich enough to allow this. It just takes a blob of bytes and turns it into Cairo draw commands. Gecko doesn't even use Cairo any more, it uses Skia. librsvg does have a DOM, but it's intentionally not exposed as part of the API, so that the DOM can be refactored at will without breaking anything.
I'd actually be very surprised if Firefox uses librsvg, considering that librsvg doesn't support much of the interactivity and animations that Firefox supports in SVGs.
Looking roughly at the source code [0], it seems it has its own SVG engine.
Huh, we have a Thermomix at home and the UI is not terribly laggy but could certainly stand to be improved. No idea how and why they use SVG for the current UI, perhaps it's for upcoming features?
I was knocking around in SwiftUI last weekend and disappointed to learn that there’s still no native support for SVGs — you're either stuck converting SVG to NSBezierPath, or taking your chances with 3rd-party libraries that come with a laundry list of caveats.
The documents don't mention if their engine is suitable for "dropping in" to the Cocoa/CocoaTouch/NSwhatever system, but gosh, that would be a heck of a treat…
> A WebKit version that unlocks hardware-acceleration for SVG is a game-changer, allowing to use SVG across the whole user-interface.
How can you show video in SVG?
What if you decided to build your entire UI in SVG, and then someone asks to add video? Would you have to rewrite your entire UI using a different approach?
It came at a steep cost, though. As cool as the various things built with flash were, my GPU and CPU staying spun up and turning my computer into an oven because of a flash banner ad in a tab open somewhere wasn’t.
I tried to google search it, but couldn't find anything. What is GPU accelerated vector path rendering? Does this entail some fancy processing to accelerate rendering of SVG paths?
Ah alright, thanks for the explanation. Figma uses WebGL for their rendering, so I would assume that their rendering of vector art is accelerated as they don't use SVG.
WebKit is also used by GNOME Web/Epiphany and more embedded applications than can possibly be counted. It fits a lot of places that Blink doesn’t because it’s built to be highly embeddable (more than Blink is anyway) and has bindings for every language imaginable.
I noticed that none of the cross-platform frameworks listed here https://xpda.net/ use WebKit.
I am guessing many commercial users of WebKit can be guessed by looking at the list of Committers (of which Igalia has quite a few): https://webkit.org/team/
It would be funny if this ends up improving playback on that Fisher Price music box thingy. :)
(Joke being that the music box which replaced simple moving parts with a bunch of circuitry might even have a version of Electron running somewhere in its guts...)
In my previous role I worked on a React app that was essentially just a big SVG editor for lawyers to make legal step diagrams (complex maps of legal structures that define how they change over time). Our solution to the z-index issue was to make extensive use of React portals to things lower down the doc tree when they were in focus. It worked really well, but I would have killed for proper z-index support. It would have greatly simplified my code.
I don't really care about the GPU acceleration; adding layers to SVGs is an amazing change on its own. Kudos to the team behind this. I hope it gets adopted everywhere.