CODEWITHSUNDEEP
csssvgsprite
Mukesh
Mukesh

Reputation: 858

How to use SVG sprite in CSS

I am trying SVG sprite in my project, but its not working as expected, The sprite contains three images as shown below:

enter image description here

Original Image

When i call in CSS its showing zoomed in all three images, not particular image whose background-position defined, seems i have to define something additional too, gone through some articles they have defined path, is it required if yes then why and how i can calculate these path, please help

Below what i have tried:

<!doctype html>
<html>
    <head>
        <title>SVG POC</title>
        <style type="text/css">
            a {
                display: inline-block;
            }
            .ico {
                background: transparent url('icons.svg') 0 0 no-repeat; 
                display: inline-block;
            }
            .ico-hotel {
                background-position: 0 0;
                height: 20px;
                width: 20px;
            }
        </style>
    </head>
    <body>          
        <a href="#"><span class="ico ico-hotel"></span></a>     
    </body>
</html>

Upvotes: 1

Views: 1819

Answers (1)

airnan
airnan

Reputation: 635

your paths are already defined in the svg file

set the width and height in the svg and it should work:

add width="86px" height="20px"

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="86px" height="20px"
     viewBox="0 0 389.4 91.3" enable-background="new 0 0 389.4 91.3" xml:space="preserve">

Upvotes: 1

Related Questions