I'm designing a website, and I have some vectors (colored vectors for landscape). I always had a concern about using SVG due to the browsers compatibility.
As we are in 2020, Is SVG fully supported now with all of its details in all browsers (web, mobile) ? or still working only for the basic vectors those don't have much details ?
Should I trust it for a website that will be used widely whether via web/mobile ? or better to stick with JPG / PNG ?
All browsers have excellent support for SVG. You should have no worries about using it.
However you may want to avoid relying on some of the new bleeding edge features of SVG 2.
SVG 2 has not been finalised yet, and browser support for some of the new features is mixed.
As a resume of this post, pretty much all the modern browsers support at least partially SVG. You should definitely use it for simple images, but it's not wide supported for animations for example.
Note that some small display issues can happen, even with images. More information about it on this page.
Related
If I want a simple two color gradient background, would it be accurate to say that SVG would have more cross-browser support than HTML5?
I checked for Gradient support in old browsers in SVG and they all appear to support them. However, some real-world experience can help shed some light on the pros and cons of these two choices? There are some questions asked earlier but they do not address this specific case of a simple two-color gradient to be used as a background and comparison with HTML5 gradient support.
Also, I would like to know if the same SVG or CSS, whichever option is chosen, will work for all the major browsers or is there tweaking required to support different browsers. For emphasis, I repeat: I AM NOT LOOKING FOR ANY FANCY BACKGROUND, JUST A TWO-COLOR GRADIENT.
(An auxiliary optional question: Will SVG support eventually die in browsers given its lack of popularity?)
The only browser version with significant marketshare that supports SVG but not CSS3 gradients is Internet Explorer 9.
Pros of using SVG gradients
IE9 support
It's cleaner linking to an external SVG file rather than
using vendor prefixes for gradients
Cons of using SVG gradients
Causes an additional request unless you base64 encode it and embed it in the CSS file.
If you embed the base64 version of the gradient then it's difficult to modify.
Your concern for SVG's future is greatly exaggerated. There's plenty of interest in SVG given new high resolution displays ("retina") an it is used by major javascript data-viz and graphing libraries. If anything, the future actually looks brighter for SVG.
I personally use SVG gradients when I need IE9 support. I use Microsoft's SVG Gradient Generator and use the base64 version as to not cause an additional request. I haven't run into any issue at all, SVG gradients behave just like their CSS3 counterparts.
It seems that w3c supports the svg file format, however not all browsers support it yet. Are there currently any viable options to include vectorized graphics on a website?
SVG is the way to go, but you may need to use some additional plugins to ensure wider compatibility. To be clear, all modern browsers support it, but there are notable 'previous-gen' browsers that don't (ok, just IE & early Android).
Consider SVGWeb, which will allow you to create a cross-platform SVG embed. I don't totally agree with their methodology (falling back to a Flash renderer if no native support is detected), but it allows you to embed SVG files, unlike RaphaelJS.
The alternative is to user a server-based renderer like Batik, but my experience with Batik is that it is slow as a dog... fine if you have everything cached, but if you need dynamic scaling or things of that nature, you're better off with SVG proper.
SVG is really the only widely supported vector format, but you're right that it's not ubiquitous. The most popular option is to use a layer on top of SVG like Raphaël. It's compatible with any browser you're likely to encounter nowadays.
I currently work for a large company and I design for their high-traffic ecommerce website. We support tens-of-thousands of users across a variety of browsers. Our current browser stats point to most people using either Firefox 3+ and IE8. There are about 5% of users still on IE6.
Is it time to start coding for the future and impliment HTML5 across the site? Is it a responsible thing to do or should I wait a year for people to upgrade to better supporting browsers?
Thank you.
HTML5 isn't one specific thing. You can start using it even in browsers that have no idea what HTML5 is. If you just start using some of the extra tags or form types, they degrade perfectly into standard elements in older browsers. Video needs a Flash fallback anyway. The advanced scripting features all need fallbacks for non-supporting browsers anyway, or must only add non-essential functionality.
In short, sure, start using HTML5 techniques now to provide advantages for cutting-edge browsers, just make sure it all degrades nicely in older browsers.
IE8 doesnt support most of HTML5.
There are libraries you can use to make it more HTML5 aware; but for a large production site I think your better of waiting a year.
I would say that the 5% of users still on IE6 will probably remain on IE6. They either aren't interested in upgrading (perhaps they don't know about these things), or are restricted to IE6 by security policies in their workplace. In particular I've found that a number of our clients are not upgrading from IE6 because their IT teams consider it to be too big a change, or their existing software is not compatible with anything else.
Therefore, my advice is: go HTML5. With a bit of work you can work around IE6's deficiencies (look at Modernizr, CSS3PIE for ideas). And that way, the other 95% of customers get a better experience.
... what is "large"? Considering HTML5 is still considered work in progress, I'd vote no.
The name "HTML5" is tending to be used by most people at the moment to describe all the exciting new features in web browsers. Not all of these features are actually part of the HTML5 spec - for example, CSS and Javascript have new features which are being referred to under the HTML5 banner. I'm going to assume you mean all these features.
My answer would be to investigate which features you can implement, but remain backward-compatible. Many of the features of HTML5, CSS3, etc can be added to your site without making it un-usable for older browsers.
Some examples: (but do spend time researching for more)
New input types, such as <input type='date'> and <input type='number'>These give you new features in a modern browser, but old browsers will still show a normal input field.
More info: http://www.456bereastreet.com/archive/201004/html5_input_types/
Semantic HTML5 tags, such as <section>, <footer>, etc.
These give you additional semantic meaning to your HTML tags, which is good for SEO and other automated systems that look at your site. They are broadly backward-compatible, though in order to support them in IE6/7/8, you will need to include an IE hack such as HTML5Shiv. However, I would suggest using Modernizr, which includes the HTML5Shiv plus a stack of other useful functionality.
Some CSS3 features such as border-radius. IE doesn't know about this, but the result is that IE will have square corners and other browsers will have rounded corners. So nothing that breaks the site for IE users.
But if you really want to, IE can be made to support a number of CSS3 features, including border-radius, using tools such as CSS3Pie.
Instead of using SVG graphics directly, use a Javascript graphics library such as Raphael, which will draw SVG in browsers that support it, and fall back to VML for IE (which will even work in IE6).
Obviously stuff like the <video> or <canvas> tags aren't going to work in older browsers, but frankly, it'll take you long enough just implementing the features you can use straight away; by the time you're ready to take a step further, things will have moved on anyway.
I have designed a layout in such a way that I can make most of the images using CSS3 (using gradients, etc) I want to make as much use of HTML5 and CSS3 possible. But I can't ignore the browsers that don't support them yet. So, I was wondering is there a way to detect a browser first and then if it is a non-HTML5/CSS3 supporting browser, the code will load the images and if it is an HTML5/CSS3 supporting browser, it will use advanced code instead. This will save a lot of loading time for them.
What are your views about it? Is this a good approach? How to detect browser before anything else loads on the site?
Check out HTML5 boilerplate, it was made to address those issues very toroughly.
Also CSS3Pie can be used to add CSS3 support for IE.
I forgot wether its part of the HTML5 boilerplate or not.
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?
Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?
When talking about HTML5 or CSS3, you should head over to:
When can I use...
As can be seen, we are still far far away from using that.
Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:
Progressive Enhancement and Graceful Degradation
Here are some resources also:
Gallery of HTML5 Sites (You can learn and get the idea from them)
Create modern Web sites using HTML5 and CSS3
Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8.
The best way to test them is to install them on your computer.
You want to use html tags and css compatible with mobile browsers.
For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.
You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.
For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html
Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.
A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.
I was going to make this a comment, but then I got carried away..
w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.
Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.
As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.
The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.
Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.