Saturday, April 23, 2011

Using Google's App Engine to serve SVG files

I've been tinkering with SVG Animation support in HTML5 lately and since I don't like to maintain web servers myself I needed somewhere convenient to host my Javascript and SVG creations. My friend Jeff Bailey suggested that I check out Google's App Engine.

While App Engine may be a bit overkill for serving static content, recent additions to SVG allow animation elements. What appears to be a static SVG file may in-fact have embedded Javascript and SVG Animation elements.

App Engine has proven to be a great environment to work with but in order for it to properly serve SVG files such that a browser can display the images rather than the XML data the server needs to export the proper MIME type information for SVG files. This is accomplished by telling the App Engine server how to serve the SVG files.

App Engine supports both Java and Python servers. I use the Python server and the server configuration files are in YAML. The following YAML fragment is added to the project's app.yaml configuration file to support SVG MIME types:
handlers:
- url: /(.*\.svg)
static_files: static/\1
upload: static/(.*\.svg)
mime_type: image/svg+xml

The following is a little tech demo I've made using App Engine:











Note: SVG Animation support is still in development by most browsers. The ones I've tested are Chrome, Opera, and Firefox. The level of conformance for each of these browsers vary. This demo works best on Chrome 11.0.696.16 beta. The spacing of the train-cars is a little off in Opera. I'm not sure which browser is the most spec conformant.

The following app.yaml file is complete example that is used for the rsasandbox project:
application: rsasandbox
version: 1
runtime: python
api_version: 1

handlers:
- url: /(.*\.(html|png|jpg|gif))
static_files: static/\1
upload: static/(.*\.(html|gif|png|jpg))

- url: /(.*\.svg)
static_files: static/\1
upload: static/(.*\.svg)
mime_type: image/svg+xml

- url: /(.*\.xml)
static_files: static/\1
upload: static/(.*\.xml)

1 comment:

  1. I need to to thank you for this fantastic read!! I absolutely loved every bit of it. I have got you bookmarked to look at new things you post.
    website design

    ReplyDelete