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.
-
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
-
Start http-server in the root directory of this project:
node_modules/http-server/bin/http-server .
-
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 to1
.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 assvg_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 namedback-<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. -
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
. -
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.
The code of the converter is licensed under the LGPLv2.1.