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.

• https://css-tricks.com/change-color-of-svg-on-hover/
• https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables
• http://tutorials.jenkov.com/svg/svg-and-css.html
• https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image