What's the proper way to implement a SVG image file in CSS?

StackOverflow https://stackoverflow.com/questions/14666424

Question

I have an SVG file with multiple SVGs with unique IDs. 

<g id="tags">
...
</g>
<g id="tags2">
...
</g>

So far I have tried to implement this two ways with no luck. I tried setting it up with a background position.

.icon {
  background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon.tags-icon {
  background-position: 0px 0px;
  width: 12px;
  height: 12px;
}

And I tried just appending the ID of the SVG at the end, which didn't seem to work either.

.icon.tags-icon {
  background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg#tags);
  background-repeat: no-repeat;
  background-size: 80%;
}

I've been searching for hours, can't seem to find the right approach to this...

Was it helpful?

Solution

You could use svg fragment identifiers to show different areas assuming the different <g> elements are at different positions e.g.

<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px;        height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>  
</body>
</html>

The above example shows embed but the idea applies equally well to background images.

Another way would be SVG Stacks which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top