6.0.1 • Public • Published

    Forked version of Responsive Playing Cards. Cards have been base64 encoded and are exported as svg - and responsiveness disabled. Joker added as well.

    Base64 encoding makes the the cards larger (in terms of kb), but makes them more suitable for use in Safari, that otherwise tends to 'flash' if an element with an svg is (re)mounted in the DOM.

    Responsive Playing Cards

    tldr; Responsive SVG playing cards. Most cards ~2K, picture cards are ~65k. With gzip, they’re about half that. When rendered <= 75px wide, they switch to a simpler layout for readability.

    LGPL licensed.


    This is a deck of SVG playing cards which was created for a client project in January 2015. The project is targeted specifically at Chromium, so the cards may not work on other platforms (pull requests welcomed).

    The cards are based on the deck produced by Chris Aguilar, hosted over at Google Code, with the exception of the Ace of Spades, which was taken from Byron Knoll’s public domain cards also at Google Code.

    What do you get?

    Each card has been hand-optimized to reduce the file size as far as possible, by re-using and transforming paths. This takes the size of a normal card down from ~6.5k to about ~2.5k (~1.7k minified, 800b minified + zipped). Picture cards are obviously more complex, at ~90k (~65k minified, ~30k minified + zipped).

    200px 160px 120px 80px 40px 30px 20px
    Three of Diamonds, 200px wide Three of Diamonds, 160px wide Three of Diamonds, 120px wide Three of Diamonds, 80px wide Three of Diamonds, 60px wide Three of Diamonds, 40px wide Three of Diamonds, 30px wide

    The cards also have embedded media queries, which display a simpler layout if the card is scaled below 75px wide.


    The cards are specified in SVG Tiny 1.2, and have been tested on Chrome 40, Firefox 35, Safari 8, Mobile Safari 8, Opera 11, Opera Classic for Android, Windows Phone 8.1, Internet Explorer 11 (Windows 7) and Internet Explorer 11 (Windows RT 8.1).


    The “mini” versions of the cards won’t render on Firefox for Android, Mobile Safari 6, and Android Browser 4.1, because they don’t support media queries inside SVG. But the big cards are displayed instead, so at least it fails nicely!


    The original cards were created by Chris Aguilar. The Ace of Spades was by Byron Knoll.
    They were optimized by Mike Hall with help from Warren Lockhart.


    LGPL 3.0


    npm i @younestouati/playing-cards-standard-deck

    DownloadsWeekly Downloads






    Unpacked Size

    2.59 MB

    Total Files


    Last publish


    • younestouati