2018-06-26

SVG Vector Playing Cards

I decided to make some SVG playing cards, well, for fun. Scalable Vector Graphics is excellent for such things and works with all major browsers.

Chris Aguilar's
Queen of Spades
But first I googled, and found someone had already done it! In fact quite a few people have - with perhaps one of the best examples done by Chris Aguilar (here). There is even a rather good set of Javascript functions which work with his cards (here). Wikipedia also have an impressive set of SVG playing cards of various styles (here). People do like their playing cards, don't they!

Well, to be frank, I was almost put off. Chris Aguilar has done an excellent job, I am impressed. Well, everyone doing this has done a stunning job to be honest. But that did not quite stop me in my tracks (those that know me will not be surprised). It would be a fun exercise to do this, but really only if I can do a better (or at least different) job in at least some aspect. To be fair, that was going to be hard. From an artistic point of view, Chris Aguilar has done an excellent job as had others, and I am not really an artist, so I concentrated on the technical aspects mostly. Even so, this turned in to a week long project and a lot of work just for a bit of fun...

This is what I came up with - enjoy...

How are things better and/or different?

Licence

One of the simplest improvements I can make is releasing my cards under a completely open Creative Commons CC0 Public Domain licence, not even requiring attribution. This makes them much easier to use. Whilst I'd like credit, obviously, and it would be appreciated if the link on the Ace of Spades was left intact, that is not a requirement. Do what you like with them.

Compact SVG

The first thing I noticed was that Chris used inkscape. This is an excellent choice, and it is pretty much the editor for SVG. It also does a good job tracing scanned images. However SVG has a lot of bloat. Making a ten of clubs resulted in a file that was 29k. One I picked on wikipedia was 33k. By making the SVG myself, not using inkscape I was able to make use of symbol objects, so only drawing the club once, then using it 12 times for example. My SVG is probably not quite as compact as I would like, but my ten of clubs is only 1.7k, so much leaner.

My 10 of Clubs
Hand crafted paths

The other thing I could do to save space was to hand craft some of the SVG, making the pips (suit symbols) and digits/letters (value symbols) from scratch. The actual shape of these has varied over time, and this allowed me to add my own subtle variation on a theme. It ensured the pips were symmetric and took less space. I am quite pleased with the result.

Separate files

One slightly odd thing about Chris's work is that he has made one large SVG image for the whole deck. I decided to make separate files for each card and a zip of them per deck. I am not sure why he did that to be honest, as he says, you can export them from the SVG he has made, but that is a tedious task, 54 times, so seems unnecessary. Wikipedia has separate files.

Court cards

The court cards are an issue. All the rest can easily be made and done so programatically, but the court cards are art! I am not an artist even if I did take O-Level art. So I had basically three choices.
  • I could use Chris's court cards, or someone else's. This is somewhat admitting defeat, and obviously I would credit him, and it would limit the licence by which I could publish.
  • I could design and draw my own - except, as I say, I am not an artist.
  • I could scan / trace / copy / draw from some actual court cards.
Antique (c.1870) Goodall & Son piquet deck
One possible issue here is one of copyright. Chris has copyright in the work he has done. Every time someone makes a design, or photograph or scan, they create a new copyright. Notably he says he has used very old designs that are out of copyright, but I noted different card manufacturers seem to have subtly different court cards and his look identical to Bicycle playing cards, but he may well have found an out of copyright original from which to make his design. My solution was to obtain some actual antique playing cards (Goodall & Son, c. 1870), so old they do not even have numbers on the cards (you have to count the pips!) but they have nice court cards and they are too old to be in copyright any more. They are thick board, square corners, badly aligned printing, and this was a Piquet pack (so no 2 to 6 cards), but the court cards were fine.

Trace of Goodall & Son
Ace of Spades
(dates to 1867-97)
I could have just used inkscape image trace, but that does not fit with the neat and compact SVGs I had done so far, and the originals are not that good, so I used inkscape to carefully manually trace the court cards creating my own new designs. Time consuming, and like most artistic projects I find you can spend forever on the fine detail. In fact, I think I have found a bigger time-suck than even 3D printing - it took over three days solidly working on these, and even then I went back to tweak a couple of cards once I got reasonably good at it.

What really bugged me is that the designs should be symmetric, in theory, but these cards are not only badly aligned print of each colour but badly drawn in the first place, so I had to be a tad artistic in places. I was drawing only half the card but kept having to preview with the 180 degree rotation to confirm things lined up with the other half. It even turned out one card was designed to not be symmetric, so I improvised, the Jack of Heats actually had a heart dead centre, so had a "way up", so I did two hearts side by side instead.

History

There is one thing that is noticeable though - modern court cards (at least English decks) all face in a standard way. It is a total mess, i.e. there are four ways they face (profile left, half left, half right, profile right) but each suit does not have all four versions. The deck I used as reference is old, and so six of the court cards actually face a different way to modern cards - it makes them that bit different.

Some of the history is interesting - it seems in the 19th Century Goodall & Son and De La Rue were cornering the market in playing cards, merging in to De La Rue in the 1920s, and going on from making playing cards to now making bank cards. I never knew bank cards had a history in playing cards!

My Queen of Spades
Coding

I did not simply make a deck of SVG cards - that is not quite my style - what I made was a C programme that creates a deck of cards. It has lots of options (see below). It is fun working out the different ways you can make cards, and some of the subtle detail - for example, the 9 of clubs needs the centre club to be slightly higher than central to avoid clashing with the clubs on the sides! Of course the SVG was made using an XML library in the code.

Then I made more C code, this time to allow me to edit and tinker with the court card drawings in SVG, and extract the raw paths to make the include file for the main C code.

Size

The design allows me to make other sizes easily but I decided to stick to standard poker deck size (2.5" by 3.5") or the metric version (63mm by 88mm). Obviously as SVGs this is pretty academic as it is scalable.

Ghost pack is confusing
Variations

The C code, which I may yet publish, has a number of options which I can use in any combination. I have published a selection of decks made using some of these.
  • Ghost - all black except the small pips under the value which are red for hearts and diamonds - inspired by a Bicycle Ghost deck. No, I have not done a black ghost deck (yet).
  • Blue - Blue instead of red!
  • Plain - Court cards and joker are simple letters, making the deck much smaller SVG.
  • Box - A box is present around the court card artwork anyway, but this adds a box around all of the other cards, with a cream background
  • Ace of Spades - This is normally "special", dating back to showing tax was paid (apparently) but can be made simple, just one standard size spade pip in the middle. Custom text/URL under the ace as well.
  • No-Left - Not showing the index value and suit on the top left - so old school where you had to count the pipes
  • Right - Also showing the index value and suit on the top right, for left handed players!
  • No-Flip - Not inverting the pips on the bottom of the cards - like really old packs
  • Old - using old style pips from the 1870 deck - they look quite different to what we see these days - typically used with no-left and no-flip to give the authentic style
  • Eleven - Add an "eleven" card for extra fun - it comes between 10 and Jack.
  • And of course options for artwork with no border/outline, and with bleed area for printing, and different sizes (bridge, poker, etc).
[update] Several more options including symmetric pips and 4 colour decks, etc, as well as making print ready artwork to order real packs.

I addition, I can make custom backs, and jokers and so on for different decks.

My 11 of Clubs
Going up to 11

Obviously I have made a pack with 11s in it (between 10 and Jack). Adding an 11 seemed obvious and for some games it will be simple as the order of cards is what matters (it is clearly ... 9, 10, 11, J, Q, K). So anything based on whist is no problem. Where it gets more complex is where the cards have scores, e.g. J, Q, K count as 10 and A counts as 1 or 11. Well, should the court cards now be 11? Should the A only count as 1 now? You'd have to make your own rules. I have not found much about using 14 card suits with my googling, but have found other SVG cards for 11s, so not original by any means.

Printing

I added options to add 3mm bleed area, and no card border/outline, to make it easy to make print ready graphics. An inkscape command line easily turns the SVGs in to PDFs. I had to design in clip paths for my court cards as web browsers limit the symbol to the viewBox, but sadly inkscape seems not to do that, so "bleed" from my court card designs were showing.

I found a company that seems to know what they are doing when it comes to printing playing cards, Ivory Graphics.

One thing that did puzzle me is their print tolerances. They want 3mm bleed around the card and 5mm clearance inside. This makes no sense as surely if they can be more than 3mm off on the card cutting they will be beyond the bleed, so why expect 5mm clearance not 3mm? Anyway, they were happy to try with 3mm clearance, which fits with actual playing cards I have checked. The big issue is that even 1 or 2mm may be enough to make an asymmetric back image which can be exploited, so a serious playing card printing company has to be pretty damn good and way better than 3mm...

The other thing is the way they work - and I suspect it is just common for companies to work like this. They have a pretty slick ordering system - you ask for a quote with all the options very clearly laid out, and then send one, and you click a link to order. You upload artwork (PDF files, nice). They have artwork templates and rules, so pretty simple. Now, if I was doing it, I would allow you to arrange which artwork is front and which is back of each card and the arrange the order of the cards, but no, it just lets you upload a load of files (and only one at a time, when I know browsers can handle more than one at a time if you try). You have to give them separate instructions for how the artwork is to be used, and even then they don't necessarily follow the instructions. Then produce a "proof" which is again PDFs but one for each front and back of each card with the card outline. This process seems to take a couple of days and be somewhat manual their end. I would have made it part of the ordering system showing the "proof" there and then, and hence bypassing some manual process and removing a two or three day delay in the process. However, with all of this, they do have good expectation management saying they take 6 days - I am impatient and finding inefficiency a tad annoying. That said, they were interested in the suggestion for improvements and said they are always trying to improve.

Email was a challenge - their system did not "like" that I had ivorygraphics in the email address I gave them, and my system flagged all their emails as spam so I had to go hunting for them!

The real proof is seeing the test pack of cards.

The test pack of an A&A deck

The verdict - well the cards are good, they look and feel the same as a "real" pack of cards, but the cutting was not perfect on all cards. I have changed the design slightly for printing to have a bigger margin to avoid this being such an issue - this was a "test pack" after all. The printers have also said they were not happy with the cutting and are doing a new test pack for me now.

P.S. Having the test pack has actually allowed me to make a number of minor changes to the designs, not just margins so that print tolerance issues won't show, but also really subtle things like miter-limit on the top of the digit "4" and other details that seem more obvious looking at the actual pack.

32 comments:

  1. Maths Gear do a set of completely symmetric cards: https://mathsgear.co.uk/products/limited-edition-symetrical-playing-cards

    ReplyDelete
  2. I’d like to purchase a nice deck of AA cards - if they are for sale, please! This was a very interesting blog post....

    ReplyDelete
  3. Can "no-left" and "right" be used together, so that the values only show up in the top-right and bottom-left corners? I want a set of cards that are as awkward for right-handers to use as standard cards are for left-handers :)

    ReplyDelete
    Replies
    1. Of course, see www.me.uk/cards at the bottom for a left handed deck!

      Delete
  4. This is great fun! Only comment I would make is that if you use Super Size Index along with No Index options (as a result of playing around), you end up with some very odd looking cards. Maybe this is intentional but arguably there should be a block on that.

    ReplyDelete
    Replies
    1. I have tried to block or warn of some silly combinations, but decided to leave that one to be honest.

      Delete
  5. Very very nice work! I was wondering how much effort would be needed to add the following parameters to your makeadeck.cgi page:
    1- Court background image colour (currently always white)
    2- Box background colour (box around pips => currently always yellowish)
    3- Being able to add a mask over the cards with opacity to create "Darkened / Disabled" cards (This could be managed playing around with black and red pips and front background colour, but does not dampen the court card images and is not applicable to four coulour decks)

    We are considering using your cards for a mobile card game application and would be happy to contribute to this great work (Paypal donate link?), and of course give you proper credits in the app. To this effect, do you have a "2 liner" credits text you would like us to use?

    Thanks again for a great tool!

    Regards,
    Martin

    ReplyDelete
    Replies
    1. Well I make svg images so not hard to tweak them afterwards even in an automated way.

      Delete
  6. Thanks a lot for your effort; very nice looking cards. I used them for the illustrations of the rules of our card club (online here: https://watdoko.de, in german).

    ReplyDelete
  7. Thanks for your efforts with the cards, appreciate it. :)
    I've been using them to generate a square set of cards which look pretty cool (basically put a bridge sized, no index card in the centre of the square, then put super sized indexes on the edges... if that makes sense). I'm sure you could add the option to the generation options if you wanted. :)

    Found a bug though, if you're interested... generating poker sized no-index card, places the pip on the picture cards in totally the wrong place :)

    ReplyDelete
    Replies
    1. Odd, I had code in there to move the pip if the ratio of the card was above a certain level, but I did no have a comment why. Looks better now. Thanks for feedback.

      Delete
  8. I love you guys!!!
    A huge thank you for all the svg game cards in the public domain!
    I will use them and leave the link (you did a great job) !
    Thanks again!

    ReplyDelete
  9. Any chance you'll publish the C code? I'd like to make a tarot deck (78 cards, used in French Tarot, a popular game in France and Québec — see https://en.wikipedia.org/wiki/Tarot_Nouveau). I need to design the trump cards, but I also need a different size for the cards themselves (the aspect ratio of a tarot deck is roughly 2:1, much taller and narrower than usual cards)

    ReplyDelete
  10. Thanks for this! I used them for my open-source online solitare game: https://zzymyn.github.io/SolitaireLib/

    Source: https://github.com/zzymyn/SolitaireLib

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Neat cards! I was wondering, could you add 12s and 13s for those who want them? You could use this patent https://www.mypatentprints.com/product/1909-playing-cards-patent-game-room-art-vintage-games-card-game-patent-patent-print-game-room-decor-game-night-board-game-patent/ to arrange the pips if you really need them to fit in the same amount of space as the existing pips (for the 13s, use the 11-pip arrangement shown but with 4 pips on each side instead of 3).

    ReplyDelete
  13. Your cards are exceptionally impressive, the scope of options is amazing, and very grateful you've made them available. Unfortunately the SVG files do not work with Figma, only the outline shape is imported, and at a size of 2x3 pixels. Even when using Inkscape as an intermediary, cannot see any numbers or pips or faces when imported into Figma. Would love to find a way to use these in Figma drawings! Thank you

    ReplyDelete
    Replies
    1. I have never used that - I think these meet the SVG spec though?

      Delete
    2. The files probably do meet the SVG spec. My guess is that many programs, Figma being one, do not follow it to the letter. The features you used to make the files so small are probably what is throwing these programs off. I'll note that the Chris Aguilar files import fine. Perhaps, along with the rest of the options, you could offer an "uncompressed, un-optimized" option that draws every element as a path, and doesn't use SYMBOL or USE, etc.?

      Figma is a hugely popular alternative to Sketch, Adobe Illustrator, etc. I'll point out that another alternative called Creately seems to import your playing cards just fine.

      In any case, thanks again.

      Delete
    3. Indeed, may be worth my looking at an option.

      Delete
  14. I experimented with your cards in my solitaire game: https://jochen-hoenicke.de/seahaven/classic.html

    It embeds all cards in a single svg. Do you think it is worthwhile to have an export option for this?

    ReplyDelete
  15. Hello,
    How can I contact you?
    Just to thank you and for modification?

    ReplyDelete
  16. It is under github https://github.com/revk/SVG-playing-cards so pull requests welcome for modifications, or make an issue with any suggestions.

    ReplyDelete
  17. A big thank you, I love the cards!

    ReplyDelete
  18. Awesome job with the generator, many thanks! Unfortunately, the site (https://www.me.uk/cards/) seems to have stopped working - could you look into it?

    ReplyDelete
  19. excuse me, how to set another width & height on advance option? i.e i don't wanna set the default value of viewbox (1200x1200) & top left cards. i don't need print cards. Thanks

    ReplyDelete
    Replies
    1. Not sure I have anything for that.

      Delete
    2. i think Revk can code in 3s to set this feature of cards generator like advance option.

      Delete

Comments are moderated purely to filter out obvious spam, but it means they may not show immediately.

Missing unix/linux/posix file open option

What I would like is a file open option for "create replacement file". The idea is that this makes a new inode in the same mount p...