SVG / PNG icons

[niryariv]

The new design requires group icons to have a different color in the homepage and internal pages.

Possible solutions:

1. Find some color that'll work with both (likely require changing the homepage design)

2. Have two sets of PNG icons, one for each color

3. Use SVG icons so we change color via the CSS, eg a class for each case

Seems like 3 is the best option as it will offer us more versatility and will be easier to use when site maintainers add new icons. @OriHoch please take a look and see how much work is needed to implement.

(GH doesn't allow attaching SVG to an issue. For testing you can get svg/png files of our Religion icon here)

[OriHoch]

1. this is how the SVG icon looks on group pages: 1 2 - is this OK?
2. how should we handle the possibility that a site admin will set a PNG image for a group?

[niryariv]

1. looks fine to me though I'd prefer the previous color

2. We'll tell them to use an SVG file

[OriHoch]

ok, please provide all the group image SVGs

[OriHoch]

this is more complex then I thought, let's discuss next meeting if it's worth to invest the time for this

[niryariv]

We keep getting negative feedback on the icon colors. As we discussed, the new design has a light blue background on the homepage and a white bg on internal pages. This makes it very hard to find an icon color that will work on both.

We discussed changing the color programmatically via CSS according to the context. Turns out this doesn't work when the SVG is an external file.

Since this keeps coming up I looked into it again, seems like there's a hack that might work for us. Can you take a look?

[OriHoch]

I couldn't get it to work, the example in the link you sent doesn't work for me. It seems that this feature is partially supported in most browsers, and also depends on how the SVG file is structured.

[niryariv]

Could it be a CORS issue? It seems CORS applies to SVG, and when I try it locally I get a CORS error

[niryariv]

Moving to TODO for now.

[niryariv]

For future reference:
https://stackoverflow.com/questions/61824128/python-change-color-in-svg-and-export-to-svg-png-pdf