How to change color of svg dynamically?

Question

PHP

The product has a label whose color is selected in the admin panel. How can I connect an svg label so that it can pass the color coming from the server to fill?

Answer 1

If I understand correctly, then you can do this:
In the $color variable, we write the color that we take from the admin panel, and display the value in svg, for example:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

<path id="path1" fill="<?= $color; ?>" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
    C407.227,134.613,291.451,51.919,291.451,51.919z"/>

</svg>

Or you can use jQuery:
$('#path1').css({ fill: "<?= $color; ?>" });

Answer 2

In css add:
in html use this construction

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <defs>
        <symbol id="icon"><path d="M0 .5L.5 0 7 6.5 13.5 0l.5.5L7.5 7l6.5 6.5-.5.5-3-3L7 7.5.5 14l-.5-.5L6.5 7 0 .5z" fill-rule="evenodd"/></symbol>
    </defs>
</svg>

<div class="label" style="color: red">
    <svg role="image">
        <use xlink:href="#icon"/>
    </svg>
</div>

Answer 3

Try svgmnemo.ru/pub/svgdyn.html