SVG

Fri, 15 Dec 2023 09:35:00 +0000

Dynamic fills/strokes on svg background images

Copy

@function encodeColor($string) {
  @if type-of($string) == 'color' {
    $hex: str-slice(ie-hex-str($string), 4);
    $string: unquote("#{$hex}");
  }
  $string: '%23' + $string;
  @return $string;
}
@mixin logo($color) {
  background-image: url('data:image/svg+xml;utf8,<svg width="22.385792mm" height="4.2337036mm" fill="#{encodeColor($color)}" viewBox="0 0 84.607716 16.0014" xmlns="http://www.w3.org/2000/svg"><path d="M 0,2 A 2,2 0 0 1 2,0 h 8 a 2,2 0 0 1 2,2 v 2 h 2 a 2,2 0 0 1 2,2 v 8 a 2,2 0 0 1 -2,2 H 6 A 2,2 0 0 1 4,14 V 12 H 2 A 2,2 0 0 1 0,10 Z M 12,4 H 5 A 1,1 0 0 0 4,5 v 7 h 7 a 1,1 0 0 0 1,-1 z" /><text style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:1.25;font-family:Roboto;stroke-width:1.00001" x="19.771776" y="15.84515"><tspan x="19.771776" y="15.84515" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;font-family:Roboto;stroke-width:1.00001">Logo</tspan></text></svg>'); 
}
.branding {
  @include logo(#f00);
  width: 22.385792mm;
  height: 4.2337036mm;
}

Svg on ARI Systems

SVG

Dynamic fills/strokes on svg background images