SVG и CSS variables

<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle stroke="var(--stroke-color, #979797)" cx="7" cy="7" r="7"></circle>
        <path fill="var(--fill-color, #979797)" d="..."></path>
    </g>
</svg>

или

<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        <![CDATA[
        circle {
            stroke: var(--stroke-color, #979797);
        }
        path {
            fill: var(--fill-color, #979797);
        }
      ]]>
    </style>
    <g>
        <circle cx="7" cy="7" r="7"></circle>
        <path d="..."></path>
    </g>
</svg>

P.S. Нужно было прокинуть css переменную в svg из background, но нет способа это сделать. Фоновое изображение, оно не является частью DOM, и нет возможности им манипулировать. В итоге сделал двумя svg.


Похожие записи

Кратко о внедрение зависимостей и сервис контейнере

Cтатья о том, что такое "Внедрение зависимостей" и "Сервис-контейнер" отталкиваясь от их реализации в PHP фреймворках. Статья написана по мотивам статей Фабьена Потенсье, ведущиго разработчика и идеолога фреймворка Symfony, а также документации фреймворка Laravel.