CODEWITHSUNDEEP
htmlcsscss-sprites
CoreTM
CoreTM

Reputation: 305

Is CSS Sprite compatible to SVG

I've tried using svg on my background. However when I'm using an SVG file it's not working fine all Icons is showing and it's too small. My goal is like on the png file type by using background-position I can control the position of the image that I converted to CSS Sprite. Can anyone tell me how to do it using svg file? Also I'm asking if it's possible to change the fill color of the svg icon that I converted into CSS Sprite?

Also please see image below when I'm trying to use the svg file. All icons are showing and it's super small. Are CSS Sprite and SVG compatible?

.icon-one ._icon {
    width: 24px;
    height: 24px;
    margin-right: 2px;
    background: url(../media/icons/toolbar/toolbar-icon-svg-type-01.svg) no-repeat 0 0;
    background-position: 0 0;
}
<div class="icon-one">
  <div class="_ico">
</div>

<div class="icon-two">
  <div class="_ico">
</div>

<div class="icon-three">
  <div class="_ico">
</div>
SVG Icons

enter image description here

Upvotes: 0

Views: 115

Answers (0)

Related Questions