# Поддерживает ли Discourse SVG-иконки с градиентом?

**URL:** https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062
**Category:** Development
**Created:** [14.Март.2023 05:37:13 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062 "2023-03-14T05:37:13Z")
**Posts on this page:** 1
**Showing post:** 7

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [01.Май.2023 21:11:04 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/7 "2023-05-01T21:11:04Z")

</div>

Вы можете использовать этот трюк для создания градиента на SVG-иконках:

> [@How do I put gradient on thin icons?](https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429/4?u=arkshine):
>
> Hi, From what I read in [Gradients in SVG - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients), you must add \<linearGradient\> to the SVG. Others resources: [Gradient fills for SVG icons](https://fvsch.com/svg-gradient-fill)[SVG Gradients](https://jenkov.com/tutorials/svg/svg-gradients.html) What you can do is create a hidden SVG in your [theme/component](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) to define your gradients: \<svg aria-hidden="true" focusable="false" style="width:0; height:0; position:absolute;"\> \<linearGradient id="my-gradient-1" x2="0" y2="1"\> \<stop offset="0%" stop-color="var(--color-stop-1)" /\> \<stop offset="50%" …

Создайте невидимый SVG, в котором определите все ваши градиенты, связанные с `id` (например: `<linearGradient id="my_id"...`)

Затем в вашем CSS выберите SVG-иконки и используйте `fill: url(#my-id)`.

Не уверен, насколько это выглядит неуклюже, но это работает. 😄

---

_[View the full topic](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062)._