Browser Canvas based SVG to PNG converter

The goal of this project is to convert SVG document + embedded SVG fontface to PNG image using browser canvas.

Let's get to work or Continue to read the story.

Libraries used:

• Next.js & Express.js - Running server locally and quick React.js UI setup
• Isomorphic-Fetch - Building reverse proxy to bypass CORS for remote SVG Url's
• Finally, 💗 of this POC - img-conv.js

Problem statement & Why this?

Well i tried imagemagick and Apache Batik

Both are best for image manipulation, but they dont do a good job of converting SVG with @font-face CSS embedded for custom font to be converted into PNG image that we expect.

Boring solutions to above:

1. Install the fonts on the system where conversion happens - ( No way on Linux VM's )
2. Convert those fonts to SVG fonts using fontforge and embed it inside the original SVG document to be converted - ( Phew! tedious work damn! )
3. Take a screenshot & use Photoshop - ( Wait what! )

Simple solution, a Eurekha moment!

Use browser canvas to do the heavy lifting using simple Javascript program. ( Yay! )

Any down side for this?

Hmmm, You need a working browser to run this project ( I can live with that! )

Tips - Use a headless browser to run the modified version of this project to achieve your goal on cloud VM's

How to get this Working !

• Make sure nodejs is installed on your local machine

• Checkout the Repo to your local machine

• Next run yarn on the project root from terminal

• Now run yarn start to start the server from terminal

• Copy the url printed on the terminal window to your browser whick looks similar to http://localhost:3000

How to verify the sample image ?

Sample test image is inside the folder image-samples.

Follow these steps:

• Now the server is up & running on your browser

• Sample image will be available as http://localhost:3000/sample/pockethash.svg ( static resource served from image-samples folder )

• Paste this link in the UI textbox and click send. Your PNG will be rendered.

• Click on the download button below the rendered image to download the final PNG image.

• To tweak output image settings, modify variables in pages\index.js.

Thanks

Contribution and suggestions are welcomed.

Nirus