CODEWITHSUNDEEP
htmlcsssvgsprite
Oleh Vdovenko
Oleh Vdovenko

Reputation: 439

Not working SVG symbol sprite as background

I have this page layout and css http://codepen.io/anon/pen/QjRBrO?editors=110

SVG icon from sprite, inserted with use tag works well:

    <svg class="social__item">
      <use xlink:href="images/sprite.svg#vk"></use>
    </svg>

But it not working when I'm trying to set sprite park as background:

    .social__item_vk {
      background: #ccc url(images/sprite.svg#vk) no-repeat;
    }

Here is my svg sprite: http://controlsk.ru/test/images/sprite.svg

Upvotes: 2

Views: 492

Answers (1)

Oleksa O.
Oleksa O.

Reputation: 905

There are at least two known modes for using sprites in svg files: <view> and <symbol>. See below their usage.

  1. <view> mode, which is good for using in css (backgrounds, filters etc.).
    svg file structure example:

     <view id="icon--sidebar" viewBox="0 0 50 50" />
 <svg viewBox="-10.67 -10.67 533.33 533.33" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
     <path d="M512 0v512H0V0h512zM40.421 471.579h431.158V40.421H40.421v431.158zM67.368 67.368h161.685v377.264H67.368V67.368zm377.264 161.685H327.868l49.395-67.368h-53.895L256 256l67.368 94.315h53.895l-49.395-67.368h116.764v-53.894z" />
 </svg>

 <view id="icon--text" viewBox="50 0 34 34" />
 <svg viewBox="-1 -1 34 34" width="34" height="34" x="50" xmlns="http://www.w3.org/2000/svg">
     <path d="M24 14V6s0-4-4-4h-8C8 2 8 6 8 6v8H0v2h8v14h4v-8h8v8h4V16h8v-2h-8zm-4 4h-8v-2h8v2zm0-4h-8V6h8v8z" />
 </svg>

css usage, where the string next to .svg file extension and "#" is an ID, associated with desired icon in sprite:

.item {
    background: #ccc url(images/sprite.svg#icon--sidebar) no-repeat;
}

  1. <symbol> mode, this one can be used in HTML markup to call necessary icon from within.
    svg file structure example:

     <symbol viewBox="-10.67 -10.67 533.33 533.33" id="icon--sidebar" xmlns="http://www.w3.org/2000/svg">
     <path d="M512 0v512H0V0h512zM40.421 471.579h431.158V40.421H40.421v431.158zM67.368 67.368h161.685v377.264H67.368V67.368zm377.264 161.685H327.868l49.395-67.368h-53.895L256 256l67.368 94.315h53.895l-49.395-67.368h116.764v-53.894z" />
 </symbol>

 <symbol viewBox="-1 -1 34 34" id="icon--text" xmlns="http://www.w3.org/2000/svg">
     <path d="M24 14V6s0-4-4-4h-8C8 2 8 6 8 6v8H0v2h8v14h4v-8h8v8h4V16h8v-2h-8zm-4 4h-8v-2h8v2zm0-4h-8V6h8v8z"/>
 </symbol>

html usage:

<svg>
   <use xlink:href="images/sprite.svg#icon--sidebar"></use>
</svg>

Upvotes: 2

Related Questions