4 ms·
Sprites are a dirty hack that works around the fact that HTTP 1.0 only allows one asset to be returned per request. Using CSS background-images to represent co
by bsimpson 13y ago
Sprites are a dirty hack that works around the fact that HTTP 1.0 only allows one asset to be returned per request. Using CSS background-images to represent content is semantically gross.
If you wanted to the same advantages with SVG, you shouldn't be using CSS sprites; you should take advantage of the fact that SVG is a text-based format and concatenate them all together. Then, you can use some really simple JavaScript to insert each child SVG into the correct place in the DOM.
The ideal way to handle this would look like this:
<img src = "icons.svg#map" />
where map.svg was the original file on the developer's machine. A grunt task could concatenate all the SVGs in a particular folder together and give them IDs according to their file names. In the client's browser, a JS prollyfill would iterate over all the img tags where src ends in a hash and replaces them with the child SVG of that ID.
Just as the prevalence of $$ inspired querySelectorAll, an SVG-optimized spriting system could inspire browser vendors to properly handle hashes in src attributes. and the need for the prollyfill (or the ugliness of CSS spriting) would fade over time.
- dkuntz2 13y agoHow would you make HTTP better? How could you get it to send multiple files per request, because, while a little weird in some ways. HTTP is really quite well designed, there isn't really a good way to send multiple files with one request, unless you want to mage HTTP kinda hacky. Sorry, I've had to write an HTTP compliant server recently, and I don't think there's any good way to send multiple files without completely redesigning the protocol, and even doing that, I don't think there's a good way to do it. Plus, keeping requests atomic makes more sense than bungling then together. I know the main point of your comment wasn't too make HTTP better, just that sprites are, in your opinion, a bad hack, but your implying that HTTP is bad. Also, and this is just nitpicking, everyone uses 1.1, which has persistent connections in the spec, which help negate some if the computing cost for sending multiple files.
- Zarel 13y agoErr, SPDY sends multiple files per request... I suppose it counts as "completely redesigning the protocol" though.
- elithrar 13y agoSPDY[1] multiplexes multiple assets over one connection, which will (one day; many years from now; eventually) resolve some of the performance issues with HTTP and TCP. You can already use SPDY now (and fall back to HTTPS), FWIW. [1]: http://www.chromium.org/spdy/spdy-whitepaper http://www.chromium.org/spdy/spdy-whitepaper
- ricardobeat 13y agoSPDY has been enabled on both Chrome and Firefox for over a year. http://caniuse.com/spdy http://caniuse.com/spdy
- bsimpson 13y agoI wasn't trying to bag on HTTP 1.0. I was just noting that HTTP 2.0 (fka. SPDY) includes support for sending related assets along with the requested resource.
- tpenzer 13y agoDid a fun experiment like that here: http://thepenzone.com/svg-image/ http://thepenzone.com/svg-image/