Creating a banner that scales to the width of your wikimap

/ , , / , /

This video demonstrates how to replace a jpeg image with an svg file.

Let’s make better WikiMapping banners.

If you create WikiMapping banners using Adobe Illustrator or Photoshop and save it as a jpeg, there can be two problems.

  1. The banner shows up wider than the map
  2. The banner shows up narrower than the map

Project administrators (anyone who is setting up a project) have dealt with this by creating multiple jpegs that reposition themselves based on the width of the browers screen.  Chapel Hill’s project is an example of this. This is still not optimal for different devices, such as an iPad, which can be 768 pixels wide or 1024 pixels.

The Scaleable Vector Graphics alternative

You can create a banner in Illustrator and then save it as a .svg format.  In the video, I used East Coast Greenway Alliance’s project as an example. 

Here are the steps that are shown in the video:

  1. Create a new document in Illustrator ( I use dimensions of 1600×120 pt).
  2. Add your Title, logo, etc.
  3. Save as .svg
  4. Copy the svg code
  5. Go to Edit Project in your WikiMapping project and edit the banner
  6. Select Source and change the width and height from a numeric value to 100%
    changheightinbanner
  7. Click on “Source” to view the image.
  8. Save

Problems that you may encounter

  1. If your SVG file is too long, it may get truncated when displayed.
  2. If you want to use a raster image (a logo) with your SVG, you will need to link to the logo.

Want to learn more about SVG?

Check out Jakob Jenkov’s book:  SVG Compressed.  You can find Jakob’s website here, and it has examples of SVG code. You may even get inspired to add some animation to your banner.

If you don’t have Adobe Illustrator, you can download InkScape and create a SVG graphic that way.  Honestly though, I think Illustrator is worth the price.

Want to learn more about the East Coast Greenway?

I’ve been working with the East Coast Greenway Alliance since the mid 1990’s.  I was a bit skeptical at first about the idea of developing a route between Canada and Key West, Florida.  My skepticism has morphed into awe as communities develop local trails that become part of the larger East Coast Greenway.  In May, East Coast Greenway Alliance will host its Annual Summit here in Philadelphia.  You can learn more at greenway.org.