Version #1 2018 (16 KB) - Version #2 2024 (reduced to 14 KB)

52 SVG playingcards in one 14 KB¹ Custom Element <playing-card>️

No Frameworks   No Dependencies   No external SVG files!   All SVG is created by the (Autonomous) Custom Element - Github & Documentation


¹ raw SVG for 52 cards is 500 KB , <playing-card> GZipped is 14 KB

GZip sizes

13728  Bytes https://cardmeister.github.io/elements.cardmeister.min.js
60040  Bytes https://cardmeister.github.io/elements.cardmeister.full.js

Using <playing-card>:

    <head>
        <script src='elements.cardmeister.full.js'></script>
    </head>
    <body>
        <playing-card cid=As></playing-card>
        <playing-card suit=Hearts rank=10></playing-card>
        <playing-card suit=3 rank=Queen></playing-card>
    </body>


It is a card trick... How did I cheat to get the GZip size down to 14 KB ?

The full version is 60 KB GZipped. See the difference: index.html?full

60 KB for 12 different court images in the full version:

In the 14 KB version all courts use the Hearts suit image:

Saves app. 70% of SVG data


<playing-card attribute> configuration examples

click to see Element Attributes - Details at: GitHub <playing-card> attribute/property syntax

'play' an Ace card for some more advice

See the full version for attribute examples on click


Extending <IMG> : creating 52 'Customized Built-In Elements'

Creates less DOM nodes but  is=  notation must be the full (Customized) Element name in lowercase
* requires a polyfill in Safari

Update 2024: Customized Built-In Elements (not supported by APple/Safari) are no longer created

<img is=ten-of-hearts>
<img is=jack-of-hearts>
<img is=queen-of-hearts>
<img is=king-of-hearts>
<img is=ace-of-spades suitcolor=darkred>

<playing-card> is used in:

https://card-ts.github.io/Solitaire/ (click to open in new window, the IFrame version below has issues)

Custom Elements/Web Components for all modern Browsers : FlagMeister300+ SVG flags in one 25KB Custom Element/WebComponent  -  CardMeister52 SVG Playing Cards in one 16KB Custom Element/WebComponent  -  ChessMeisterSVG Chess pieces and Interactive Chessboard in one 9KB Custom Element/WebComponent  -  IconMeisterPick any of 5000+ SVG Icons in one 1KB Custom Element/WebComponent  -  Pie-Meister<pie-chart> and <progress-circle> in one 1KB Custom Element/WebComponent