svg doppelt nutzen

Im CSS

<style>

.svg-fill-blue .svgfill{

fill:blue;

}

.svg-fill-green .svgfill{

fill:green ;

}

</style>

HTML, an dieser Stelle sollen die Grafiken auftauchen

<div id="pos1">

<svg class="svg-fill-blue" viewBox="0 0 100 100" width="100" height="100"><use xlink:href="#logo"/></svg>

</div>

<div id="pos2">

<svg class="svg-fill-green" viewBox="0 0 100 100" width="50" height="50"><use xlink:href="#logo"/></svg>

</div>

Irgendwo im Body oder Footer der HTML Struktur, das eigentliche Logo. Wichtig dabei, es darf die Anweisung >>fill<< nicht auftauchen, an dessen Stelle einfach eine CSS Klasse setzen

<div class="hidden-svg">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
 <symbol id="logo">
  <g>
   <polygon class="svgfill" points="38.486,4.999 53.688,4.999 68.808,20.534 53.688,35.508 38.486,35.508 53.688,20.534 "/>
  </g>
</symbol>
</svg>
</div>