Chapter 1 Graphics from Vectors: An Overview of SVG
There's a fundamental chicken-and-egg quality to creating SVG that can make teaching it a challenge. Shapes without styles are not terribly attractive; styles without shapes cannot be seen. To work with an SVG, you need to display the graphic on the web; to display a graphic, you need some SVG code to display!
This chapter presents a rough sketch of the chicken and the egg, so that subsequent chapters can fill in the details one topic at a time, without feeling like large parts of the picture are missing.
The chapter starts with a simple SVG graphic and then adapts it, to use different techniques and to add new functionality. The examples will introduce many key features of SVG, but will skip over many others. At the end, you should have a good idea of what an SVG file looks like, how the key elements relate to each other, and how you can edit the file to make simple changes.
Figures and Examples#
The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.
View all files for this chapter on GitHub.
- Example 1-1. Defining an inline SVG element in an HTML file
-
- Live HTML file, inline-svg-boilerplate.html (Note: this will be a blank page; this is just the markup structure, with no content!)
- See also the extra article describing the elements and attributes.
Figure 1-1. Primary color stoplight graphic- Example 1-3. Drawing a primary color stoplight in a stand-alone SVG file
- Example 1-2. Drawing a primary color stoplight in inline SVG
Figure 1-2. SVG and HTML files open in multiple web browser tabs- Example 1-4. Grouping elements within an SVG stoplight
- Example 1-5. Using inline styles in the SVG stoplight
- Example 1-6. Re-using elements to draw an SVG stoplight
Figure 1-3. Stoplight drawn with re-used elements
Figure 1-4. Stoplight with gradient fills- Example 1-7. Using gradient fills to enhance a vector graphic stoplight
Figure 1-5. Three stages of an animated stoplight with gradient fills- Example 1-8. Animating the stoplight using CSS keyframes
Figure 1-6. Three stages of a labelled, animated stoplight- Example 1-9. Adding text labels to the animated stoplight
Figure 1-X1. A vector graphic rasterized at different resolutions-
- Live SVG file, rasterization.svg
- From the “Understanding Vector Graphics” extra article.
Online Extras#
“HTML Syntax, Lazy or Long”: Explaining the elements, attributes, and syntax details of our boilerplate inline SVG example.
“XML Prologs and Document Types”: Unique features of XML that you may discover if you look at SVG code created by a software program.
“Understanding Vector Graphics”: SVG stands for Scalable Vector Graphics, but what does that mean? How is it different from other image formats?
Reference: SVG Elements and Attributes