## Monday, June 4, 2012

### SVG, Scalable Images, not JPG, GIF or PNG in Blogger blogspot

Questions about a recent post containing a couple of flow charts made me regret the fact that

Blogger does not support SVG graphics by direct insertion :
You may upload multiple files at once but you can only use JPG, GIF, or PNG files.

Although I made the charts using the excellent TiKZ LaTeX package (which produces vector output in the form of a PDF file), I had to convert the PDF output to PNG for Blogger, and the images are a tad fuzzy (and do not scale well when zoomed), which may have led to some confusion. So I was on a mission today to find a workaround.

The first thing I discovered that SVG is not nirvana.  I generated the images as separate PDF files from the TiKZ source.  (Hint to people doing this: use the LaTeX standalone document class and the output file will automatically be cropped to the smallest rectangle containing the image.)  I then used ImageMagick to convert the PDF files to SVG files ... which blew them up from around 54 KB to about 8+ MB. Each. Oops!
I tried a tool I found to convert the SVG files to "canvas" files, which got me another 5x or so increase in size.  So back to PDF files.

Blogger does not consider PDFs to be images, to the plan now is to use a PNG file as the image and link it to the corresponding PDF, allowing readers to click on the image and at least get a scalable version in a new window or tab.

Blogger does not allow you to upload arbitrary files, only images in formats it recognizes (which are actually stored in Picasa, another Google product/Web-service). I thought about putting the PDFs on a personal server somewhere, but I worry about moving things (including them) to a new server at some future date and not remembering to update the links.  Enter Google Documents.  I just have to upload the PDFs to Google Docs, make them public, grab the URLs and set the links on the PNGs (which by default point to the PNG files in Picasa) to point to the PDFs in Google Docs instead.

Ref: http://orinanobworld.blogspot.fr/2011/10/scalable-images-in-blogger.html