CODEWITHSUNDEEP
jquerycsssvgsass
Jmie
Jmie

Reputation: 117

Modify SVG with CSS as background-image

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

Answers (2)

Jakob E
Jakob E

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

Matthew Beckman
Matthew Beckman

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

Related Questions