What is SVG?
Scalable Vector Graphics (SVG) are a family of Open Source specifications developed by the World Wide Web Consortium (W3C). SVG files are written in eXtensible Markup Language (XML) and used to build two-dimensional digital imagery. These images can be displayed on PCs, laptops and handheld computing devices. SVG files describe imagery using vector shapes and linked raster images (bitmaps) but may also contain animation, interactivity and internal style sheets.
Because SVG files are written in plain text, it is possible to create basic SVG imagery by 'hand-coding' XML in a text editor. However, it can be relatively difficult to draw vector-based shapes by typing in X,Y coordinates. For stylized artistic designs, it is often easier and more intuitive to use a computer graphics application like Adobe® Illustrator® to assist with the drawing tasks.
For data visualization, complex charts, graphs and schematics may be dynamically-generated from data files. Information stored in databases or XML can be manipulated with programming languages (e.g. C/C++, Java), scripting languages (PERL, PHP) or eXtensible Stylesheet Language Transformations (XSLT) to visualize complex data sets as SVG imagery.
About SVG LAB
My name is Daniel Humann; I'm a designer and developer working in computer graphics, the Web and software development. The SVG LAB web site is a personal project that I started to explore SVG and how it may be used in conjunction with HTML5 and related technologies (e.g. CSS, SMIL) to create visually-rich, interactive web sites and applications.
SVG LAB is like a sketch book—a place to collect ideas and experiment with various techniques. It also provides a convenient location to store files and share them with friends and colleagues. I've chosen to publish these materials in hopes that they might inspire other designers and developers to investigate SVG and expand it's presence on the web. So get involved! Start using SVG in your projects. It's interesting, fun and free.
In addition to this site, I've also created a companion blog at Tumblr, where I occasionally post various SVG-related stuff. If you're on Twitter and you're so inclined, you can churp @SVGLABcom to start a discussion, share links or just say "hello!"
The Experiments (and example code) are basic demonstrations of SVG technology. They are provided for educational purposes.
The examples shown at this web site illustrate general principles and techniques. However, I don't go into great detail about methods or how something was achieved. If you're interested in learning more about a particular technique, I enourage you to dig deeper. Examine the source code for each example, learn more about SVG, search the web and see what other people are doing with the technology. Most importantly, experiment and try it out for yourself.
Unless otherwise indicated, the examples shown on this site are released under a Creative Commons Attribution 3.0 License. Feel free to download the stuff. Modify and improve on it. Use the examples as starting points for your own projects. If you would like to contribute examples of SVG content for display on this web site, get in touch with me.
- CSS (Cascading Style Sheets)
- SMIL (Synchronized Multimedia Integration Language)
- XML (eXtensible Markup Language)
- Inkscape (Win, Mac, Linux)
- SVG-edit (Web-based SVG editor)
- Google Docs: Drawings (Web-based; exports SVG)