QUESTION: What is SVG, and how does it work?

ANSWER: SVG stands for "Scalable Vector Graphics." It is a graphics language that is based on XML.


What Does SVG Look Like?

Here is some SVG file code that describes a green circle.

<?xml version='1.0' ?>
<svg>
<circle cx="40" cy="40" r="24" style="fill:#00cc00"/>
</svg>

The first line of code is a clue to a software system that is interpreting the code. It tells the software system that the code conforms to Version 1.0 of the XML specification. (Remember, we said SVG is based on XML. In fact, technically, SVG is XML, but we won't take the time to explain that concept here.)

The second line of code is also a clue to a software system that is interpreting the code. It says that the code is a particular XML language: SVG.

The third line of code describes the circle. Specifically, cx="40" specifies the horizontal location of the center of the circle, cy="40" specifies the vertical location of the center of the circle, r="24" specifies the radius of the circle, and style="fill:#00cc00" says the circle should be filled with a particular green color.

The last line of code, which says

</svg>

signifies the end of the SVG code. It "matches" or "balances" the second line of the file, which says

<svg>

This concept of "matching" or "balancing" is fundamental to all XML-based languages.


How Does SVG Work?

If you want to see a rendering of the objects described by SVG code, your computer must have software that can understand (interpret) SVG. Your computer probably does have software that understands SVG, because most modern Web browsers (Chrome, Firefox, etc.) understand SVG. In other words, Chrome and Firefox and some other Web browsers contain an SVG interpreter.

The SVG code for the green circle has been incorporated into the HTML code for this Web page. If there is an SVG interpreter in the Web browser you're using to read this Web page, you'll see the green circle below.


Those of you who are Web developers might be wondering how we incorporated the SVG code into the HTML code for this Web page. This is how we did it:

<div>
<?xml version='1.0' ?>
<svg>
<circle cx="40" cy="40" r="24" style="fill:#00cc00"/>
</svg>
</div>

Putting SVG code inside a div container isn't the only way to render the results of SVG-code interpretation on a Web page. Another way to do it is to put the SVG code in its own file and use an img element to point to it, like this:

<img src="GreenCircle.svg"/>

Or, you can do essentially the same thing with an iframe element, like this:

<iframe src="GreenCircle.svg"></iframe>

There are other methods you can use, too.


Refer to the W3C's SVG specification for more information about SVG.


TOP