Embedded SVG Image in Your Site Powered by Pelican

Inline Vector Graphic in the Right Way

By converting bitmap graph directly via tool like ImageMagick with the command like convert input.png output.svg, you may probably not get what you want, because it applies the trick to wrap up a base64-encoded text in a svg format. You don't really get a vector graph (with vector information). Besides, you may increase the size of your SVG unexpectedly by 1px radius circle for each pixel.

The following shows one of the right ways to embed a real vector graph. There are plenty of variant ways to achive the same goal: reserve vector information in the website html. If you don't mind having an essentially bitmap image embedded. This post is not for you.

Prepare Vector or SVG Image

The following assumes the source image is a greyscale png (a bitmap image in a compressed format). A RGB png should also work, but I did not try.

Transfer Original Bitmap Image to Indexed Color Image With GIMP

Open your png. Select Mode --> Indexed --> Black and White to make the image binary. Save as another png.

This step is to make the image more "friendly" to process by the later step of potrace.

Convert PNG to PNM

convert input.png output.pnm

Use potrace to Convert PNM to SVG

potrace input.pnm -s -o output.svg

Please note this step will remove the color of your image and only resever the vector/path information. Making the image black and white help to find out the right path.

I guess another tool called autotrace should play the same role. However, there is no deb on Ubuntu 18.04 or later. This project is currently an orphan of debian. I tried to compile from source with my ubuntu-mate 18.04 and the compilation is good, but I did not have luck to read my png correctly (the error message is similar to this one) and stop diving into it.

Use Inkscape Edit SVG

Now you have a SVG with vector information. You may customized the svg with Inkscape. Please note Inkscape will embeded its own information in your SVG so you will see some meta data provided by Inkscape in your site html.

Inkscape has a feature of trace path. I suppose this feature is also able to be used for converting bitmap image to SVG. (but I did not try.)

Embed the SVG with Pelican Plugin

You may now embed your SVG with this pelican plugin so you could leverage the default USER_LOGO_URL variable of pelican. You may also use the inline syntax like {% include your_image.svg %} by including the svg as a part of html template.

Extra Refernece information

For friends not familiar with the concepts of raster graphic, bitmap, and vector graphic. The following key concept summary may help you to pick up the right tool.