Convert SVG-cards to PNG

Rationale

While developing a JavaScript playing card library using the nice SVG-cards, I found that using USE elements to show a lot of cards performed badly. To speed things up, bitmap representations of the SVG cards seemed a good idea.

I first tried converting the SVG cards to PNG in the web browser by drawing the SVG dom into the HTML CANVAS, adding an event handler to the canvas to download the rendered bitmap. To my surprise, however, this did not work out because of the CANVAS security constraints regarding rendering external files. Next, I switched to the command line and tried to convert the cards using rsvg and Inkscape. Again I was surprised: these programs do not render external SVG elements at all!

In the end I got the conversion working by using the Chromium web browser in headless mode via puppeteer. Each SVG card is rendered in turn and saved to a PNG file. In this repository I publish the scripts I used in this conversion.

Usage

0. Clone this repository and fetch the SVG-cards submodule and install the dependencies:

   git clone https://github.com/htdebeer/svg-cards-to-png.git
   cd svg-cards-to-png
   cd SVG-cards
   git fetch
   cd ..
   npm install
   

1. Start http-server in the root directory of this project:

   node_modules/http-server/bin/http-server .
   

2. Run the svg_cards2png.js script with, optionally, the amount you want to scale the cards. For example:

   ./svg_cards2png.js --scale 2 --directory ./png --color blue
   

   will generate cards (plus the back card) twice its natural size of 169.075×244.64 pixels. So, these PNG files have a resolution of 338×489 pixels. You can specify the scale using the command line option --scale or -s, defaults to 1.

   Furtermore, the color of the back card will be blue. You can specify the back card's color using the --color or -c command line option. This option defaults to #0062FF.

   To generate a bunch of back cards with different colors, the script color_backs-svg_cards2png.js has been created. It has the same options as svg_cards2png.js, but you can use the --color or -c color multiple times. For each color, a back card with that color is generated and named back-<COLOR>.png. If the color is a hex code, the prefix # is removed in the name. You have to enclose a hex coded color with quote (") characters though.

3. Wait till the conversion is finished. The PNG files are placed in the sub directory png. You can specify the directory using the command line option --directory or -d, defaults to ./png.

4. You now can use the PNG cards! Note that as the original SVG-cards are licensed under the LGPLv2.1, using the PNG cards means you have to adhere to that license as well.

License

The code of the converter is licensed under the LGPLv2.1.