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

www.me.uk/cards/

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.