1
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="crop" viewBox="0 0 96 96"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(35.686275%,35.686275%,35.686275%);fill-opacity:1;" d="M 20 8 L 20 20 L 8 20 L 8 32 L 20 32 L 20 76 L 64 76 L 64 88 L 76 88 L 76 76 L 88 76 L 88 64 L 37.75 64 L 64 37.75 L 64 60 L 76 60 L 76 25.75 L 86.875 14.875 L 81.125 9.125 L 70.25 20 L 36 20 L 36 32 L 58.25 32 L 32 58.25 L 32 8 Z "/></symbol><symbol id="delete" viewBox="0 0 96 96"><path d="M 36.125 -0.125 C 34.273438 -0.125 32.75 1.398438 32.75 3.25 L 32.75 14.75 C 21.882813 15.980469 14.375 18.484375 14.375 21.375 L 14.375 26.875 C 14.375 28.003906 15.578125 29.03125 17.625 30 C 22.984375 32.515625 34.570313 34.25 48 34.25 C 61.441406 34.25 73.007813 32.515625 78.375 30 C 80.410156 29.03125 81.625 28.003906 81.625 26.875 L 81.625 21.375 C 81.625 18.382813 73.519531 15.800781 62 14.625 L 62 3.25 C 62 1.394531 60.480469 -0.125 58.625 -0.125 Z M 39.5 6 L 55.375 6 C 55.710938 6 55.875 7.613281 55.875 9.625 L 55.875 14.125 C 53.328125 13.992188 50.742188 13.875 48 13.875 C 45.164063 13.875 42.378906 13.976563 39.75 14.125 L 38.875 14.25 L 38.875 9.625 C 38.875 7.613281 39.167969 6 39.5 6 Z M 19.125 38.125 C 18.765625 38.496094 18.585938 38.851563 18.5 39.25 L 18.5 39.5 C 18.5 39.554688 18.492188 39.699219 18.5 39.75 L 20.75 86.75 C 20.953125 90.4375 25.214844 96 48 96 C 70.785156 96 75.050781 90.4375 75.25 86.75 L 77.5 39.75 C 77.503906 39.695313 77.5 39.554688 77.5 39.5 L 77.5 39.25 C 77.4375 38.851563 77.238281 38.496094 76.875 38.125 C 73.941406 41.105469 62.105469 41.5 48 41.5 C 33.894531 41.5 22.074219 41.105469 19.125 38.125 Z "/></symbol><symbol id="default" viewBox="0 0 96 96"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(35.686275%,35.686275%,35.686275%);fill-opacity:1;" d="M 88 40 L 60 36 L 48 8 L 36 36 L 8 40 L 28 60 L 24 88.070313 L 48 76 L 72 88 L 68 60 Z "/></symbol></svg>

I have there buttons: default, delete, crop. In html I can get it easily

 <svg class="icon-small-new icon-grey">
        <use xlink:href="/i/svg/icons.svg#future"></use>
    </svg>

    <svg class="icon-small-new icon-grey">
        <use xlink:href="i/svg/icons-for-images.svg#crop"></use>
    </svg>

     <svg class="icon-small-new icon-grey">
        <use xlink:href="i/svg/icons-for-images.svg#delete"></use>
    </svg>

     <svg class="icon-small-new icon-grey">
        <use xlink:href="i/svg/icons-for-images.svg#default"></use>
    </svg>

But I need use this buttons like background.

I have tried like this:

.crop-image {
    background: url('/i/svg/icons-for-images.svg#crop') 26px 26px;
    background-size: cover;
    width: 26px;
    height: 26px;
} 

.delete-image {
    background: url('/i/svg/icons-for-images.svg#delete') 0 96px;
    background-size: cover;
    width: 26px;
    height: 26px;
}

.default-image {
    background: url('/i/svg/icons-for-images.svg#default') 26px 26px;
    width: 26px;
    height: 26px;
}

I have tried put in svg file.

 <use style="fill:#666" xlink:href="#crop" />

But in CSS I get only one picture

if I use one more

 <use style="fill:#666" xlink:href="#delete" />

I get one picture crop and delete on each other. Is it possible directly get from css each image? With any background position? Or I need each image put in external file?

But with out success.

Alex Sorokoletov
  • 3,102
  • 2
  • 30
  • 52
MOtoroller
  • 59
  • 4
  • Check the path correctly in CSS file. If your CSS file is in other directory you need to use it like background: url('../i/svg/icons-for-images.svg#default') 26px 26px; For more info on paths, you can read - https://www.w3schools.com/html/html_filepaths.asp – Simrandeep Singh Mar 18 '17 at 03:22
  • You can do it, but then your path should be relative to the CSS file. chrome is known to have a bug about it and makes it relative to the html page. So to support all browsers, you need to set it to absolute paths. – Kaiido Mar 18 '17 at 03:56

1 Answers1

0

It is not possible for now, to use SVG sprites as background images. A single way how you can use svg sprites, it is inline in HTML, what you mentioned before.

P.S. Please keep in mind, that inline <svg> <use>... in HTML is not working in IE. You need to use this small plugin for fixing that: https://github.com/jonathantneal/svg4everybody

Victor Leontyev
  • 8,488
  • 2
  • 16
  • 36