Считается ли костылем использовать свойства filter для background-image вместо inline svg?

Question

[pchela95]

для смены цвета

вместо fill: #ffa500

использовать filter: invert(65%) sepia(54%) saturate(2331%) hue-rotate(359deg) brightness(102%) contrast(106%);

Comments

[Ankhena]

Масками проще.

[pchela95]

Ankhena, изучу. но через фильтр считается костылем? или это просто один из способов и всё...

[Ankhena]

pchela95,
Дело в том, что результат работы двух свойств background и mask очевиден. Т.е. сразу понятно какого цвета будет результат.
В случае с фильтрами - нет.

Если вы знаете некостыльный способ - можете использовать его.

[pchela95]

Ankhena,

<svg class="svg">
    <g id="icon-search">
      <path d="M16 16L12.4584 12.4521L16 16ZM14.4211 7.71053C14.4211 9.49027 13.7141 11.1971 12.4556 12.4556C11.1971 13.7141 9.49027 14.4211 7.71053 14.4211C5.93078 14.4211 4.22394 13.7141 2.96547 12.4556C1.707 11.1971 1 9.49027 1 7.71053C1 5.93078 1.707 4.22394 2.96547 2.96547C4.22394 1.707 5.93078 1 7.71053 1C9.49027 1 11.1971 1.707 12.4556 2.96547C13.7141 4.22394 14.4211 5.93078 14.4211 7.71053V7.71053Z" stroke-width="2" stroke-linecap="round"/>
    </g>
</svg>

<svg viewBox="0 0 20 20">
                                <use xlink:href="#icon-search"></use>
                            </svg>

а так?

[Ankhena]

pchela95, господи, делайте как вам удобнее.

Нет адекватного красивого способа управлять одноцветными иконками.

[pchela95]

господи, делайте как вам удобнее.

но только не через фильтер?
по сути Вы ж сказали , что через фильтр костыль..

[Ankhena]

pchela95,
Про костыли вопрос философский.
Потому что все ждут, когда можно будет нормально управлять цветом фоновых svg (хотя бы инлайновых) через css.
Любой из нынешних способов я считаю костылем.

[pchela95]

Ankhena,

Потому что все ждут, когда можно будет нормально управлять цветом фоновых svg (хотя бы инлайновых) через css.

а он возможно будет?)

[Ankhena]

pchela95, у меня нет такой информации, но я жду :)

Answer 1

[Andrew]

Привет! Смотря в каких ситуациях. Если картинка svg вставлена через background и проект который ты делаешь не нуждается в поддержке браузера IE, то тогда ты можешь использовать его. Если IE нужен, то твой вариант не будет работать.

Как вариант можно сделать компонент, который будет принимать любую svg и задавать ей любой цвет. Но этот способ будет работать только со вставкой svg в верстку.

Либо без компонента сразу в самой картинки изменить ей цвет. Для этого нужно отредактировать файл svg.

Посмотреть поддержку браузеров можно тут - https://caniuse.com/?search=filter