3 ms·

How is SVG drawing done in Chrome and Firefox? Do they offer hardware acceleration? How fast would hardware accelerated SVG be compared to Canvas?

rjsw 5y ago
Firefox uses librsvg [1], don't have a feel for how well accelerated it is. [1] https://wiki.gnome.org/action/show/Projects/LibRsvg?action=show&redirect=LibRsvg https://wiki.gnome.org/action/show/Projects/LibRsvg?action=s...
- Jasper_ 5y ago
  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. [0] https://github.com/mozilla/gecko-dev/tree/master/layout/svg https://github.com/mozilla/gecko-dev/tree/master/layout/svg https://github.com/mozilla/gecko-dev/tree/master/dom/svg https://github.com/mozilla/gecko-dev/tree/master/dom/svg
- notriddle 5y ago
  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.
pier25 5y ago
Chrome uses Skia which AFAIK is GPU accelerated. Not sure about the SVG part though. https://skia.org/ https://skia.org/ https://en.wikipedia.org/wiki/Skia_Graphics_Engine https://en.wikipedia.org/wiki/Skia_Graphics_Engine
- hnmullany 5y ago
  Yes a bunch of SVG ops have been offloaded to Skia GPU rendering.

rjsw 5y ago

Firefox uses librsvg [1], don't have a feel for how well accelerated it is. [1] https://wiki.gnome.org/action/show/Projects/LibRsvg?action=show&redirect=LibRsvg https://wiki.gnome.org/action/show/Projects/LibRsvg?action=s...

Jasper_ 5y ago
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. [0] https://github.com/mozilla/gecko-dev/tree/master/layout/svg https://github.com/mozilla/gecko-dev/tree/master/layout/svg https://github.com/mozilla/gecko-dev/tree/master/dom/svg https://github.com/mozilla/gecko-dev/tree/master/dom/svg
notriddle 5y ago
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.

pier25 5y ago

Chrome uses Skia which AFAIK is GPU accelerated. Not sure about the SVG part though. https://skia.org/ https://skia.org/ https://en.wikipedia.org/wiki/Skia_Graphics_Engine https://en.wikipedia.org/wiki/Skia_Graphics_Engine

hnmullany 5y ago
Yes a bunch of SVG ops have been offloaded to Skia GPU rendering.