Table of Contents
- SVG KICKSTART TUTORIAL #1
- SVG KICKSTART TUTORIAL #2
- 1. Introduction
- 2. Serving Up A Slice of SVG Pie
- 3. The Shape Of Things And Other Stuff
- 4. Colour Me Stupid
- 5. Basic Shapes And Colours Are Boring!
- 6. Don't Be A Tool, Use A Tool
- 7. Conclusion
2. Serving Up A Slice of SVG Pie
First things first. In our first tutorial you may have typed in the short SVG file and observed that your browser/viewer had the ability to display SVG (once you configured it), but if you try to put SVG files onto your web server there is a possibility that you will not be able to view it (it may come out as plain text). This is because most web servers don't yet properly serve SVG files with the correct MIME type. A MIME type is a text string that identifies the type of file that is being served by a web server so that the web browser can properly display it. Web browsers render the file based on the MIME type that the web server sends. Most web pages are served as MIME type "text/html" while Cascaded Style Sheets are served as "text/css". Additional popular MIME types include "image/jpeg" and "image/png".
The MIME type for SVG is "image/svg+xml". The problem is that the MIME type has not currently been registered by the W3C with the IANA. Because of this, most web servers do not serve SVG files with MIME type "image/svg+xml" (for instance, Apache does not by default). Thus, if you try and place this file onto your web server and then browse to it, you may only see the source and not our pretty Japan flag. This is because when web servers do not recognize the file type (by checking its extension), it defaults to the MIME type "text/plain".
So what can be done? I recommend trying the following three things in order:
Inform whoever owns the web server (i.e. your web host or ISP) that they need to support the SVG MIME type. The more web servers that support the SVG MIME type directly, the easier it will be for developers to start deploying SVG content. I tried this, but my web host (godaddy.com) refused to update their servers. Bastards.
Configure your path to support the SVG MIME type. Apache (the most popular deployed web server software) allows you to modify/configure its functionality in each web directory that it hosts. This means that you can usually add/modify the .htaccess file to instruct Apache to support the SVG MIME type. Just add the following three lines to your .htaccess file:
AddType image/svg+xml svg
AddType image/svg+xml svgz
AddEncoding x-gzip .svgz
This associates any files that end in svg and svgz as SVG content and the web server will send the proper MIME type to the web browsers. Files that end in svgz are compressed SVG files (using gzip), so the third line tells browsers that files of type svgz are encoding using gzip (thus, the browser will unzip the files before attempting to read, parse, and render the content).
Make a PHP "hack" file that will serve the SVG files up with the proper MIME type. PHP is a powerful server-side language that most web servers support. If you have the ability to put PHP files on your site, then you can write a simple PHP file called svgrouter.php:
strcmp(substr($SVG_FILE, strlen($SVG_FILE)-4),".svg") == 0 )
The checking of $SVG_FILE is there to prevent someone using this file to view your PHP files. With power comes great responsibility. Whenever you are using PHP, always try to think of how someone could use it against you.
With the above file, you can serve up your SVG content by directing users to the following URI: http://your.server/svgrouter.php?SVG_FILE=japan.svg. Although this is a slightly messy hack, the URI can be used anywhere a SVG URI is needed (i.e. inside a <object> or <img> tag).