CODEWITHSUNDEEP
csssvg
Michel Daviot
Michel Daviot

Reputation: 206

Making sprites out of an arbitrary SVG file

I have found a gorgeous, free SVG file with all 52 poker cards.

I'd like to use it in a web based game to display the sprites of the cards.

Can I "split" this file into icons using css ?

I've tried following this tutorial but it requires to edit the SVG file to define the elements inside a def tag, which I would prefer to avoid (SVG is huge : 2MB).

I've also tried using the viewbox/viewport attributes with no success.

Note : I've also found a cards font but the quality of the rendering is so much worse ...

Upvotes: 0

Views: 55

Answers (1)

Asons
Asons

Reputation: 87201

Here is a simple suggestion where background-position is used to move the wanted area of an image into view

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>

Upvotes: 1

Related Questions