It's actually possible for those who can use preprocessors in production, by "inlining" background SVG, and bit of SASS mixins
, which "slice" whole svg
gibberish, to get access to parts you want to manipulate via SASS variables
.
In your original scenario you have an element
<div class="element1"></div>
,
so you need a mixin/function
which will inline SVG for you. Let's say you want to control of the fill
, so:
@mixin inline-svg($color, $svg-content) {
$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
$end: '</svg>';
background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}
where $svg-content
variable is your <svg>
stuff excluding <style>
element (which you want to access from inside of the mixin
) and wrapping svg
tag,, ie:
$svg-content = "<path .... />"
This just need to be included with values passed inside:
@include inline-svg(salmon, $svg-content);
To sum whole thing up, this is an example SASS code:
$svg-content = "<path .... />"
@mixin inline-svg($color, $svg-content) {
$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
$end: '</svg>';
background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}
.element1 {
@include inline-svg(rgba(0,0,0,0.6), $svg-content);
}
I think possibilities here are quite big (there are also limitations here to that approach). I actually pass a SASS map
to my mixin
with css
styles defined as key
, value
pair, to inject whole bunch of css
styles to the <style>
part of svg
.
So it's technically possible, but require more compexity, but once you get this done, you'll get benefits of reusing this mixin
throughout your project(s), which is cool .