✔ SVG umfärben

[Sprint]

Hallo zusammen,

ich habe hier eine Reihe von Info Icons, die als SVG Grafiken vorliegen. Je nach Status wird der Hintergrund anders eingefärbt. Das funktioniert auch alles wunderbar. Jetzt kann es aber sein, daß der Hintergrund ein rot-schwarz Verlauf ist und ein schwarzes Icon verschwindet da fast total. Eine Umfärbung auf weiß wäre da natürlich genau das richtige.

<div class="iconbg bg_rotschwarz">
    <svg width="20" height="20">
        <image xlink:href="images/svg/banz.svg" src="images/svg/banz.png" width="20" height="20" class="tooltip"></image>
    </svg>
</div>

Es ist ja möglich, eine SVG Grafik über CSS umzufärben. Nur geht mir hier völlig die Kenntnis über das richtige Vorgehen ab. Ich weiß aber auch nicht, ob diese Darstellungsart dazu überhaupt geeignet ist. Sollte es da eine bessere Variante geben, bin ich für jeden Tip offen. Es müßte nur die Option für alte Browser offen bleiben, stattdessen ein normales Bild anzuzeigen.

Das ganze muß sich auch nicht live ändern können. Die Seite ist in der Beziehung völlig statisch.

Wäre schön, wenn mir da jemand helfen könnte.
Viele Grüße, Sprint

 

[Sempervivum]

Das ist ganz sicher möglich, aber dazu müsste man den Text der Grafik sehen. Poste ihn doch mal oder einen Link zur Grafik.

 

[Sprint]

Das ist kein Problem.

<?xml version="1.0" ?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M9,2C5.1,2,2,5.1,2,9c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C16,5.1,12.9,2,9,2z M7.5,10C6.1,10,5,8.9,5,7.5C5,6.1,6.1,5,7.5,5  C8.9,5,10,6.1,10,7.5C10,8.9,8.9,10,7.5,10z"/><path d="M15,11l-4,4l2,2v0h2v2l0,0h2v2l0.7,0.7c0.2,0.2,0.4,0.3,0.7,0.3H21c0.6,0,1-0.4,1-1v-2.6c0-0.3-0.1-0.5-0.3-0.7L15,11z"/>
</svg>

 

[Sempervivum]

Offenbar kann man eine SVG-Grafik nur mit CSS gestalten, wenn sie inline ist und nicht extern über ein img-Tag eingebettet:
http://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color
Ist sie inline, funktioniert es problemlos:

    <svg id="mysvg" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M9,2C5.1,2,2,5.1,2,9c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C16,5.1,12.9,2,9,2z M7.5,10C6.1,10,5,8.9,5,7.5C5,6.1,6.1,5,7.5,5  C8.9,5,10,6.1,10,7.5C10,8.9,8.9,10,7.5,10z" /><path d="M15,11l-4,4l2,2v0h2v2l0,0h2v2l0.7,0.7c0.2,0.2,0.4,0.3,0.7,0.3H21c0.6,0,1-0.4,1-1v-2.6c0-0.3-0.1-0.5-0.3-0.7L15,11z" /></svg>
    <style>
        #mysvg {
            width: 200px;
            height: auto;
        }
        #mysvg path {
            fill: lightblue;
        }
    </style>

Wenn das Umstellen auf inline für dich problematisch ist, z. B. weil es zu viele Grafiken sind, kannst Du das Skript aus dem Link oben verwenden, um es automatisch zu machen. Dann entsteht auch keine Redundanz, wenn Du die selbe Grafik mehrfach verwendest und der Text bleibt übersichtlicher.

 

[Sprint]

Hallo Sempervivum,

danke, funktioniert so wunderbar.

Hab jetzt aber auch gerade festgestellt, daß ich alles auf inline umstellen muß, da einige noch einigermaßen aktuelle Browser mit externen Dateien nichts anfangen können.