任意のSVGファイルからスプライトを作成する

Question

私は、52枚のポーカーカードすべてで豪華な、無料のSVGファイルを見つけました。

• Project
• Image
• Raw content of the SVG

私はカードのスプライトを表示するには、Webベースのゲームでそれを使用したいと思います。

このファイルをCSSでアイコンに分割することはできますか？

私はthis tutorialに従ってみましたが、defタグ内の要素を定義するためにSVGファイルを編集する必要があります（SVGは巨大です：2MB）。

私はまた、ビューボックス/ビューポート属性を使用してみましたが、成功しませんでした。

注：私もcards fontを見つけたが、レンダリングの品質はそんなに悪いです...

Answer 1

ここではbackground-positionを視野に、画像の希望エリアを移動するために使用される単純な提案です

div { 
 
    display: inline-block; 
 
    border: 1px solid; 
 
    height: 355px; 
 
    width: 260px; 
 
    background-image: url(https://cdn.rawgit.com/tyrcho/fa8bec7cc670515cd250a9dcfad5898f/raw/2d6bb400ab12bf785a29ba06202cbec789617801/Color_52_Faces_v.2.0.svg); 
 
} 
 
.div1 { 
 
    background-position: -490px -1155px; 
 
} 
 
.div2 { 
 
    background-position: -490px -1530px; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div>