SVG playing cards for the web.
All you need is the playing-cards.min.css file, all of the SVG's are included in the file as data-uri's. The SVG's are optimised with SVGO (via grunt-svgmin) before being compiled into the css. The file weighs in at approx 1.2MB, which is pretty good for a full deck of cards.
To show a card:
<!-- Ace of Spades -->
<span class="pcard-as"></span>
<!-- Jack of Clubs -->
<span class="pcard-jc"></span>
<!-- 3 of Diamonds -->
<span class="pcard-3d"></span>
<!-- 10 of hearts -->
<span class="pcard-10h"></span>
<!-- card back -->
<span class="pcard-back"></span>
It doesn't have to be a span, it can be a div or probably any other sensible choice of element.
Clone the repo and run npm install to install the dependencies.
grunt will do a build and grunt watch will monitor the LESS and SVG files for changes and do a build when changes are made.
The cards come from this pack by Byron Knoll.
I swapped out the Jack, Queen and King images as they made the filesize too huge, and used the ones from here by Chris Aguilar.