SVGBasics

Turn SVG On

Welcome!

Welcome!

Welcome to the SVGBasics tutorials. Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web. I've assembled here some examples that you can freely modify and reuse. The idea is to cover the basics with numerous examples that people can experiment with to get an idea of what SVG can do.

What is SVG

The Scalable Vector Graphics (SVG) recommendation comes from the W3C. The recommendation describes how to create vector graphics using a mark up language. Because SVG is based on XML, tools that already know how to interpret XML will be able to interpret SVG. Having this well-established standard as a foundation saves a lot of the work in defining the language. It also means that there are numerous tools around which can check the structure of an SVG document or read it to pull out interesting information. Being built on XML also makes it simpler to produce SVG programmatically from other XML data sources using XSL and XSLT.

What good is this site?

The current focus of this site is to help people interested in hand-coding SVG graphics. If you didn't understand a lot of the previous paragraph, don't worry. The intent here is to get people familiar with SVG without worrying too much about the underlying XML standard. Once you understand some SVG you'll probably want to learn more about automating it with other tools. That might come up here later on, but for now it may be easiest to get that functionality from style sheets (in XSL) that can turn XML data into SVG.

Viewing SVG

SVG is supported natively by Firefox and Opera web browsers. Most web surfers still use Internet Explorer - if you use Internet Explorer and want to view web sites with SVG you'll need an SVG viewer plugin like the one from Adobe or possibly Apache Batik.

Help with SVG Viewers

There's more detailed information on getting SVG in your browser here. There are still differences between the features these viewers and browsers support, so if you're having trouble with a particular SVG viewer or site you want to use then look for help on the Get SVG discussion forums.

©2004 Late Night PC Service | About Us | Site Map | Contact Us