Skip to main content
Topic: SVG stuffz: IE9 gradient support (Read 15581 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

SVG stuffz: IE9 gradient support

Been contemplating this. Was talking to a friend this afternoon.

Quote(4:34:31 PM) Antechinus: you know how I'm always banging on about how primitive IE is?
(4:34:39 PM) Souls in Serenity: Yes
(4:34:46 PM) Antechinus: well that's because it is :D
(4:34:53 PM) Souls in Serenity: :P
(4:34:59 PM) Antechinus: or at least, has been until very recently
(4:35:11 PM) Antechinus: IE10 is pretty damned good
(4:35:29 PM) Antechinus: 9 is sorta ok ish but really rather meh
(4:35:40 PM) Antechinus: 8 is ok for the absolute basics but..............
(4:35:57 PM) Antechinus: anything less than 8 is as ugly as a bulldog eating porridge
(4:36:38 PM) Antechinus: anyway so we at ElkArte have decided this is 2013, not 1913, and we're coding accordingly
(4:37:45 PM) Antechinus: but given the number of crazy people who live in caves and eat raw snails n stuff and still use stone tools and IE9......................
(4:38:35 PM) Antechinus: I started looking into ways of getting things looking a bit better in IE9
(4:38:56 PM) Antechinus: anyone using 8 will just get a basic look (no frilly btz, but clean)
(4:39:10 PM) Antechinus: anyone using 7 can go suck donkey ballz
(4:39:32 PM) Antechinus: anyone using 6 can be put through a combine harvester
(4:39:35 PM) Antechinus: serves them right :P

So, I started playing with teh SVG stuffz, using a gradient generator on the Microsoft site. Took a quick look at the generated syntax for a straight linear gradient, and an offset radial gradient, and then quickly figured out how to do my own extra colour stops and custom offsets. The syntax for this level of stuff is quite simple. Not really any more difficult than doing CSS3 gradients.

For the basic gradient on the buttonlist and quickbuttons, the .svg file is about 480bytes with all this spacing and commenting:

Code: [Select]
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g908" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">

<!-- Color code for the top of the gradient -->
<stop stop-color="#FCFCFC" offset="0"/>

<!-- Color code for the bottom of the gradient -->
<stop stop-color="#E5E5E5" offset="1"/>

</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g908)" /></svg>

Compressing it down to the bare mimium (no white space or line breaks or comments) only saves about 130bytes, which wouldn't be noticed in practice by the time you do the http stuffz.

Given that IE9 is going to be around as a significant player for quite some time, I tried hooking up some custom SVG images in an ie9 images/folder. Works well. Also works in Safari, which currently doesn't support W3C syntax for CSS3 gradients.

Problems: Every so often, Chrome and Firefox versions seem to have problems with SVG rendering. Chrome had problems a year or so back. Firefox has problems now. These probably wouldn't be an issue with the fairly small number of static elements we'd be talking about, but since FF and Chrome support CSS3 gradients there's no point in forcing them to use SVG.

It's more files for beginers to edit, and another syntax for them to learn.

Also, these are images, and they do need to be called via http, then downloaded and cached, so compared to a CSS3 gradient they're not necessarily best for performance.

So, I'm wondering if just due to sheer market numbers of dumb browsers, we should do our basic gradients for dumb browsers with SVG instead of CSS3, and serve CSS3 to the smart ones.

It's hardly any more trouble for us. The .svg files are easy for me to generate, and we'd just put them in a dumb browser folder and sequence the background-image calls in the CSS:

Code: [Select]
.buttonlist li a {
display: block;
background: #fcfcfc;
background-image: url(../images/ie9/buttonlist.svg);
background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); /* W3C */
}

This is future-proof, because any browser which supports W3C syntax for gradients will just dump the first declaration and use the second.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG stuffz: IE9 gradient support

Reply #1

SVG is nice, told you so  :D  ..

but in this special case I'd go with simple background colors instead of gradients for browsers, who do not support W3C standard CSS3 gradients (Safari, IE9, IE8)..
 TE hates bloated work-arounds for legacy sh*t...
Thorsten "TE" Eurich
------------------------

Re: SVG stuffz: IE9 gradient support

Reply #2

Yeah but it's hardly bloated, is it? IE8 should get the basic look, because it can't even support any css3 at all. IE9 and Safair, maybe not so basic. Gradients are the only thing the theme needs that they don't do.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG stuffz: IE9 gradient support

Reply #3

K, after sleeping on it I'm now thinking that although SVG is rather cool in some ways, it doesn't make sense as a fallback for IE9 and Safari. Why not? Because SVG sprites are rather complex suckers to code, so for n00bability it would have to be done in separate images for each gradient required.

OTOH, if we were to provide a fallback, it could be done with one simple PNG sprite of around 1 or 2kb, which is less bytes than the SVG fallbacks would need, and would be easy for anyone to edit in PS or GIMP. It would only take one HTTP request to grab the thing, and it would provide a fallback for IE8 as well as IE9. So, one basic PNG sprite makes more sense in this situation.

Yeah, I know: bloat ya reckon. Having gone through SMF 2.0 dev cycle, where I had to make everything work in IE6 and IE7, in RTL languages as well as LTR, without breaking better browsers, a 1kb sprite fallback for three basically sound browsers is pure luxury. It will add maybe six lines of CSS to the stylesheet. Maybe less.

Realistically, it would also substantially broaden Elk's market appeal, which is worth bearing in mind.

ETA: Just whipped up a test sprite in Photoshop (not for actual use, as the colours are random gradients from PS).
Image is 1x600, which would be about right, with six gradients on it. Compresses down to 1034 bytes and looks perfect.
Last Edit: June 22, 2013, 06:30:16 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG stuffz: IE9 gradient support

Reply #4

Ok, another alternative: http://code.google.com/p/svg2vml/

I've had a quick play with IE8 and it seems to work with their online demo. We already have a specific conditional for IE8 anyway.

Code: [Select]
	// A little help for our friends
echo '
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->';

So, what we could do is to change that to this:

Code: [Select]
	// A little help for our friends
echo '
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="svg2vml.js"></script>
<script>var vectorModel = new VectorModel();</script>
<![endif]-->';

..and then we can run .svg for everyone if we want to. Thoughts?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG stuffz: IE9 gradient support

Reply #5

yep, that's good.. But don't waste too much time for old IE versions ;) We should support IE8 in general, but I personally really don't care about a slightly different layout for IE8 users..
Thorsten "TE" Eurich
------------------------

Re: SVG stuffz: IE9 gradient support

Reply #6

Oh I don't either, but the point is that if we serve svg gradients we can cover everyone, and if we're going to shiv IE8 anyway might as well shiv it a little more so it looks better. No real problem for us, and might amuse some cave dwellers.

Anyway, really it comes down to whether we want to serve up CSS3 gradients (probably easier for n00bs to alter) or .svg images (will cover all browsers, but probably a bit more intimidating for n00bs). I'm just thinking about it all, since the CSS is far from finalised anyway and we can do what we like.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG stuffz: IE9 gradient support

Reply #7

Parrotz!!!!!!!!!!!!! ;D

/*K, been thinking about this some more. We already know that if we want gradients in IE9 and Safari we really need to use svg. Safari will do CSS3 gradients if we use vendor-specific syntax in extra decalrations, but IE9 has no gradient support at all (apart from those horrible filter prognostication proctology frogporn things).

So the idea was (was..) to just use CSS3 gradients anyway coz teh n00bz n stuff. We're missing something here, IMO.

If we use svg (and don't worry about IE8) we cover everyone and, since svg files are text, we can bundle 'em, up and gzip 'em with the css and js files if we want to. This means no extra http requests to fetch a few small svg images, and effectively zero download and cache time for them (they'll be so small when gzipped that they wont add anything noticeable to the download time).

So if we do this, we get maximum market coverage for minimum bloat, and minimum performance hit. Realistically, Safari and IE9 are going to be significant players, so we should cover them. If teh n00bz don't want to edit svg gradients (can give them a readme, and it's really easy) that's no problem. They just grab a pile of horrible bloat from an online gradient generator and go nuts.*/

Sorted, yes? :)

ETA: Bleh. Sorted, no. :P

Just did some testing. Although Safari is supposed to support svg, it's support is broken. Figures. So, not worth messing around with svg. Back to gradients. Nothing to see here. :)
Last Edit: July 10, 2013, 10:06:19 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P