I am developing explanatory line animations using SVG/SMIL and encounter high CPU loads when watching the animations in Firefox. Are there any best practices for SVG itself and for declarative animations with regard to CPU performance? Since different viewers and browsers will yield different results I am searching for general rules of thumb which I would also hope to be translatable to the Web Animations API.
You can find some references and information here
Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
Here you could see low CPU performance in Fire Fox
https://www.youtube.com/watch?v=1RK3l6H0uDU&feature=youtu.be
while Chrome work well with SMIL animations. But in nearby future, as said here in last post https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ,
"it will probably be removed at some point in the near future"
This about SMIL support in Chrome. In Fire Fox SMIL animations has become very slow, starting with version 38, and slow animation is still not fixed(in current 39.0).
There is a chance that the Fire Fox will repair support SMIL animation in future versions, as they said:
We don't have any intention to deprecate SMIL at this stage.
but Chrome(not in 45 version, maybe later) will give to us message(when page got SMIL in it content):
CONSOLE WARNING: SVG's SMIL animations (, , etc.) are deprecated and will be removed.
Please use CSS animations or Web animations instead
Related
When I enabled data-search-pseudo-elements it causes a 100x+ slowdown in the performance of rendering rows with icons within a grid. Whats strange is that the grid virtualizes the rows, so really only 100 rows may be visible. Without this setting render time is .5 seconds. With this setting it is >30 seconds and often crashes the browser altogether. The icons in question aren't from pseudo elements, but I enabled this feature in my index.html for a targeted use in another part of the app.
Is there any way to use a pseudo class icon without enabling that, or to scope it to only affect a certain area?
Using data-search-pseudo-elements with the SVG/JavaScript implementation has known performance concerns, documented here:
Although you can use pseudo-elements with SVG and JS we do not recommend using this method. It does not provide as many usage options, is difficult to configure, and is the slowest method of using Font Awesome. (Painfully slow in some cases.)
At this time, there's no configuration option to limit the scope of the pseudo-elements search and replace feature.
If you're stuck using pseudo-elements but the performance with the SVG/JavaScript method is inadequate, then your best option may be to switch to the Web Fonts & CSS method.
That said, I'm curious to have a closer look at your scenario to see if there are any optimizations that could be made. Could you post a CodePen?
I read while Googling that SVG was "dead". Although I disagree, could anyone tell me more/future vector based format to represent 2d/3d graphics? What about VML? What format should I use to represent 2D and 3D graphics on Web?
I playing around with graphics on web and I would like to know if I'm working with an obsolete technology.
Microsoft is supporting SVG in IE9, and gave a detailed explanation of why they were doing it on the IE blog:
http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx
SVG's main advantage is that it becomes part of the DOM, so you can use CSS to style it and javascript to modify it. Canvas, by contrast, must redraw every frame completely. This makes canvas suited to spectrum analyzers, video processing, fast-paced games, and other non-gradual animations. SVG is better suited for gradual animations.
As far as 3D is concerned, the future is WebGL, a thin shim over OpenGL ES, but it's far off. Microsoft has not committed to supporting it, and that means it's not going to be in IE9. Maybe IE10, maybe not.
If you do use SVG, I recommend using svgweb to abstract away the browser differences (falls back to a flash applet on outdated browsers).
This post is rather late... but I think it is worth re-addressing, since your question has popped up again with all the html5 talk.
SVG is a vector drawing format that also supports animation, timing, and Javascript DOM support. In other words, it is a standalone format for static and dynamic vector graphics; you might say it is a web-focused (or screen-focused) alternative to EPS/PDF. The html5 canvas tag is not a format but a way to draw (static images) to the screen with Javascript — that is all; there is no competition between it and SVG, as they have entirely different purposes.
Most other vector "formats" involve plugins (Flash) or hardware support (webGL). Ironically, the VML format you mentioned is now deprecated in favor of SVG.
To answer your question: SVG is now the standard vector format for the web. Hopefully, in the near future, we will see it being used for video/animation as well.
You can try the Raphaël JavaScript Library.
It is easy to implement and provides the same UI features as SVG (and more!).
If it is SVG you are after the best way to go is svg.js. It supports SVG better and it is a fraction of the size (4.5k gzipped) of Raphaël (31k gzipped). It also has a very intuitive syntax.
All major browsers including ie9, firefox, safari and chrome are starting to supporting svg as part of the upcoming html5 standard. I wouldn't call that "dead"
2D: SVG
3D: X3DOM or webGL directly
Since I'm always sticking to CSS 2, it was a (pleasant) surprise for me today to find out that CSS 3 supports alpha channels in colors. That allows for a nice range of effects. But - which browsers (and from what version) support this? Is it safe to use this today, or are we better off by still making a 1x1px png image and adding the IE6-filter-hack?
Here is an article detailing support for that in various browsers.
You probably should do this with a PNG image and fall back to something reasonable for IE 6. And you don't want that PNG image to be 1×1 px² large because tiling such very small images is painfully slow in some rendering engines. Making the image 100×100 px² doesn't cost you anything :-)
Does anyone know the current state of SVG SMIL animation support in the popular browsers? It looks like Safari, Chrome, and Opera support it. Firefox has confusing reports in their dev pages about SMIL support having been added, but I don't see it as of v3.6:
https://bugzilla.mozilla.org/show_bug.cgi?id=216462
I am ignoring IE since they don't even support SVG at all, and probably never will, much less SMIL.
The other thing - just comparing this test page between Safari, Chrome, and Opera:
http://srufaculty.sru.edu/david.dailey/svg/ovaling.svg
looks like Opera is the only one that renders it correctly. Should we not be using SMIL - kind of looks half-baked in all the browsers (sadly)? Blast.
Thanks
http://www.codedread.com/svg-support.php has a rough comparison, and mentions SMIL in Firefox starting version 3.7.
About IE, maybe Wednesday changes everything, see: live.visitmix.com/MIX10/Sessions/EX30
Gecko's limitations are:
no <animateColor> — not planned
no wallclock timing — not planned
animation of transform lists is inefficient/incomplete — should be fixed by about Dec 2011
excessive CPU use — some improvements should be available by about Dec 2011
Other than that, I suspect that Gecko is the most spec-conformant of the major browsers. (In particular try some of the following tests with other browsers: http://mxr.mozilla.org/mozilla-central/source/layout/reftests/svg/smil/syncbase/)
It does fire DOM events and always has (in fact, this is one of the causes for slow performance). However, as required by the SMIL specification, DOM events are not fired during a seek.
Unlike other browsers, it fully supports animation sandwich priorities for syncbase timing, it provides correct behaviour for frozen to-animation and many other areas not supported in other browsers.
An up to date overview of current browser support is found on http://caniuse.com/svg-smil
Currently (21-okt-2012), all major desktop and mobile browsers has at least partial support for svg-smil with the notable exception of IE9.
There is no SMIL at all in Firefox 3.6. IE 9 will do SVG, but it won't do SMIL. Microsoft believes that there are spec issues to work out before they add SMIL - and to a degree they are right, IMO. How SMIL will interact with other animations is currently an unresolved issue.
I just looked at that ovaling.svg demo again in Firefox 4 nightly (roughly at beta 2 stage) on Linux. It did drain my CPU to 77 %, whereas Opera only used 44 %. Or put differently, Opera 10.60 only used one of my two CPU-cores, Firefox used 1 and a half. The animation was really smooth in Firefox but did stutter a bit in Opera.
On my Thinkpad z61p running Linux, I do not think Firefox does any GPU acceleration (yet), but when that kicks in I suppose the CPU load would be a lot less.
Chrome 5 fails miserably. The animation won't run in any really useful way at all.
In my very short experience Opera's support is most complete and correct (I've played with different kinds of animation timings and behaviours and haven't noticed any bugs. Opera is the only one that fires DOM events when animations start/repeat/end).
Gecko is OK, although it doesn't fire events, and misinterpreted few more complex animations.
WebKit is the worst. Animations must have both from and to, otherwise it's easy to find bugs in additive/accumulative animations (animation state isn't reset properly or resets to wrong state). Removing animation node from DOM doesn't reset position of animated elements. It seems to have overly simplified tracking of animation state. I've managed to crash Mobile Safari.
Animation speed—at least on desktop OS X—seems to be in the same league, although animation in Opera seems to be a little less smooth than in others.
At the moment, the answer is very clear to me (I've only bothered testing with these three):
Opera
Firefox
Chrome
Opera is the only browser that can handle my game at the moment. The other two seem to lack quite basic support for my yet quite simple animations and dom manipulation of animations. However, I haven't spent more than an hour on cross browser compatibility work yet.
I'm doing kind of a proof of concept for only using on SVG 1.1 Full and SMIL animations in a game (no js animation at all). What I've tested (successfully in Opera) so far is:
motion along a path with quadratic and cubic beziers (and continuations with 's' and 't' elements)
changes to path during motion
collision detection along a path and "radar vision" using SVGSVGElement.getIntersectionList samples
zoom and pan on a g element representing the game world
detecting hits on certain graphical elements of an actor
dynamic speed control
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I heard from more than a single source that SVG is dying, it is abandoned by Adobe.
How sad! What's will be next alternative to SVG?
SVG is an open standard, developed by W3C. I really don't see it dying any time soon. Just because certain companies decide to drop its use for their commercial products (usually because they need, or feel they need, something more customised), it does not at all mean SVG will disappear on a more global scale.
At the moment, it's undoubtedly the most widely used vector graphics format on the web. Just take for example the images on Wikipedia - for almost all diagrams SVG is either used or there is a notice stating that it should be used. Many other open source projects endorse it in a similar way.
Now, the XAML markup language (part of WPF/Silverligtht) has been seen as a competitor to SVG by some, but truly they only overlap in functionality to a certain degree. (XAML supports lots of other things such as data binding, events, triggers, etc.) Indeed, the general use of XML is much restricted in that browsers don't natively support it (and can't properly, because of the fact that it's tightly bound to MS technologies). I would not even believe that it's strictly a direct competitor to SVG, nor that Microsoft have intended so.
To conclude, I don't think one can envisage SVG dying out until something clearly improved (and open-standard) comes along to replace it. As far as I know, there is nothing like that at the moment.
Check your sources.
A lot of people want SVG "dead". A common way of getting something to happend is by spreading rumours that it has already happend. It's called a self-fullfilling prophecy (wikipedia). Don't buy into it, and please don't actually help those wanting it dead by spreading the rumor further yourself.
Is SVG dead?
No, it has just begun.
What's next?
HTML5, Canvas and SVG in one long glorious love-affair. Get your first-row tickets now!
(Actually here's a youtube video of html5, canvas and svg showing off the infinite resolution inherent in vector graphics. Somewhat lame but real, unlike rumors.)
SVG (Viewer) was abandoned by Adobe ages ago since most browsers support it natively.
Only IE is holding back the technology by not having native support.
Update: IE9 will have both native SVG support and native Canvas support! (Vista and above only though)
If you'd like to show your support for getting IE to support it natively add your vote and comments to these bugs.
https://connect.microsoft.com/IE/feedback/SearchResults.aspx?SearchQuery=SVG
Bring back VML! Just kidding ;) I don't think SVG is dying, but <canvas>'s adoption for HTML5 seems like the way things are going on the web.
I'd like to add my support for SVG. First, I believe that it is widely used in mobile technology though this is through conversations about 2 years ago rather than seeing code. It was one for the first languages developed by W3C to be used over-the-web and has been consistently supported for the last 10 years. I initially thought it would be a killer-app in 1998 and said so, especially since Adobe then had enthusiastic support.
Because SVG is a full XML dialect it can be easily mixed with other XML applications such as XHTML and MathML. It's possible to include XML information in SVG elements so that documents can be fully semantic (i.e. carry a data-meaning as well as a graphical one).
SVG is effectively feature-complete for a 2-D graphics language. There is no technical reason to invent anything else. It does high-quality rendering, animation and can support interaction through its own elements or through Javascript. It is therefore unlikely that major web software manufacturers will NEED to invent anything else.
The main problem is not that SVG is "dying" - it is not - but that it takes a long time for the various companies to converge. When they do I would expect SVG to emerge as a consensus.
Part of the problem is that graphics are not yet seen as a semantic problem - it's often "easier" to inflict a dumb animation on a client than to set up the infrastructure to send semantics over the web and repurpose at the client. But as the semantic web develops then standards such as SVG will be increasingly important. If, for example, you wish to mash-up geographical information then either you use a properietary solution such as GoogleMaps, or you look for a shared standard approach. You can never count on free proprietary solutions in the long run.
Note also that in many areas which receive public funding there is an increasing drive towards Open standards and this is another reason why SVG is well positioned.
Then there's this article posted Friday on Network World, titled EC decision expected to force IE to better support standards. In it, Håkon Wium Lie, Opera's CTO, states
Second, due to the increased competition stemming from the ballot box, browsers will improve their support for standards. This will result in a richer, faster web. For example, I believe that Microsoft's IE will add support for SVG, a standard that all browsers but IE support.
Of course, it's in his best interest to see IE falling in line, but behind, his browser. He gets to be cutting edge, but part of a larger 'standards' crowd.
While this is an question was asked before high res/ retina displays came to be the normal for mobile devices. SVG is having a big come back as vector graphics solves DPI issues on the web. You will be seeing more SVG on the web than before.
Even apple.com menu is svg now days!