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 PhantomJS headless browser, rendering each SVG card in turn and saving the rendering 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:
git clone https://github.com/htdebeer/svg-cards-to-png.git cd svg-cards-to-png cd SVG-cards git fetch cd ..
Start http-server in the root directory of this project:
Run the PhantomJS script
phantom_svg_cards2png.jswith, optionally, the amount you want to scale the cards. For example:
phantomjs phantom_svg_cards2png.js 2
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.
Wait till the conversion is finished. It will output an error or success line for each converted card. The PNG files are placed in the same directory as the PhantomJS script.
The code of the converter is licenced under the GPLv3.