svg-sprites

How to use SVG Sprites in HTML and CSS?

Demo - Click the link demo of svg-sprites.

Implementation

• First, lets create an SVG sprite with 2 images with g tag.

<g id="User" transform="translate(0.000000, 0.000000)">
    <path d="M24.4266275,20.7668931 C23.7027629,16.4391101 21.196012,12.8051509 17.7583786,10.9090909 C16.3106494,12.2981278 14.3721767,13.1267625 12.2280818,13.1267625 C10.1090048,13.1267625 8.17068719,12.2981278 6.69778497,10.9090909 C3.26015162,12.8063798 0.753452435,16.4391101 0.0295361119,20.7668931 C-0.177424871,22.0755672 0.727142302,23.2778033 1.99416386,23.438529 C5.19841755,23.8121305 8.63605089,24 12.2292707,24 C15.7961287,24 19.2588316,23.7860607 22.4643775,23.4124538 C23.7293573,23.3049632 24.6339297,22.0755939 24.4269894,20.7669198 L24.4266275,20.7668931 Z"></path>
    <path d="M17.9347826,5.72727273 C17.9347826,8.89025455 15.3797826,11.4545455 12.2282609,11.4545455 C9.07673913,11.4545455 6.52173913,8.89025455 6.52173913,5.72727273 C6.52173913,2.56429091 9.07673913,0 12.2282609,0 C15.3797826,0 17.9347826,2.56429091 17.9347826,5.72727273"></path>
</g>
<g id="Reload" transform="translate(24.000000, 0.000000)">
    <path d="M19.6254633,20.1843587 C17.3761248,22.3556448 14.4352145,23.4136763 11.4943618,23.4136763 C9.24502327,23.4136763 6.96759974,22.7732683 5.03596212,21.4935656 L5.26686476,23.7757429 C5.32430928,24.3878715 4.8636401,24.9445544 4.22835364,25 L4.11346459,25 C3.53677028,25 3.01751471,24.5542083 2.96007596,23.9975254 L2.47011647,18.987379 L2.47011647,18.7644888 C2.499401,18.625318 2.52756099,18.4861473 2.61429005,18.3469766 C2.78774816,18.0403556 3.13354561,17.8185731 3.50862759,17.7620141 L8.69887645,17.2890563 C9.33300952,17.2336051 9.90970384,17.678289 9.96714259,18.291531 C10.0245871,18.9036595 9.56391793,19.4603424 8.92863147,19.515788 L6.44838455,19.7386783 C9.99534295,22.0208556 14.8678332,21.6587891 18.0116823,18.6253125 C20.4333371,16.2876895 21.2982632,12.8639225 20.2891635,9.71838563 C20.0875454,9.13342321 20.4333371,8.49412854 21.0393275,8.32667832 C21.6453179,8.1320564 22.3075936,8.46584905 22.4810633,9.05081147 C23.7493294,13.0029819 22.6533968,17.2618846 19.6257632,20.18447 L19.6254633,20.1843587 Z M2.72889651,15.2579931 C1.69038538,12.0854571 2.58472293,8.68857789 5.00637771,6.35106628 C8.14878504,3.31770101 12.9933057,2.95557876 16.5696755,5.23770042 L14.0894285,5.4605907 C13.4552955,5.51604189 12.9934787,6.07271925 13.0509174,6.68484779 C13.1083619,7.26981021 13.5983157,7.68732241 14.2043061,7.68732241 L14.3191951,7.68732241 L19.509444,7.21436459 C20.0568422,7.15891341 20.4893629,6.74140678 20.5479551,6.24016947 L20.5479551,6.01727919 L20.0579956,1.00713285 C20.0005511,0.395004304 19.4238625,-0.0507873837 18.7897294,0.00465823582 C18.1555964,0.0601038554 17.6937796,0.616786782 17.7512183,1.22891533 L17.982121,3.51109266 C13.4833286,0.505839875 7.34268749,0.923379904 3.36320835,4.76471477 C0.335563187,7.68730014 -0.760444364,11.9462029 0.53717552,15.8983733 C0.6813491,16.3713311 1.14316591,16.6779521 1.6331254,16.6779521 C1.74801444,16.6779521 1.86402804,16.6496837 1.97891131,16.6225009 C2.5849017,16.4550618 2.93068762,15.8429221 2.72907528,15.2579875 L2.72889651,15.2579931 Z"></path>
</g>

• Generally, when using sprites we use CSS background property to point to the exact image. But, in SVG we have the capability to display the required image just with a pointer to id with the view tag.

<view id="User-View" viewBox="0 0 24 24" />
<view id="Reload-View" viewBox="24 0 24 24" />

Notice that the 4 values in viewBox attribute are x, y, width and height respectively.

• To use the image in the html file:

<img src="./index.svg#User-View" />

• Give the image width and height to your requirements:

img {
    width: 25px;
    height: 25px;
}

• Here is the full SVG file with different colored images:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>SVG Sprite</title>
    <desc></desc>
    <defs></defs>

    <view id="User-Grey-View" viewBox="0 0 25 25" />
    <view id="User-Brown-View" viewBox="0 25 25 25" />
    
    <view id="Reload-Grey-View" viewBox="25 0 25 25" />
    <view id="Reload-Brown-View" viewBox="25 25 25 25" />

    <g id="User-Grey" transform="translate(0.000000, 0.000000)" fill="#A9A9A9">
        <path d="M24.4266275,20.7668931 C23.7027629,16.4391101 21.196012,12.8051509 17.7583786,10.9090909 C16.3106494,12.2981278 14.3721767,13.1267625 12.2280818,13.1267625 C10.1090048,13.1267625 8.17068719,12.2981278 6.69778497,10.9090909 C3.26015162,12.8063798 0.753452435,16.4391101 0.0295361119,20.7668931 C-0.177424871,22.0755672 0.727142302,23.2778033 1.99416386,23.438529 C5.19841755,23.8121305 8.63605089,24 12.2292707,24 C15.7961287,24 19.2588316,23.7860607 22.4643775,23.4124538 C23.7293573,23.3049632 24.6339297,22.0755939 24.4269894,20.7669198 L24.4266275,20.7668931 Z"></path>
        <path d="M17.9347826,5.72727273 C17.9347826,8.89025455 15.3797826,11.4545455 12.2282609,11.4545455 C9.07673913,11.4545455 6.52173913,8.89025455 6.52173913,5.72727273 C6.52173913,2.56429091 9.07673913,0 12.2282609,0 C15.3797826,0 17.9347826,2.56429091 17.9347826,5.72727273"></path>
    </g>
    <g id="User-Brown" transform="translate(0.000000, 25.000000)" fill="#9F845B">
        <path d="M24.4266275,20.7668931 C23.7027629,16.4391101 21.196012,12.8051509 17.7583786,10.9090909 C16.3106494,12.2981278 14.3721767,13.1267625 12.2280818,13.1267625 C10.1090048,13.1267625 8.17068719,12.2981278 6.69778497,10.9090909 C3.26015162,12.8063798 0.753452435,16.4391101 0.0295361119,20.7668931 C-0.177424871,22.0755672 0.727142302,23.2778033 1.99416386,23.438529 C5.19841755,23.8121305 8.63605089,24 12.2292707,24 C15.7961287,24 19.2588316,23.7860607 22.4643775,23.4124538 C23.7293573,23.3049632 24.6339297,22.0755939 24.4269894,20.7669198 L24.4266275,20.7668931 Z"></path>
        <path d="M17.9347826,5.72727273 C17.9347826,8.89025455 15.3797826,11.4545455 12.2282609,11.4545455 C9.07673913,11.4545455 6.52173913,8.89025455 6.52173913,5.72727273 C6.52173913,2.56429091 9.07673913,0 12.2282609,0 C15.3797826,0 17.9347826,2.56429091 17.9347826,5.72727273"></path>
    </g>
    <g id="Reload-Grey" transform="translate(25.000000, 0.000000)" fill="#A9A9A9">
        <path d="M19.6254633,20.1843587 C17.3761248,22.3556448 14.4352145,23.4136763 11.4943618,23.4136763 C9.24502327,23.4136763 6.96759974,22.7732683 5.03596212,21.4935656 L5.26686476,23.7757429 C5.32430928,24.3878715 4.8636401,24.9445544 4.22835364,25 L4.11346459,25 C3.53677028,25 3.01751471,24.5542083 2.96007596,23.9975254 L2.47011647,18.987379 L2.47011647,18.7644888 C2.499401,18.625318 2.52756099,18.4861473 2.61429005,18.3469766 C2.78774816,18.0403556 3.13354561,17.8185731 3.50862759,17.7620141 L8.69887645,17.2890563 C9.33300952,17.2336051 9.90970384,17.678289 9.96714259,18.291531 C10.0245871,18.9036595 9.56391793,19.4603424 8.92863147,19.515788 L6.44838455,19.7386783 C9.99534295,22.0208556 14.8678332,21.6587891 18.0116823,18.6253125 C20.4333371,16.2876895 21.2982632,12.8639225 20.2891635,9.71838563 C20.0875454,9.13342321 20.4333371,8.49412854 21.0393275,8.32667832 C21.6453179,8.1320564 22.3075936,8.46584905 22.4810633,9.05081147 C23.7493294,13.0029819 22.6533968,17.2618846 19.6257632,20.18447 L19.6254633,20.1843587 Z M2.72889651,15.2579931 C1.69038538,12.0854571 2.58472293,8.68857789 5.00637771,6.35106628 C8.14878504,3.31770101 12.9933057,2.95557876 16.5696755,5.23770042 L14.0894285,5.4605907 C13.4552955,5.51604189 12.9934787,6.07271925 13.0509174,6.68484779 C13.1083619,7.26981021 13.5983157,7.68732241 14.2043061,7.68732241 L14.3191951,7.68732241 L19.509444,7.21436459 C20.0568422,7.15891341 20.4893629,6.74140678 20.5479551,6.24016947 L20.5479551,6.01727919 L20.0579956,1.00713285 C20.0005511,0.395004304 19.4238625,-0.0507873837 18.7897294,0.00465823582 C18.1555964,0.0601038554 17.6937796,0.616786782 17.7512183,1.22891533 L17.982121,3.51109266 C13.4833286,0.505839875 7.34268749,0.923379904 3.36320835,4.76471477 C0.335563187,7.68730014 -0.760444364,11.9462029 0.53717552,15.8983733 C0.6813491,16.3713311 1.14316591,16.6779521 1.6331254,16.6779521 C1.74801444,16.6779521 1.86402804,16.6496837 1.97891131,16.6225009 C2.5849017,16.4550618 2.93068762,15.8429221 2.72907528,15.2579875 L2.72889651,15.2579931 Z"></path>
    </g>
    <g id="Reload-Brown" transform="translate(25.000000, 25.000000)" fill="#9F845B">
        <path d="M19.6254633,20.1843587 C17.3761248,22.3556448 14.4352145,23.4136763 11.4943618,23.4136763 C9.24502327,23.4136763 6.96759974,22.7732683 5.03596212,21.4935656 L5.26686476,23.7757429 C5.32430928,24.3878715 4.8636401,24.9445544 4.22835364,25 L4.11346459,25 C3.53677028,25 3.01751471,24.5542083 2.96007596,23.9975254 L2.47011647,18.987379 L2.47011647,18.7644888 C2.499401,18.625318 2.52756099,18.4861473 2.61429005,18.3469766 C2.78774816,18.0403556 3.13354561,17.8185731 3.50862759,17.7620141 L8.69887645,17.2890563 C9.33300952,17.2336051 9.90970384,17.678289 9.96714259,18.291531 C10.0245871,18.9036595 9.56391793,19.4603424 8.92863147,19.515788 L6.44838455,19.7386783 C9.99534295,22.0208556 14.8678332,21.6587891 18.0116823,18.6253125 C20.4333371,16.2876895 21.2982632,12.8639225 20.2891635,9.71838563 C20.0875454,9.13342321 20.4333371,8.49412854 21.0393275,8.32667832 C21.6453179,8.1320564 22.3075936,8.46584905 22.4810633,9.05081147 C23.7493294,13.0029819 22.6533968,17.2618846 19.6257632,20.18447 L19.6254633,20.1843587 Z M2.72889651,15.2579931 C1.69038538,12.0854571 2.58472293,8.68857789 5.00637771,6.35106628 C8.14878504,3.31770101 12.9933057,2.95557876 16.5696755,5.23770042 L14.0894285,5.4605907 C13.4552955,5.51604189 12.9934787,6.07271925 13.0509174,6.68484779 C13.1083619,7.26981021 13.5983157,7.68732241 14.2043061,7.68732241 L14.3191951,7.68732241 L19.509444,7.21436459 C20.0568422,7.15891341 20.4893629,6.74140678 20.5479551,6.24016947 L20.5479551,6.01727919 L20.0579956,1.00713285 C20.0005511,0.395004304 19.4238625,-0.0507873837 18.7897294,0.00465823582 C18.1555964,0.0601038554 17.6937796,0.616786782 17.7512183,1.22891533 L17.982121,3.51109266 C13.4833286,0.505839875 7.34268749,0.923379904 3.36320835,4.76471477 C0.335563187,7.68730014 -0.760444364,11.9462029 0.53717552,15.8983733 C0.6813491,16.3713311 1.14316591,16.6779521 1.6331254,16.6779521 C1.74801444,16.6779521 1.86402804,16.6496837 1.97891131,16.6225009 C2.5849017,16.4550618 2.93068762,15.8429221 2.72907528,15.2579875 L2.72889651,15.2579931 Z"></path>
    </g>
</svg>

• To use another image from the sprite:

<img src="./index.svg#Reload-Brown-View" />

Other Resources

https://css-tricks.com/svg-fragment-identifiers-work/