► Version #1 2018 (16 KB) ► Version #2 2024 (reduced to 14 KB) ► Version #3 2025 (13 KB)

52 SVG playingcards in one 13 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 13 KB

GZip sizes

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 13 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 13 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)