I’ve been working on a project where I need to create maps in ArcGIS, save them as images, and embed them in a webpage. Seems simple enough right? Well, it turned into a much more complicated affair, as the file formats I was using to export the images looked terrible. I thought I would share this experience, as I had a hard time finding info about it and I imagine this is a problem that many have faced at one point or another.
I was exporting some basic two-color thematic maps of the US out as jpegs, and the colors were blurry and the boundaries block-like. I tried increasing the resolution, which didn’t work because it made the images larger. Couldn’t do that, because I needed the images to be a specific size to mesh with the content on the pages I was creating. So I tried tiffs and gifs as well, which were only mildly better.
I recalled having these problems in the past, but I always got around it by exporting the maps out as pdfs, which look pretty good. But in those cases I was just trying to preserve the map in a static format, and since you can’t embed pdfs into html (you can only link to them) that option was out. I’ve used emf files when my goal was to insert the image into a Word document, but emfs are not recognized by web browsers nor can they be embedded in html, so no dice there.
As I delved into this further, I discovered that pdfs and emfs looked good because they are vector based. Since the map I was creating is vector based, the conversion is pretty clean. The jpegs and tiffs are raster based. So when you make the conversion, the image quality suffers, particularly when using jpegs as the files gets compressed. So, what I really needed here was a vector based image format that you could view in a web browser.
This is when I stumbled upon svg files – scalable vector graphics. They are open standard, vector based, and are essentially xml files. You can even open them in a text editor and, if you know what you’re doing, edit them. They are scalable because you can zoom in and out without the resolution getting poor. SVG files can be viewed using recent versions of the Firefox broswer, and you can embed them into html using an object or embed tag (can’t use the standard img tag). They look great – crystal clear. The problem here is that Internet Explorer doesn’t support svg without a special Adobe plugin. Doh! Which means if you’re designing a web page with svg files, only 18% of the web surfing population can view them without having to bend over backwards. So, that’s not going to work.
Then I was surfing around Wikipedia (for unrelated reasons), and noticed that several maps embedded in their pages are in SVG format. And, I was able to view them in Firefox and IE without a problem, and without a plugin. Then I discovered on one of the documentation pages that they use a program within the MediaWiki software called RSVG that draws from a library called librsvg, which rasterizes all of their svg files. The program looks like it does a great job. But getting the web server I’m using configured to handle this is beyond my control. But it’s good to know that there is a server-side solution.
I did find a detailed page on Wikipedia that was created to guide people in submitting images to the site, and they recommended using SVGs or PNGs – portable network graphics, which are an open standard raster format. They had some useful illustrations comparing the quality of the different images and the reasons why some are better than others.
In the end, I went with the png format, which still isn’t as crisp as the svg but is far better than the other rasters. And, it’s widely supported, so no problems embedding it in html with the standard img tags. Some older versions of the IE browser may render them a little funny, or not at all, but you’re safe if you’re using version 6 or 7. Hopefully, the next version of IE will support svg, as it does provide some great opportunities for creating maps outside of GIS. If you have an svg file with countries of the world (download one for free from wikipedia), you can open it in a text editor and assign different countries different background colors based on a range of values. But that’s another story.
In summary, when you want to save maps as static files:
– Use pngs if you want to embed them in a web page
– Use emf if you want to embed them in a word processing document
– Use pdf to preserve the map in a stand-alone file for linking to or printing
– Use svg for preserving stand-alone maps for viewing locally or printing
(You can download an SVG example as well and take a look in Firefox. For some reason, if you try and view it directly from here, you’ll see the code and not the image – may have something to do with the configuration of this webserver – I’ll have to investigate).
– Wikipedia guidelines for submitting images, includes discussion of jpeg, png, svg
– Wikipedia guidelines for svg
– Download svg map images from Wikipedia
– Instructions for embedding svg into html
– SVG homepage
– PNG homepage
– Adobe SVG viewer