SVG
From Better Practices
Contents |
[edit] SVG
[edit] Overview
SVG (Scalable Vector Graphics) is a W3C (World Wide Web Consortium) recommendation for describing two-dimensional graphics. It belongs to the XML (eXtensible Markup Language) family of markup languages. XML is the standard for encoding specialized information, particularly for the web. Other examples of XMLs are MathML (for math), ChemML (for chemistry) MusicML (for music), XSL (for style), InkML (for digital ink). There are hundreds of specialized XMLs, and new ones are being defined all the time. It's probably fair to say that just about every software or technology company has defined at least one specialized XML. All XMLs share a common syntax, which makes them very portable, easy to design, easy to understand, and easy to modify. We could define our own "better practices" XML if we wanted to. (Let's call it BPML.)
SVG is supported natively by the Firefox and Opera browsers, and partially via the Adobe SVG plug-in for Internet Explorer.
SVG is a very powerful technology. Basic geometric objects can be constructed easily: lines, rectangles, circles, ellipses, paths (using lines, quadratic splines, or cubic splines). Objects can be grouped together to form new, complex groups, and objects can be animated. SVG can be combined with JavaScript to create very rich applications. The following is a quote from the Mozilla Developer site:
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. Basically SVG is to graphics what XHTML is to text.
SVG is similar in scope to Macromedia's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard for all intents and purposes) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.
[edit] Examples
The following markup
<svg:svg version="1.1"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="430">
<svg:polygon style="stroke:blue; stroke-width:1.5;fill:silver"
points="10,10 180,10 10,250 50,50 10,10" />
<svg:circle style="stroke:red; stroke-width:2; fill: yellow; opacity: 0.5"
cx="100" cy="80" r="75" />
<svg:rect style="stroke:green; stroke-width:3; fill: #ded; opacity:.8"
x="30" y="80" height="120" width="220" />
<svg:path style="fill:red;fill-rule:evenodd;stroke:none"
d="M 230,250 C 360,30 10,255 110,140 z "/>
</svg:svg>
produces the graphic
[edit] Resources
- SVG at W3C
The home site for SVG, with links to specifications, tutorials, resources, and more.
- Inkscape
Inkscape is a WYSIWYG graphics editor that is based on SVG. It's free and open source.
- SVG at W3Schools
W3Schools is the best set of tutorials on the web for a variety of technologies: HTML, CSS, JavaScript, and SVG
- Joma Article on SVG by David Lane
This article has lots of cool examples, and instructions on how to build a simple SVG application.
--Kyle 16:42, 14 July 2007 (EDT)
