52 SVG playingcards in one 16 KB¹ Custom Element <card-t>️

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 , <card-t> GZipped is 16 KB

Using <card-t>:

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


It is a card-trick... How did I cheat to get the GZip size down to 16 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 16 KB version all courts use the Hearts suit image:

Saves app. 70% of SVG data


<card-t attribute> configuration examples

click to see Element Attributes - Details at: GitHub <card-t> 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

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

<card-t> is used in:

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


``` Code test ```
Published: 2020-08-06 17:13