Как сделать адаптивный svg с возможностью менять цвет без JS?

Question

[Absky]

Как сделать адаптивный svg с возможностью менять цвет без JS?

Answer 1

[Кристина]

Если ты вставляешь иллюстрацию не инлайн, т.е. не код <svg>bla bla bla</svg>, то тебе нужно вставлять через тег

<object type="image/svg+xml" data="images/your.svg" >

А в самом коде иллюстрации добавить

<?xml-stylesheet type="text/css" href="style.css" ?>

и управлять из стилей как обычно.

Comments

[Виолетта Морозова]

а если инлайн?

Answer 2

[Александр]

.div>svg>path{
fill: #ffb600;
}

код svg вставляешь в html в блок с условным классом div

Comments

[Absky]

Покрасить так, да. Чтоб сделать адаптивным - вставлять в img, но тогда нельзя покрасить.
А как сделать и адаптивным и с возможностью покрасить?

[Александр]

Absky, Что значит сделать адаптивным? Засунь в блок, делай этот блок адаптивным, а svg путь будет на 100% ширины.