I'm creating a web portal with maps in SVG format and set in the HTML code using <object> tag in order to preserve the possibility of interactivity. My main problem is how to create and support an interactive SVG format in the browser?
As far as I have researched there are several options:
SMIL animation directly in SVG,
CSS animation,
JavaScript libraries.
It seems to me that this last option has the most potential. There are many libraries (Snap.svg, svg.js, Velocity.js, d3.js, jVectorMap.js, GreenSock ....) to use, so I would appreciate if someone could give some tips on which of them to use.
Do I need to use them within the SVG directly using the <script> tag or using an external .js file? To my knowledge, jQuery can't be used directly within SVG.
In fact, all three variants work more or less with different advantages and drawbacks.
1. SMIL
SMIL is easy to use inside of your SVG and allows modifying attributes of your SVG object directly. However, if you want/need to support Internet Explorer or Edge, you don't have much luck (see CanIUse).
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. But the Chrome developers recently suspended their intent (see this StackOverflow answer).
2. CSS Animations
These are a good alternative for animation of SVGs. The implementation is normally very fast and smooth, as far as I saw it. Browser support is better especially with Microsoft Browsers. So I would really recommend it.
If you need some more user interaction, you get to the limits of CSS animations quickly. Some interaction is possible, but if you want more, you need JavaScript.
3. JavaScript libraries
jQuery really have serious problems with SVGs, but I think it is better doing without jQuery (for both, jQuery and your software) because if it would support SVGs, it would be even larger and slower. However, if you already have jQuery included, it is possible to select elements and then animate them without jQuery.
Other libraries are more specialized for SVG and work really great (I myself worked with d3.js with good results).
Recommendation
If you don't need to support Microsoft browsers, then SMIL can be an easy and compact way to define certain animations.
If you need those browsers, I would recommend trying CSS animations. But if that seems too static, one of the JavaScript libraries may help.
Related
I am a beginner in web-designing. I use css, javascript, jquery for web development.
There are times when an effect can be achieved with all of the three. Like a simple mousehover effect can be achieved with css :hover, javascript's onmousehover(), and jquery's $(#id).hover()
jquery fade-in, fade-out effect can also be simulated using css transition.
My question is: If an effect can be achieved using all three. Do i need to give preference to stylesheet language or javascript or jquery. using which among above will increase performance and will load the webpage faster.
First of all give a preference to that way which you can do faster (computers cost a little, programmer cost a lot). Also pay attention of how you do it - if you have to write tons of css code instead of couple lines in jQuery - use jQuery for sure.
css speed > javascript speed > jquery speed. As i seen some benchmarks native js is like 10-100 times faster than jQuery (depending on browser/selectors etc...).
Depending on situation - if you really need to optimize your interface -> find a bottlneck first, dont't optimize too early, it's evil
jquery has the advantage of working across multiple browsers but suffers some slowdowns to do this. A custom javascript solution may or may not work on all browsers, but it might be faster than jQuery if you're really good at writing fast javascript. Using css to achieve an effect has the advantage of working on all browsers that comply to the css standard and browsers should be highly optimized to render css very fast.
I think it's more an issue of what browsers you want to support, personal preference and coding styles than it is an issue of speed, but here is some information and benchmarks:
Which is faster? - modifying css property or adding class in jquery
http://jsperf.com/jquery-css-vs-native-dom/16
http://jsperf.com/jquery-css-vs-css/4
http://jsperf.com/jquery-css-vs-getcomputedstyle/2
Edit: Agree with Sergio, early optimization is the root of all evil. Write the code first, look for bottlenecks and treat them last.
Depends on what you want to achieve or the scenario.
I personally like css,but sometimes to achieve cross browser compatibility or some fancy effects i use jquery.
Jquery can be customized a lot,lots of options are also available,but it affects the page loading time. I prefer jquery or javascript.
With CSS3,lots of effects that could only be done with jquery are achievable now,but it only supports modern browsers.
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.
I'm just starting to use HTML5 and CSS3 in my documents.
I understand the need for JavaScript to bring Internet Explorer up to speed with these new tags and styles, but I don't know which to use and when!
My plan was to use html5shiv and IE9.js to look after the HTML5 tags as well as the transparent pngs (and whatever other pesky errors they fix) but then Modernizr and CSS3 Pie were brought to my attention.
My question is, if I use Modernizr, does it look after my need for html5shiv as well as IE9.js? Or should I include these as well? What is the overlap, if any?
And what does CSS3 Pie do that Modernizr or the others doesn't? Or vice versa?
I appreciate your guys help. Let me know what you do!?
I've got extensive experience with all of these, having used them for a few years each.
Modernizr
Includes HTML5shiv functionality
Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, just fixes html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
Conclusion
My advice would fall into two categories:
If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.
If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.
Hope that's helpful!
I would recommend you use only what you need. Build your app in a browser that supports the features you are using, and periodically test in other browsers that you support. If something isn't working correctly, find the appropriate fix, whether it be html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all of the new features in HTML5 and CSS3 all in one page, so you don't need to include every polyfill library in existence. Wait until you find problems with the features you're trying to use, then try and find the library necessary to do that.
I've used mainly CSS3Pie...it works great. But this afternoon i tested it on my laptop with I.E8 and there was an problem with it...it was disabling some css lines...when i removed the css3pie code my site gained twice the speed...then i came accross the posts with people arguing about the css3 slowdown...So at the moment i'm busy to find another way for IE7 & IE8 to have border-radius and shades.
If you want to use it...please test alot as it is NON-official fixes
I know that <marquee> tags are evil.
If it is so bad to have scrolling text, then using JS to get the same effect doesn't make it any better, right?
And suppose I decided to have some scrolling text (gasp), is there some type of CSS(3?) or HTML(5?) way to do this that is technically correct (i.e. not deprecated)?
If there isn't a CSS/HTML solution, should I use:
Javascript, which will be heavier to download and might be turned off (is that a pro or a con?), but I get the bonus of being W3C correct and valid and non-deprecated and smart,
or should I use
the hated <marquee> (<blink><blink>) tag, which is lightweight (19 bytes!), fully supported by all browsers in all rendering modes and all doctypes (even though it shouldn't be), but is deprecated?
Thanks.
P.S. I think a news ticker is a valid use for marquee-style
P.P.S. If anybody tells me that if I don't want a heavy Javascript solution I should use JQuery because it is lightweight, I will shoot them in the comments
Edit: I'm adding JQuery tag since that seems to be the best way to get attention from a lot of experts on JS questions, and it is not totally unrelated here.
It is not the effect that is bad. The problem with marquee, blink and font tags is that they convey presentation not structure of your content.
CSS3 has support for marquee, but it is only supported in a few browsers (Safari and Chrome are the only one, to my knowledge)
http://www.w3.org/TR/css3-marquee/
There are several JQuery plugins that accomplish it, but they come at the expense of loading JQuery (26Kb, heavier than the HTML only solution, but not what I would call heavy)
http://plugins.jquery.com/plugin-tags/marquee
Of course you can easily do it yourself without JQuery, but looking at those plugins may give you ideas.
Another option to consider is to do a small Flash animation.
If you're sure that it works on all platforms you're aiming for, and you don't care what w3c says you can certainly use the marquee tag. There is no way that you can find a JavaScript solution that works in less than 14 bytes.
The only unfortunate thing is that the reason all these browsers support all these deprecated elements that are -in this case- not even part of any HTML standard, is because of all these people using these elements and start whining when a new version doesn't support their 1982 compliant website anymore.
So please go ahead and use marquee as long as it works for you, but please don't complain if you site stops working in a newer browser.
Here's the code that implements the marquee element in Firefox, it's basically doing it in JavaScript anyway so you could always just adapt that code and use it directly in all browsers.
The code can be hacked around so that marquee can be implemented on any element in Firefox, applied through CSS and XBL bindings (Firefox only example). The equivalent in IE would be behaviours, and you could use the CSS3 in Safari/Chrome as nico suggested and you would be keeping the presentational stuff out of your markup, but only you can know if it's worth the effort.
I've been looking for the most efficient and cross-browser supported marquee implementation. For whatever reason, even the webkit CSS marquee implementation is glitchy.
The common approach is to use timer (or jQuery animate implementation) to adjust the CSS margin property of the element. This is too glitchy and very inefficient. I came up with implementation that utilises CSS3 transitions for browsers that support it and otherwise animate the scrollLeft property of the containing element. It is an experimental implementation, though it works well with IE7+. Other people might find it useful as well, https://github.com/gajus/marquee (demo https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/).
Recently, i had to do this effect for a client and i've used this plugin which is very easy to use :
jQuery Marquee plugin on github
jQuery Marquee on plugins.jquery.com
I've seen a few JavaScript image rotators that use either the HTML5 canvas element or an AJAX call to a server-side script, but is it possible to do it without using those methods? Internet Explorer doesn't support canvas (I'm aware of excanvas, but I'd like to do without if possible) and I'm not sure if AJAX will be fluid enough. If there is a way, are there any open source scripts, examples, or resources that you could point me to?
Alas, CSS does not support rotating images in any way, shape or form (unless you count CSS Transforms, which are only supported by Safari 4 and Firefox 3.1).
Your best bet is to use Raphael's image() and rotate(), which should support all semi-modern browsers (using SVG) and most versions of IE (using VML).
This jQuery plugin works in major browsers including IE: http://wilq32.googlepages.com/wilq32.rollimage222 . It makes use of excanvas, but at least it allows you to evaluate if that method is good enough for your purposes.
Yes, via CSS Transform:
var degree=180;
document.getElementById('image_name').style.transform='rotate('+degree+'deg)';
Google is your friend:
http://www.walterzorn.com/rotate_img/rotate_img.htm
But the downside of this technique (as mentioned) is that it uses hacks by inserting a huge number of DIVS so it could slow down the browser a good bit. Use with caution. Problems like this are why the canvas tag was created in the first place.