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
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.
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.
google_ad_client = "pub-1870854262600725";
google_alternate_color = "ffffff";
google_ad_width = 200;
google_ad_height = 90;
google_ad_format = "200x90_0ads_al";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "006699";
google_color_url = "006699";
google_color_text = "006699";