Reputation: 117
I was wondering if there's a way to access SVG via CSS when using them like:
.logo {
...
background-image: url("../VectorImages/logo.svg");
}
I found a few scripts helping to convert svgs to inline SVG, which make them accessible for CSS. Tried it and it's working for img-Tags, but none of these solutions are working when using SVG as a div's background-image.
I'm trying to change the color of the SVG, so what I want to do is
svg path { fill: #000; }
Upvotes: 0
Views: 1671
Reputation: 4936
If you are using SCSS – I've made a mixin to handle SVG encoding
Pen: http://codepen.io/jakob-e/pen/doMoML/
SCSS: http://codepen.io/jakob-e/pen/GjgXmK.scss
$color-1: red;
$color-2: green;
$svg-1: '<svg viewBox="0 0 2 2"><circle fill="#{$color-1}" cx="1" cy="1" r="1"/></svg>';
$svg-2: '<svg viewBox="0 0 2 2"><circle fill="#{$color-2}" cx="1" cy="1" r="1"/></svg>';
.class-1 { @include background-svg($svg-1); }
.class-2 { @include background-svg($svg-2); }
Upvotes: 2
Reputation: 1722
You can use data URI
to import the SVG into the CSS.
HTML
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>
CSS
.logo {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
Using this method will allow you to use fill
to color the SVG while using it as a background
.
Note: For more information on implementing SVG using
data URI
into CSS, see this article.
Upvotes: 1