Saturday, October 29, 2011

Scalable Images in Blogger

Questions about a recent post containing a couple of flow charts made me regret the fact that Blogger does not support SVG graphics.  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 Picassa, another Google product/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 Picassa) to point to the PDFs in Google Docs instead.

I did this with the aforementioned post, and I think it's working. The one question mark for me is whether everyone can see them.  I can, but Google knows I'm the owner.  If either of my loyal readers runs into problems, or wants me to convert images from earlier posts, please drop a comment here.

5 comments:

  1. Paul, you can also embed google docs directly into your post.

    Also, the gdocs drawing application uses svg itself -- maybe you can upload the svg there? (I haven't checked)

    ReplyDelete
  2. @Peter: Thanks for the tip. Unfortunately, embedding a PDF in an iframe doesn't seem to work, and I don't see a way to upload a PDF image and get Google to convert it to a drawing. I've uploaded an 8 MB SVG file to GDocs, but no joy viewing it. Maybe just as well; a bunch of diagrams that size would eat up my free GDocs space fairly quickly.

    I could probably draw the diagrams in the GDocs drawing app, but I'm used to TiKZ. For other people, though, I suspect that creating the drawing in GDocs (if it's a diagram and not a function plot) might be the path of least resistance. For scalable function plots, I think we're probably back to PDF.

    ReplyDelete
  3. One bit of progress: It turns out that ImageMagick is the wrong way to convert a PDF to SVG. I loaded one of my PDF images into Inkscape, wrote it out as SVG, and the file was on the order of 50KB rather than 8MB. Unfortunately, GDocs won't import SVG graphics (it's been requested by others) and Blogger doesn't believe SVG files qualify as graphics, so I would have to host it on a third party server and use an iframe to display it. (Can't host it on GDocs, either -- the sharing link embeds an entire GDocs page, not just the image itself.)

    ReplyDelete
  4. Paul, thanks for the update! I'm sorry for sending you in the wrong direction. It's odd that the gdocs drawing application produces svg but cannot open them. Well, maybe they'll fix it.

    ReplyDelete
  5. @Peter: No worries. I appreciate the tip about embedding GDocs, even though it didn't work in this case. I too find it odd that the drawing app can't import SVG. I'm also surprised Blogger doesn't provide a way to upload and insert SVG; I think most browsers now support it.

    ReplyDelete

Due to intermittent spamming, comments are being moderated. If this is your first time commenting on the blog, please read the Ground Rules for Comments. In particular, if you want to ask an operations research-related question not relevant to this post, consider asking it on Operations Research Stack Exchange.