SVG:1 – Getting started with SVG

This page has been moved to: https://graphics.cs.wisc.edu/Courses/559-sp2020/svg/svg1/ Same content, just not using wordpress so the SVG images show up. The whole tutorial series is at: https://graphics.cs.wisc.edu/Courses/559-sp2020/svg/

For some of the assignments, we are going to ask you to produce SVG (scalable vector graphics) format files.

This means you will need to figure out what SVG is and how to make it (by hand).

What is SVG?

SVG is a file format for 2D vector (or object-oriented) graphics. (see the vector vs. image discussion). It is a web standard, and is now well supported by all major browsers (although, they all do it differently).

Many vector drawing programs use it as either their primary file format (e.g. Inkscape or SVGEdit), or at least allow for saving and loading it (Adobe Illustrator).

The file format is just text, and uses XML as its syntax, so it looks like HTML. Don’t ask me what the differences are. If you’ve seen HTML, SVG will look similar, just that the tags you use are different.

SVG is well supported in the browsers, and is represented as objects inside the browsers (in the DOM, if you know what that is), so that programs can easily manipulate it. That means that SVG is great for making interactive pictures that work in web browsers. For this class, we won’t be taking advantage of it.

SVG has quickly become the preferred way to make diagrams and interactive data visualizations for the web. Look at the work of the New York Times graphics department to see lots of great examples. (this, or this for some recent favorites).

Why are we using SVG in this class?

SVG  gives us an easy way to try out graphics concepts (like transformations and bezier splines) without having to write programs.

We can write simple descriptions of graphical objects in a text file (at first, just using a text editor, but later writing programs to to do it), and let a web browser render it to show us what it looks like.

SVG exposes some of the key concepts of graphics (like coordinate systems) in an easy way, so we can practice with them in 2D and be ready for using them when we do 3D graphics programming.

SVG is also very useful in its own right (especially if you want to work on data visualizations!).

The easy parts of SVG (which are the ones we will use) are straightforward. Most of the fancy stuff has to do with its integration into web pages, and making styling things easier.

SVG is really well supported in the web browsers. It’s even well integrated into the debugger. If you’re looking at a web page with SVG on it (like those NY Times pages above), try right clicking on some graphical object like a line or shape and picking “inspect” (in either Firefox or Chrome).

That said: SVG is meant as a file format, not as a language for people to type. Normally, you’d use a program to manipulate SVG. So the actual “language” itself is a bit verbose, and inconvenient to type.

What does SVG look like?

Here’s a really simple SVG file:

<svg xmlns="http://www.w3.org/2000/svg" height="100px" width="100px">
<rect x="10" y="10" height="40" width="40" fill="blue"></rect>
<circle cx="60" cy="60" r="20" fill="red"></circle>
</svg>

And I can even just insert that code right here into my HTML file (even in WordPress) and you’ll see it:

Although this one isn’t too exciting.

It’s pretty self explanatory, but, a few things are worth noting.

• SVG’s begin with an SVG tag (see line 1). They end with closing this tag (line 4). Sometimes, you put something before the SVG tag to tell the thing that reads the file that this is XML. This seems to be optional.
• Notice that the SVG tag (line 1) has a bunch of arguments. In SVG, arguments are always strings (as far as I know), so you have to quote them. Even when they are numbers (see lines 2 and 3).
• There’s the mysterious xmlns="http://www.w3.org/2000/svg" on line 1. This tells the web browser that the SVG really is SVG. If you forget it, sometimes the web browser will refuse to draw your svg.
• The SVG tag (line 1) also specifies the width and height of the “canvas” we’re drawing on. Here, it’s a 100 pixel square (height=“100px” width=“100px”). It’s a good idea to specify the size of the thing you’re making (very important here, so the web page knows how much space to leave).
• The second and third lines are tags for graphics objects.  Notice that even thought there isn’t anything inside the tag, you still need to close it. There is a shortcut syntax, but I didn’t use it here.
• The objects are drawn in order, so the circle is drawn after (on top of) the rectangle.
• I used colors by name. SVG is pretty rich in allowing for a wide range of ways to specify colors. Usually, people use hexcodes (see the discussion of color, specifically hexcodes).
• The different objects (rectangle and circle) use inconsistent names for their parameters. There aren’t that many different kinds of primitives, so this is only moderately annoying. You need to look it up for each one.
• The meanings of the positions and the lengths are interpreted in the “current coordinate system.” And hopefully, you’re wondering about that, since learning about coordinate systems is one of the first topics in class, and a reason we’re using SVG in the first place. More on this in a future installment.

OK, Now What?

You can easily type those 4 lines of text that make up the SVG file into your favorite text editor, save it (be sure to use a name with a “.svg” extension), and load it into your favorite (modern) web browser.

Another nice way to experiment with SVG is to use the “tryit” editor that is part of w3schools.com (for example this circle demo, or any on the list of more complex ones). You’ll note that they wrap the SVG in html. (but you should be able to see what is going on).

There is a wealth of resources on the web to learn about SVG. W3 Schools is a good place to start. You can read the specification, but this isn’t necessarily an easy place to start. (it will be useful when we dig into that coordinate system question). If you find a good resource (or want to see what others have found) there’s a discussion topic on the class Piazza.

Here are some things you can probably figure out quickly yourself.

1. How to make the basic primitives (circles, rectangles, lines, polylines, polygons)
2. How to draw things either filled with a color, with just a stroke around the outline, or both

Actually, if you figure that out, then we can move on to learning about coordinate systems and transforms in the next tutorial…