4 ms·
Nice to see SVG continuing to gain traction. I've almost entirely eliminated PNG from new work. For the (still fairly common) browsers that don't support SVG, I
by organsnyder 12y ago
Nice to see SVG continuing to gain traction. I've almost entirely eliminated PNG from new work. For the (still fairly common) browsers that don't support SVG, I either use a simple bit of Javascript to replace the SVG references with PNG fallbacks, or—if the image is referenced via CSS—I can do it entirely with CSS's built-in fallback mechanism.
So far, I've been using iconmonstr —http://iconmonstr.com/ http://iconmonstr.com/ —for my icon source. He has a large variety of high-quality icons available as SVG or PNG.
- im2w1l 12y agoMay I ask what the main reason you have switched is? Bandwidth? Easier on the [C/G]PU? Resolution indepencence?
- organsnyder 12y agoResolution independence is the main reason. No matter what the screen density, the images will look sharp. And, there's even the possibility that rendering engines can use their own tricks (such as sub-pixel rendering) to make it look even better (though I'm not sure if any browsers actually do this). File sizes can be better (though they're occasionally worse), and I'm not doing anything fancy enough to be straining any [CG]PU made in the past decade. Also, I really like the fact that the image format more closely represents the actual intent of the image creator. "Draw a line from [ax, ay] to [bx, by]" is much more accurate than "Draw a pixel at [ax, ay], then draw a pixel at [ax+1, ay+2], then draw a pixel..."
- Someone1234 12y agoFew do, but creating SVG on the fly is also much more straight forward than other formats (no need to learn a specific image library). I've seen people do graphing engines which generate an SVG graph. Although this benefit is a lot less beneficial now when we have canvas support in a lot of browsers. SVG is plain text XML after all. Not binary blobs.
- forrestthewoods 12y agoWhat browsers don't support SVG?
- outpunk 12y agoIE < 9 and Opera Mini http://caniuse.com/#feat=svg-html5 http://caniuse.com/#feat=svg-html5
- Someone1234 12y agoOpera Mini has a surprisingly high usage (over 5-8%!) I genuinely had no idea it was so popular.
- lysyi3m 12y agoOpera mini is very popular in the CIS countries =)
- Someone1234 12y agoIs it something to do with the way it handles the Russian language(s)?
- waspleg 12y agoOpera Mini goes through their own proxy essentially. Their goal was to minimize mobile bandwidth but the net effect is bypassing censorship. I work at a public high school and this browser is very popular with the kids on their phones for this reason. There is a good article about it here http://en.wikipedia.org/wiki/Opera_Mini http://en.wikipedia.org/wiki/Opera_Mini
- gtk40 12y agoI use it mostly when on data. Even though I have a very high data limit, I find without 4G that it performs much better.
- mtmail 12y ago
- dmlorenzetti 12y agoAccording to Eisenberg & Bellamy-Royds' (excellent) "SVG Essentials", you should be able to create a fallback by using an <object> tag. Assuming that works (I haven't tried it), it could be a more direct approach than Javascript. The <object> element is the general-purpose way of embedding external files in HTML and XHTML... Any content in between the [start and end tags] will be rendered only if the object data itself cannot be displayed.
- organsnyder 12y agoInteresting idea, and I don't doubt that it would work (though I also haven't tried it). I prefer to keep my HTML semantic when I can, and <img/> is more accurate than <object/>. Since SVG support is now over 90% of deployed browsers, I'd rather use Javascript for the edge cases.
- lysyi3m 12y agoIt seems that using of <object> - not the best solution. For example in construction like <object data="image.svg" type="image/svg + xml"> <img src="fallback_image.jpg" /> </object> fallback image will always be loaded. To avoid this you need to use additional tricks like conditional comments... We need some more elegant trick to do that :)
- valarauca1 12y ago>Nice to see SVG continuing to gain traction. Not exactly SVG <script> tag makes it slightly malicious. If you don't actually inspect the contents of your SVG file. Yes SVG supports executing javascript internally. I originally thought this post was going to be about that as a few blog posts have popped up about the malicious things you can do with SVG.
- TallGuyShort 12y agoThanks for the iconmonstr.com link. I've been searching for a while for libre-licensed smileys and it's surprisingly hard to find a set that doesn't look creepy.