Does Discourse accept SVG icons with Gradient?

Development

AI-generated summary

The discussion revolves around whether Discourse accepts SVG icons with gradients. danielabc experiences issues with gradients in SVG icons, and wonders if it’s possible to add gradients via CSS. rokejulianlockhart suggests that if SVG format supports gradients, it might be a bug and should be reported as a feature request. Stephen mentions that SVG icon gradients are overridden by CSS color settings. awesomerobot states that CSS gradients won’t work with SVG icons and must be applied directly to the SVG file. Arkshine provides a workaround to achieve a gradient on SVG icons by defining gradients in an invisible SVG file and targeting them in CSS using fill: url(#my-id).

1

I see that any icon with a gradient that I put doesn’t work, does the Discourse not accept it?

If he doesn’t accept it, is there a way to put a gradient around the icons via css?

2

I have same queries, anybody have any clue regarding this?

3

If the SVG format supports gradients, then consider it a bug. Probably best reported as a feature request at the git repository.

4

An svg such a logo should work fine.

AFAIK SVG icon gradients are overridden when their color is set by the CSS?

5

I saw that there are two ways, by CSS and by the code of the SVG file, but whenever I use one or the other it doesn’t work, the file doesn’t change!

Do you know of a way for me to use gradient on the icons?

6

CSS gradients won’t work with SVG icons, I believe the gradient has to be applied to the SVG file directly

7

You can use this trick to make a gradient on SVG icons:

You create an invisible SVG where you define all your gradients associated with an id (e.g.: <linearGradient id="my_id"...)

Then, in your CSS, you target SVG icons and use fill: url(#my-id)

I’m not sure how much it’s ugly, but it works. :smile: