0

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

mplungjan
  • 169,008
  • 28
  • 173
  • 236
CoreTM
  • 195
  • 7
  • Please update the snippet with relevant CSS – mplungjan Nov 03 '21 at 10:56
  • hi @mplungjan. even I updated the CSS it's not working also cause the background is not existing in this file – CoreTM Nov 03 '21 at 11:00
  • using png is working fine by the way. However, when using SVG file it's not working at all my icons is showing in super small size like a dotted. Also, question by using a SVG file can I also control the fill color of the SVG inside that file? – CoreTM Nov 03 '21 at 11:03
  • 1
    I think you can use background-size Css property regardless of png or SVG graphics. Also you can set the background color off SVGs by Css as: .icon { fill: black; } – ihpar Nov 03 '21 at 11:07
  • hi, ihpar thanks it's working using background size. Also 1 question by using an SVG file can I also control the fill color of the icons? – CoreTM Nov 03 '21 at 11:21
  • Youre adding styles to the class `_icon` but youre using the class `_ico` in your HTML. – Fabian S. Nov 03 '21 at 12:51
  • You can't change the fill property of a svg background image. Common workarounds: 1. colorize your element by a filter. like `filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);` 2. use the similar `mask-image` property: you're actually setting a background-color and mask it by your svg shape (won't work for input elements) ... and many more. See also these [answers](https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima#answer-46904983) – herrstrietzel Nov 03 '21 at 20:15

0 Answers0