Convert SVG-cards to PNG
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
adding an event handler to the canvas to download the rendered bitmap. To my
surprise, however, this did not work out because of the
constraints regarding rendering external files. Next, I switched to the
command line and tried to convert the cards using
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:
svg_cards2png.jsscript 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
-s, defaults to
Furtermore, the color of the back card will be
blue. You can specify the back card's color using the
-ccommand line option. This option defaults to
To generate a bunch of back cards with different colors, the script
color_backs-svg_cards2png.jshas been created. It has the same options as
svg_cards2png.js, but you can use the
-ccolor 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.
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
-d, defaults to
The code of the converter is licensed under the LGPLv2.1.