Как кроссбраузерно отображать svg спрайты в html?

1
2
3
4
5
6
7
8
9

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M12 21.35l-8.5-8.44c-0.44-0.47-0.75-1.08-0.87-1.76c-.17-0.91.06-1.82.58-2.55c0.96-1.42 2.8-1.82 4.24-0.87c0.34 0.23 0.65 0.51 0.91 0.85c0.26-0.34 0.57-0.62 0.91-0.85c1.44-0.95 3.27-0.54 4.23 0.87c0.52 0.73 0.74 1.64 0.57 2.55c-0.12 0.67-0.43 1.29-0.87 1.76L12 21.35z"></path>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#icon-heart"></use>
</svg>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M12 21.35l-8.5-8.44c-0.44-0.47-0.75-1.08-0.87-1.76c-.17-0.91.06-1.82.58-2.55c0.96-1.42 2.8-1.82 4.24-0.87c0.34 0.23 0.65 0.51 0.91 0.85c0.26-0.34 0.57-0.62 0.91-0.85c1.44-0.95 3.27-0.54 4.23 0.87c0.52 0.73 0.74 1.64 0.57 2.55c-0.12 0.67-0.43 1.29-0.87 1.76L12 21.35z"></path>
  </symbol>
</svg>

<div class="icon icon-heart"></div>


.icon {
  width: 24px;
  height: 24px;
  background-image: url('path/to/sprite.svg');
  background-size: 24px;
  background-repeat: no-repeat;
}

.icon-heart {
  background-position: 0 0;
}

1
2
3
4
5

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="M12 21.35l-8.5-8.44c-0.44-0.47-0.75-1.08-0.87-1.76c-.17-0.91.06-1.82.58-2.55c0.96-1.42 2.8-1.82 4.24-0.87c0.34 0.23 0.65 0.51 0.91 0.85c0.26-0.34 0.57-0.62 0.91-0.85c1.44-0.95 3.27-0.54 4.23 0.87c0.52 0.73 0.74 1.64 0.57 2.55c-0.12 0.67-0.43 1.29-0.87 1.76L12 21.35z"></path>
  </symbol>
</svg>

1
2
3

<svg class="icon">
  <use xlink:href="#icon-heart"></use>
</svg>