6 ms·

SVG rendering performance leaves a bit to be desired: http://codepen.io/adrianosmond/pen/LCogn http://codepen.io/adrianosmond/pen/LCogn

acdha 13y ago
That's a fairly extreme outlier, though – other than font/icon preview pages, how many sites want to display hundreds of different icons in rapid succession?
- gisenberg 13y ago
  In my experience, you can see noticeable performance losses pretty quickly on mobile devices in as few as 9 on-screen icons, especially in cases of animated elements. edit: caveat for animated elements.
  - acdha 13y ago
    That fits with what the Sencha team reported for iOS 7 - big wins for static SVG but bigger losses for animation: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/ http://www.sencha.com/blog/the-html5-scorecard-the-good-the-...
- fit2rule 13y ago
  Look at it this way, everywhere on your screen you see repetition is an opportunity for a new, simple symbol that can be represented with fundamental glyphs.
fit2rule 13y ago
SVG rendering should properly be paired with proper use of the dejeur hardware accelerations of choice, and for that I'm personally finding various fringes of the MOAI community of much interest, as it puts SVG into a fabulous playground.
epmatsw 13y ago
Interesting. In FF29, there's no perceptible difference.
- gisenberg 13y ago
  SVG performance on mobile is exceptionally abysmal. The desktop browser performance delta isn't bad.
  - csense 13y ago
    Can you point to any benchmarks demonstrating this?
    - epmatsw 13y ago
      The linked demo doesn't work in mobile Safari :/
  - tmzt 13y ago
    Are there any mobile browsers using something like librsvg, focused more on rasterising static SVGs than loading into a memory a full DOM? https://wiki.gnome.org/action/show/Projects/LibRsvg?action=show&redirect=LibRsvg https://wiki.gnome.org/action/show/Projects/LibRsvg?action=s...
ygra 13y ago
It's buttery-smooth for me on IE 10 (not yet on Win 8.1, so I can't check th fps in the dev tools), jerky (< 30 fps) for both PNG and SVG in Chrome (with PNG being actually slower) and very jerky for SVG on Firefox. Chrome is puzzling and suggests that there are other factors at play that result in poor performance here.

acdha 13y ago

That's a fairly extreme outlier, though – other than font/icon preview pages, how many sites want to display hundreds of different icons in rapid succession?

gisenberg 13y ago
In my experience, you can see noticeable performance losses pretty quickly on mobile devices in as few as 9 on-screen icons, especially in cases of animated elements. edit: caveat for animated elements.
- acdha 13y ago
  That fits with what the Sencha team reported for iOS 7 - big wins for static SVG but bigger losses for animation: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/ http://www.sencha.com/blog/the-html5-scorecard-the-good-the-...
fit2rule 13y ago
Look at it this way, everywhere on your screen you see repetition is an opportunity for a new, simple symbol that can be represented with fundamental glyphs.

fit2rule 13y ago

SVG rendering should properly be paired with proper use of the dejeur hardware accelerations of choice, and for that I'm personally finding various fringes of the MOAI community of much interest, as it puts SVG into a fabulous playground.

epmatsw 13y ago

Interesting. In FF29, there's no perceptible difference.

gisenberg 13y ago
SVG performance on mobile is exceptionally abysmal. The desktop browser performance delta isn't bad.
- csense 13y ago
  Can you point to any benchmarks demonstrating this?
  - epmatsw 13y ago
    The linked demo doesn't work in mobile Safari :/
- tmzt 13y ago
  Are there any mobile browsers using something like librsvg, focused more on rasterising static SVGs than loading into a memory a full DOM? https://wiki.gnome.org/action/show/Projects/LibRsvg?action=show&redirect=LibRsvg https://wiki.gnome.org/action/show/Projects/LibRsvg?action=s...

ygra 13y ago

It's buttery-smooth for me on IE 10 (not yet on Win 8.1, so I can't check th fps in the dev tools), jerky (< 30 fps) for both PNG and SVG in Chrome (with PNG being actually slower) and very jerky for SVG on Firefox. Chrome is puzzling and suggests that there are other factors at play that result in poor performance here.