Sprite our SVGs in Fireplace

RESOLVED WONTFIX

Status

P4
enhancement
RESOLVED WONTFIX
5 years ago
4 years ago

People

(Reporter: cvan, Unassigned)

Tracking

({perf})

Points:
---
Dependency tree / graph

Details

(Reporter)

Description

5 years ago
Fireplace has a lot of SVGs. Sprite them where appropriate.
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

5 years ago
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.

Updated

5 years ago
Duplicate of this bug: 875360
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

5 years ago
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
No longer blocks: 983866
Blocks: 992365

Comment 6

4 years ago
If you feel strongly about this improvement, let's reopen and do.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Component: Consumer Pages → Code Quality
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.