Design Festival Podcast #14: CSS3 Gradients or SVG Backgrounds

Welcome back everyone! I caught up with SitePoint lead designer Alex Walker and master of the “Cicada Principle” to have a chat about limitations and banalities of CSS3 gradients and where SVG backgrounds could suitably replace them.

Download this Episode

You can download this episode as a standalone MP3 file:

You can subscribe to the Design Festival Podcast either directly or via iTunes — add the Design Festival Podcast to iTunes.

Episode Summary

Presenters

Content Rundown

  • Intro: Graphically, CSS3 is awesome — rounded corners, shadows, transformations, …
  • However CSS3 gradients are a bit unwieldy — rudimentary linear or radial gradients, bothersome syntax, varying support across the browsers, …
  • Alternative? Maybe use SVGs?
  • What is SVG
  • How do you use it, browser support, usage with CSS, …
  • Creating SVGs — Inkscape, Aviary’s Raven, Adobe CS, SVG-edit, …
  • The merits
  • Banter about cool use ideas
  • Show close
  • Recommendations of the Week

Links

Recommendations of the Week

Music

The intro music is from track two, the album-title track from Kräma’s After the Rain album. I’ve been absolutely rockin’ out to this album this past week. Kräma are a progressive-psy/trance duo-group from Greece, and I’m finding their sounds in the prog-psy genre really quite unique. If you like progressive trance or psy make sure you check them out. (They’re signed up with Spin Twist Records who’ve consistently released awesome stuff… yes I am a bit of an electronica nutter.)

Audio Transcript

En route — working through a backlog.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Chris

    It was discussed in the Podcast, that SVG spriting might be a good idea. I am creating a large web project at the moment, and the idea along the line is that we may need 300+ large icons. So, SVG was always attractive.

    With that in mind, I have implemented a system that takes the “meat” (header and footer removed) of the SVG, and places this in a single .svg file. I then load all of these files in a .PHP script and put them in a single svg.js file. Effectively making a single file for all svg images. The equivalent of a bitmap sprite file.

    This file is pulled down on page load. This svg.js script simply defines a global array, and assigns each fragment of SVG to the array, using its original file-name. Then, when you need an SVG image, you make a call to a SVG lib, and this places the SVG “meat” between the SVG header and footer ().  And this is added to the DOM, where required. And boom, there is your lovely, scalable SVG icon.

    Anyway, it all sounds a bit complex. But this kind of system could be rolled out via some kind of lib, such as jQuery (which we do not use). Why all the singing and dancing. Well, it means all the SVG code is in a single, pre-cached file. And we strip the headers from the svg Fragments, saving on memory for all that repetition.

    This seems to be working well for us. All graphics on the site is in a single 220kb (un-compressed) file (60kb when zipped). And all the heavy lifting is done in the browser.

    So yeah, go SVG!

    BTW, a couple of points not covered, and could be hit on in a future return to SVG land….

    SVG Filters? I’m using these for drop shadows. Could also be used for on the fly blurring of icons and other neato effects. Our system adds this in the browser, as part of the icons wrapper. Changing the icon styling on the fly. Which is kind of great. Tiny icon file sizes + procedural drop shadows :)

    Chrome SVG Bug. Right now, SVG gradients do not seem to work in Chrome. Which is our main dev browser. Will be fixed in near future I guess. But certainly an issue for now. As a result, we have skipped on using gradients for now. Which has forced us into a cleaner style, flat colours and all. Not such a disaster, but may be an issue for others until fixed.

    • Anonymous

      That is really cool. The on-the-fly re-styling of SVG icons reminds me very much of some of the ambitions and initiatives of the Tango Desktop Project with their icons that eventually transformed and became the new GNOME icons.

      A couple of the guys behind it (ones that spring to mind are Jakub Steiner — http://jimmac.musichall.cz/ — and and Andy Fitzsimon (whose personal site is down I think atm) made a few scripts that would allow you to replace everything from pre-set filters, gradients, colours, stroke styling, … all on the fly, allowing you to swap between the Tango style to the GNOME style, to a hi-visibility and hi-accessibility style, to even the more glassy and shiny Oxygen-style KDE icons. Pretty cool.

      —Pascal.

  • http://twitter.com/alexmwalker Alex Walker

    @0a125464861ff931cb7fa03c1e8553dd:disqus  Chris That sounds really interesting Chris. Any chance of getting a demo on line somewhere. It great to be able to see things in action and poke around with firebug to see how it all works. 
    On the SVG filters, I’m going to touch on them in the article, but I have found that filters aren’t supported quite as well as general SVG — shadows and blurs in particular aren’t there in IE9-10. 

  • http://pulse.yahoo.com/_6GG7CEFACSCBVP2LFIJ23KVSYQ Emma Pope

    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you.
    go here, pluscent.com