874999 - Sprite our SVGs in Fireplace

Status: RESOLVED WONTFIX

(Marketplace Graveyard :: Code Quality, enhancement, P4)

Description

[Christopher Van Wiemeersch [:cvan]]

Fireplace has a lot of SVGs. Sprite them where appropriate.

Comment 1

[[e-mail]]

We should consider compression as part of the makefile step, think we could probably make them a fair bit smaller too. (Though we'll need to retain the src as compressors can make difficult to edit).

Comment 2

[Matt Basta [:basta]]

The biggest issue is that images aren't loaded until they're needed, meaning that you end up with a weird delay between when we swap out the normal state with the hover state images.

Minifying the XML isn't a bad idea either, but gzip does a lot for us already.

Comment 4

[[e-mail]]

I started looking at this as I need to update the cats svgs to add a new icon for maps. 

We can use cloning + transforms in the svg to utilise the same path with different color which is nice as it keeps the file-size down. However the biggest snag is how to represent states in the style.

As there's no universal support for background-position-x it's a bit tricky how best to not need to have selectors duplicated for the different states. I'm still investigating this but if anyone has thoughts or ideas then they'd be welcomed.

Comment 5

[Matt Basta [:basta]]

If you give the individual icons IDs inside the SVG, accessing the SVG with a hash in the URL should let you display only a certain node with an ID.

http://simurai.com/post/20251013889/svg-stacks

Comment 6

[Andy McKay]

If you feel strongly about this improvement, let's reopen and do.