Convert SVG-cards to PNG
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
SVG-cards @ 69111b3
.gitignore
.gitmodules
.jscsrc
.jshintrc
LICENSE
README.md
card.html
package.json
phantom_svg_cards2png.js
render_svg_card.js

README.md

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 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.

Requirements

Usage

  1. 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 ..
    
  2. Start http-server in the root directory of this project:

    http-server .
    
  3. Run the PhantomJS script phantom_svg_cards2png.js with, 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.

  4. 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.

  5. You now can use the PNG cards! Note that as the original SVG-cards are licenced under the LGPLv3, using the PNG cards means you have to adhere to that licence as well.

Licence

The code of the converter is licenced under the GPLv3.