Using SVG-playing-cards to Augment My Playing‑Card Classifier

In my earlier post, “Augmenting My Playing‑Card Classifier with AI‑Generated Test Cards”, I described how I attempted to expand my dataset by generating synthetic playing‑card images via AI. That effort sought to improve the training diversity for my classifier project (hosted at https://github.com/SteveTarter/playing-card-classifier) and ultimately deploy the model to AWS (at https://card-classifier.tarterware.com/ . Despite some promising results, one limitation emerged: the SVG‑based card representations had broken references and layer inconsistencies, which hampered further augmentation.

In this post I’ll detail how I isolated and fixed the SVG file‑path issue, explain how the suit cards are constructed via layered SVG elements, and how recovering that structure lets me augment and improve the dataset that backs the classifier.

Problem: Broken File Reference in SVG Program

The SVG program on GitHub was failing to locate a critical file, apparently because it was expecting it in the parent directory. That misplaced reference prevented the suit‑card layer files from loading correctly. Once I corrected the path so the program points to the proper subdirectory, the card layering functionality was restored.

Understanding the Layered SVG Architecture

The system for rendering suit cards uses multiple SVG layers to represent variant components (for example: pips, suit symbols, backgrounds). Rather than a monolithic image per card, it composes each card from modular SVG fragments. This allows swapping in/out elements (e.g. with/without pip counts) or mixing styles cleanly.

My intent was to exploit this layering system to generate new suit variants via AI — but that approach ran into complications. AI‑generated SVG fragments didn’t reliably conform to the layering scheme, alignment, or styling conventions. The code currently supports 2 different pip styles, which are defined as SVG strings in a structure.  Additional pip styles should be easier to augment than the suits and jokers.  So while full-scale generation wasn’t successful, restoring this layering infrastructure ensures the existing partial augmentation remains usable and extensible.

Dataset Augmentation via Python & AI Assistance

The augmentation script is written in bash. With the SVG layering restored, the script can now more reliably combine elements to produce synthetically varied cards. I used AI (for assistance in debugging, syntax issues, or exploring variant ideas) but limited the generation to modulation of existing templates rather than free‑form creative SVGs. That produced a more stable augmented set.

This improved dataset feeds back into the classifier repository. With a richer set of card images, I retrained the model and redeployed it to the AWS endpoint. The classifier now sees a broader variety of inputs, improving its robustness in real‑world inference.

I added this script to the SVG-playing-cards project, and updated the README file to include example invocations of the makecards command, as well as directions for creating the ML training dataset using the bash script.

Below is the output for a couple of the cards:

Screenshot showing multiple PNG renderings of the "Five of Hearts" playing card. Each variant differs slightly in background color, pip layout, or rendering style, demonstrating the output of an SVG layering and augmentation script.
Variants of the "Five of Hearts" generated by the SVG layering script. These reflect changes in background color, pip arrangement, and rendering parameters.
Screenshot showing multiple PNG renderings of the “Jack of Clubs” playing card. Each card differs in styling details such as pip count (single vs. symmetric), background color, and front design attributes — all generated from modular SVG components using a custom script.
Variants of the “Jack of Clubs” produced by the layering script, illustrating differences in pip placement, symmetry, and background color. These renderings highlight the flexibility gained after restoring the SVG layer structure.

Next Steps & Reflections

  • I’ll experiment further with AI‑assisted SVG generation, constrained to adhere to the layering scheme (e.g. snapping to exact coordinate grids, matching styling parameters).
  • I plan to add automated validation checks to ensure any new fragments integrate cleanly without misalignment.
  • I’ll measure inference performance changes on real test images (not just synthetic) to validate that the augmented data yields practical gains.
  • I plan to add additional pip styles to the SVG-card-generator.

Leave a Reply