SVG Kickstart 1: Allow Myself To Introduce...Myself

by Jeff Schiller, 2005-06-10

Table of Contents

• SVG KICKSTART TUTORIAL #1
• 1. Introduction
• 2. Setting Up Your Browser
• 3. A Good Starting Point
• 4. The Immediate Benefit
• 5. Conclusion

• ---

• SVG KICKSTART TUTORIAL #2

2. Setting Up Your Browser

You really have two main options when wanting to set up your browser to handle SVG content: a) A SVG Plug-in or b) Installing a browser that can handle SVG natively.

• a) Native Browser Support

  If you're using any major browser other than Internet Explorer, you already have a browser that supports at least a subset of SVG natively. As of Sept 2007, there are several options:

  • Opera 8+ - at the moment, Opera 9.5 (Alpha) has the best support for SVG out there
  • Firefox 1.5+ (and any Mozilla-based browser) - currently supports a sizeable chunk of SVG Full 1.1, Firefox 3 will add support for SVG filters
  • Safari 3.0+ (and any WebKit-based browser) - currently in Beta and supports a sizeable chunk of SVG Full 1.1
  • Konqueror 3.5+ (using the KSVG part). WebKit actually based its SVG implementation on KSVG and has contributed fixes back to KSVG as a result

  Microsoft has yet to announce any official plans for SVG support in Internet Explorer, but there are rumours it will happen one day. Will the fact that all other major browser developers are working on SVG have any impact on the Internet Explorer roadmap? Only time (and demand) will tell. If you are forced to use Internet Explorer but still want to play with SVG you will have to install a web browser plugin (see next section)

• b) SVG Plugins

  As of this writing (August 2007), the Adobe SVG plug-in is still the best SVG plugin out there. It's supports a wide range of SVG features and is relatively fast. You can download version 3.03 here: http://www.adobe.com/svg/viewer/install/main.html.

  It might also be a good idea to keep an eye on Renesis too, their plugin is missing several features, but it continues to improve.

Now that you've taken steps to enable a web browser to display SVG, it's time to test it out. Click on this link and you should see the following in your browser:

If all is well you can proceed on to the next few pages and learn about this new technology.

Note: The rest of these tutorials will embed actual SVG images into the pages so it is assumed you have now set up your browser accordingly. If not, you will see some error messages in the tutorials in place of the SVG images.