Im having a problem with Raphael and a custom map svg plugin Im using. I am pretty sure the problem is related to Raphael and redrawing vectors every time the map reloads. The map works perfectly in Firefox/Chrome/IE9. In IE 7/8 the map runs incredibly slow and its almost non usable. The icons also turn white sometimes. It seems the positioning happens before the re-sizing of the elements happens in IE8 and that's where the bottleneck seems to occur. Here is a link to the map:
http://www.comparewebads.com/VisaInteractiveMAP/world.html
The file that handles the map functionality is mapsvg.js.
http://www.comparewebads.com/VisaInteractiveMAP/js/mapsvg.js
I know this isn't a comprehensive answer, but some of my own research in a related area tells me that browsers' javascript performance, especially in terms of graphics performance in svg, canvas, etc, has improved exponentially over their past few versions. IE is especially notorious for poor performance (in any version).
I suspect that at least a part of your problem is simply that IE 7 and 8 have comparatively slow and inefficient javascript engines.
In my own javascript-heavy projects I refuse to support anything before IE9, because IE 7 and IE8 simply can't handle the performance (and some features just aren't included.)
Related
What I'm looking is a flash alternative for mobile phones using html5.
I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual nodes that make up a vector (ie, points on a path) so I could get more sophisticated character animation. To do this I was looking at some gui based editors.
I checked what adobe has been up to and they seem to have killed Edge Animate and rebranded Flash as "Animate CC" for 2016.
http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/
https://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/
But reading up on "Animate CC" I see that it exports vector animations to either Canvas or WebGL. Which I think is due to them not getting hardware acceleration with native SVG via SMIL or using javascript.
https://css-tricks.com/guide-svg-animations-smil/
Another one is http://www.animatron.com which converts everything to canvas as well.
So my question is, in order to do keyframe animations on nodes within a vector path, a vector needs to be converted to either WebGL or Canvas for it to be hardware accelerated on mobile?
p.s I prefer using SVG as it's loaded in the DOM and I can manipulate things with jquery. This is for a mobile game that uses vectors (svg) as its base but I'd like to incorporate animations too - beyond the basic css transforms. I wish there was a way to have a .svg file that not only contains the vector information but also the animation info. so I could load this .svg file. and then in javascript go:
character1.play('animation1') or something. If SMIL worked fast I'm sure editors like adobe would make it as simple as that.
EDIT: I just read that Chrome 45 killed SMIL in favor of "web animations" and css.
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
And as Kaiido mentioned in the comments IE never supported smil so maybe that's why adobe never exported to it (?).
http://caniuse.com/#feat=svg-smil
also I never saw any examples online that show hardware accelerated path animation with smil, if any of you guys find a link pls let me know.
EDIT #2: I'm thinking of giving up my wishful thinking and instead looking at vector to canvas exporters like animatron.com. However, it doesn't seem like canvas is even hardware accelerated or fast like css3 transforms. I loaded some animations from animatron in my old iPhone 4s/iOS 8 and it's jittery and slow for example:
https://www.animatron.com/project/1953f3526e5b2ec4eef429c8
whereas css3 transform animations always run very smooth...
I still haven't tested vector to webgl.. but I think that's why adobe eventually chose to use it for their vector animations since canvas is slow and svg is limited.
EDIT #3: sure enough it seems like webgl is the way to go (unless someone finds a way to do this with native svg) http://www.yeahbutisitflash.com/?p=7231 .. this works fast in my iphone 4s/ios8.. I currently think this is the only way to do what I want: hardware accelerated vector based animation (however the graphics don't look as crisp as I'd want them.. webgl kinda messed with that I think).
but this is why I think Edge Animate got killed cause they were trying to create a tool that took advantage of css3 transforms, but ppl want to animate vector nodes so they went back to Flash and rebranded it. (another note: the above webgl anim doesn't work so well on my galaxy S4/kitkat android phone.. so this is mainly for newer devices/OSs)
EDIT #4: come to think of it. it'd be a pain to have multiple webgl contexts running in my program. so if I had 10 animated characters I'd have to have 10 webgl contexts which would be intense for a mobile device.. unless I chose to do the whole game in flash, and then I'd have one big webgl context after I export it. but I prefer to work in the dom. oh well css3 transforms for the meantime.. :/
EDIT #5 - Dec 2016: I'm now using svg/javascript with snap.svg. modern phones seem fast enough.
Other Useful Links I Found:
http://www.crmarsh.com/svg-performance/
Canvas is (as far as i know) software accelerated. So it's rendered by the processor (CPU). The processor (cause of them pixels) ain't that good at graphical stuff but for simple things it would be enough. And it runs everywhere, where there is a processor.
If you want to have better performance on hardware accelerated devices which most modern smartphones are, you need webgl. But you can export your stuff in webgl from adobe CC. Older smartphones are not very optimized on hardware acceleration so please check with your target group what devices they have and try to run your app on one of the slowest devices.
I would not use SVG. SVG is even worse than DOM. You can be faster manipulating HTML in javascript than SVG. I don't know why but it is damn slow. SVG is just an alternative if you want to have scalable graphics or charts and that's what it is made for. To animate in SVG is a pain. Don't do it. It is not optimized for animation.
CSS-Transform is a prototype-like and will not help you with keyframe animation. But it has potential to have an eye on it.
Does this help you?
This library/plugin might be exactly what you are looking for: Greensock SVG Morph Plugin. It seems to perform pretty well on mobile, not sure how well it performs on devices mentioned by you.
It's also not GPU accelerated but Greensock Animation Platform seems to perform extremely well even on mobile devices.
I think its a difficult question to answer as there's so many issues with different browsers. Some don't support SMIL transforms well (or being deprecated, but as mentioned there are fills for it), some don't support CSS3 transforms on SVG elements at all, so most of the 'solutions' out there, have some issue that may need to be compromised on. I think one browser doesn't support d attribute morph properly, but I can't recall which (so test this early on with required browsers if you do go down this route).
Canvas does typically seem to perform better on mobile for most animation I've seen or played with, certainly as the number of objects increases on page.
Other alternatives to webGL that was mentioned..
One option that kinda springs to mind is fabric.js, which is a canvas approach to SVG. It will take the same commands, elements as SVG, but display it on an HTML5 canvas. Turn off drag/freetransform within it (as I think its slowed down a bit with this if it needs extra checks), and I think it will be a bit faster, but its a while since I've played. This could be an interesting approach if you don't need specific DOM element access, but would be fine if you are ok with a similar object based setup.
If you insist on using SVG, then I would look at integrating it with another library (or even 2). Snap or SVG.js are both decent, but can be a bit slow. However, I would experiment with using Velocity.js or React.js with that svg library, as they have some methods that can squeeze out a bit more performance. Also GSAP may be worth a look.
There is no general answer to this, it depends on the browser implementation and your hardware, but ... for the long term solution I would bet on WebGL because it uses the GPU and will ultimately dominate.
WebGL is not well supported right now (2016), and it potentially comes with security issues.
Also see: https://css-tricks.com/rendering-svg-paths-in-webgl/
Canvas is better at working on raw 2d pixel buffers (+ alpha channel) and is slow for higher resolution+animation.
You could use some dual lib like Pixi though.
If you don't mind the k-weight increasing a bit and are comfortable using flash, the easiest and the fastest solution would be to use Animate CC (It's exactly Flash, without the symbol filters and gives canvas output instead of swf).
So, I need to implement mathjax in a web project, Did some research on who is already using it and found that,
https://math.stackexchange.com/ Uses mathjax to render mathematical equations and formulas. But when it gets rendered on the browser it is slow and a lag is present. How could this be removed or reduced more then what is happening right now.
MathJax is a very good renderer but isn't always the fastest. An alternative javascript math rendering library is jqmath That is noticably smaller and quicker than MathJax, but doesn't aim for all the same spacing refinements and the same coverage of latex math input.
The fastest rendering of course is just to use MathML in the page and require a browser that supports it. Current versions of Opera, Safari, Firefox and Chrome all support that to some extent. (For IE people need the free (not open source) MathPlayer plugin). My own html5mathml JavaScript sometimes helps to smooth the gaps between the different browser implementations.
I'm using Raphael 2.1 to draw 15 lines at the same time. Each lines is made up of 50 2 pixel paths. Performance is best in Safari and Chrome, good in FF, weak in Opera, and chokes in IE9. Microsoft says that SVG will run in IE9, but Raphael.svg returns false in IE9.
I've been reading posts related Raphael and IE all day, and the only solution that I've seen for improving Raphael's performance in IE9 is to install Chrome Frame.
Has anyone encountered any other solutions?
Raphael uses svg in IE9 and work with reasonable performance. You have to be careful that IE is not being forced into IE8 standards mode (which frequently happens). If IE9 falls back to IE8 standards then it will end up using VML, which is very slow, and there is no efficient alternative to SVG in general in IE8 or below.
When faced with this problem using IE8 I ended up using divs and css to achieve rendering of lines, rectangles and text. Since that's all I required it was very fast even in IE8, helped out by buffering the divs inside the container. If your problem is simple enough, you may wish to consider a pure DOM solution. See: https://github.com/Matt-Esch/simpleCanvas.js for inspiration.
What are the main differences between raphael.js and paper.js?
Are there any other libs out there I should look at? Any like these that focus more on CSS3 then SVG?
Thanks!
Raphael uses SVG. Paper use Canvas.
That's the major difference.
In terms of what you can do with them, Canvas and SVG each have their own place, and are good for different things (although they are both capable of doing each other's thing as well if you ask them to). From a purely functional point of view, you need to consider what you want to do with the library before you decide which one you go with.
Browser compatibility is going to be a big issue, whichever one you use. This will possibly be a bigger issue than functionality, in fact.
Raphael has an advantage on the desktop because it detects older versions of IE (as far back as IE6) and falls back to using VML instead of SVG. This means it has excellent compatibility on virtualyl all desktop browsers. Canvas simply isn't supported on older IEs, and the Paper.js people don't really seem too worried about it.
But on mobiles, Paper.js may be better, because Canvas has much better support on mobiles than SVG. SVG isn't supported on most Android devices at all. This is changing: Android 3.0 introduced SVG support, but most Android devices being sold even now come with v2.x, so it'll be a while before you can rely on SVG working on a mobile.
For more info about browser support, see the CanIUse site:
CanIUse SVG
CanIUse Canvas
Hope that helps.
The most obvious difference is that Raphael targets SVG, and Paper targets the Canvas element. It also appears that Paper has far greater advanced features, whereas Raphael is just core SVG elements, which can then be expanded upon with plugins. Arguably, it depends more on your need, and which environments you wish to target. Canvas works well on some mobile browsers, SVG barely works on mobile environments at all.
As another side note: SVG, as I'm aware of it, is not hardware-accelerated in IE (9) or Firefox, and, again if my memory isn't failing me, Canvas is, at least in IE (9). As for IE 8 and below, you need a browser plugin, which most have, but it is a dependency to expect.
Are there any other libs out there I should look at?
Yes, you should have a look at processing.js!
And by the way - here is an excellent comparison between raphael.js, paper.js and processing.js:
http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/
And even code comparison of the same effect:
http://zgrossbart.github.com/3gears/
Are there any other libs out there I should look at?
If you have experience in Flash development you might consider easel.js which provides you with some of the flash display mechanisms. Easel looks like a really nice lib to me.
Another interesting library is processingjs, unlike the other libs processingjs also does 3d stuff. (It's also good at 2d.) Unlike paper, raphael and easel processing doesn't handle user interaction out of the box.
Both libraries use canvas.
I am using toDataURL() method of a canvas object. It works on IE9 and Chrome.
But it is not supporting for IE7 and IE8. I found this link
https://github.com/sampula/SVG.toDataURL/commit/9b59af148b7f14d41974cf318eed6f84c8c91062
It extends SVG to use toDataURL(). But in its implementation, it again uses canvas.toDataURL(). I am using Google's API (jquery.flot.js) for plotting all the graphs graphs. But it also uses canvas to plot the graph. So, SVG is not an option.
I there ever a way to use canvas.toDataURL() or something similar for IE7 and IE8.
Thanks in advance
IE7/8 does not support either Canvas or SVG.
It does however support VML, which is a vector language similar to SVG, and there are a number of javascript-based hacks for IE that use its VML functionality to emulate both Canvas and SVG in this older browser.
The most well known IE-Canvas hack is this one: http://code.google.com/p/explorercanvas/
I haven't spent much time with it myself, so I can't vouch for whether it can do specific functionality such as the toDataURL() method you're asking about, but if you can't do it with this, then it's unlikely to be possible at all.
I mentioned that there are similar tools for VML->SVG as well. If that's of interest to you, then you might want to look into this one: http://code.google.com/p/svg2vml/
Bear in mind that no matter how clever these hacks are, there is always a fundamental issue of performance. IE7/8's javascript interpreter is very slow by modern standards, and these are javascript-based tools trying to shoehorn very modern functionality into this old browser. They may well work, but don't try to do anything too clever with your canvas or SVG, or you'll kill the browser.
Finally, since you mentioned that you're using all this to draw graphs, I will point out the graphing module of the Raphael library. Raphael is a library which draws SVG graphics on all browsers (falling back to VML for IE). The graphing module provides all the usual graph types, wrapped in an extremely easy-to-use javascript API. And it is fully cross-browser compatible -- it works on all desktop browsers out of the box from the latest Chrome and Firefox all the way back to IE6. If you're struggling with cross-browser compatibility with the tools you're using now, you may want to switch to this library.
Hope that helps.
I have recently created an application in which I had to use toDataURL() but I was not able to find any way to do this in IE7/8. My application was an online image editor in which user was able to save the canvas contents. I believe there is not way we can use this method in IE7/8.