aus Kevin Powell Kurs -> svg Tutorials von Josh anschauen!

svg default size: 300 x 150 px - wenn nicht anders angegeben

svg logo inline in html einbinden:

<svg class="logo" viewBox = "0 0 192 24" <!-- viewBox hier rein --> />
    <use xlink: href="#logo" <!-- id von unten --> ></use>
</svg>

Am Ende des Bodys (oder irgendwo extern):

<svg width="0" height="0" class="hidden">
  <symbol id="logo" fill="none" <!-- viewBox="0 0 192 24" hier raus --> xmlns="...">
    <path d="..." fill="#eee"></path>
  </symbol>
  <symbol id="..." viewBox="...">
  </symbol>
</svg>

1. inline: symbol fill="none" raus, path fill raus, css: .logo: {fill: $logo-fill-header;}

2. nur im CSS als background-image URL-encoded (position responsive schwierig):

.card {
  $image-color: map.get($default, "accent", "400")};
  background-image: url("data:image/svg+xml ...") ...
                    fill='#{$image-color}' ...);
  background-size: ...
}