Как наиболее правильно вставлять svg? Почему не получатся стилизовать svg вставленный через тег object?

Question

[Gustov]

Насколько я понял, самым оптимальным вариантом является вставка svg через тег object, благодаря такому способу у нас:
1) изображение будет кэшироваться;
2) мы можем его свободного изменять через css;
3) не загаживает код как инлайн.

Вот как раз со вторым пунктом и проблема, пытаюсь придать изображению другой цвет, но не получается, что я делаю не так?

html:
object class="microsoft-logo" type="image/svg+xml" data="img/microsoft-logo.svg">
css:
.microsoft-logo { fill: #d22856; }

Answer 1

[Петр]

css нельзя менять svg, что не inline

Comments

[Gustov]

то есть, если я хочу что svg можно было менять через css, то единственный вариант это вставлять инлайновые svg, кэширование которых происходить не будет?

[Петр]

Gustov: Да. А кешировать вы можете самостоятельно, загоняя svg колекцию в localstorage. https://osvaldas.info/caching-svg-sprite-in-locals...

Answer 2

[fetis26]

Через object это какая-то махровая олда. Вставляйте как есть прямо в документ

<p>lorem..</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect...>
</svg>

и получите доступ ко всем контенту через CSS. Там даже можно развесить классы/айди на элементы и стайлить по классам.

Comments

[Gustov]

Просто не нравиться что в коде куча лишних строк, думал это можно сделать как-нибудь 1 строкой.

[fetis26]

Gustov: ну можно через тег use и использовать решение svg4everybody чтобы оно SVG в документо вставило. хотя это обычно для иконок.

ЗЫ. Стили можно еще в самом SVG писать

[trushka]

Вставляйте через use, тогда можно и внешний файл использовать, и стили применять
css.yoksel.ru/svg-decoration