4 SVG

SVG stands for Scalable Vector Graphics. SVG looks a lot like HTML (it’s actually XML) and is included as a set of tags in HTML5. So at one level, there is nothing to learn – it’s just more HTML: open tag, close tag, set properties, yada yada yada. In other words, no new syntax.

Of course, there is something to learn – we need to learn the special tags and properties for SVG. We going to do this by drawing a snow person.

4.1 Getting Started – Some HTML and CSS

  1. By now, your snow person HTML/CSS is probably a hideous mess since we just wanted to make sure we could see how HTML and CSS were working together to render the page. So let’s start over.

    1. Create a new directory (folder). day2 is a good name.

    2. In this folder create an HTML file and a CSS file called snow-person2.html and snow2.css. (Remember to use Atom’s handy template to get your HTML page started. Just type html and hit return.)

    3. In your HTML file, add a few things so your page has something to show.

      • Add a title to the header section
      • Add an h1 element to visibly title your page.
      • Add an h2 element called “Facts about my snow person”
      • In this section, add a list (ordered or unordered) with a few facts about your snow person. Examples: age, favorite food, hobbies, etc.
      • Add a second h2 element with content “Picture of my snow person”

    4. In the header, add a link to your CSS file. (<link rel = "stylesheet" href = "snow2.css">)

    5. To make sure the CSS file is working, add some style to you page. In particular, set the default font for all elements to a font of your choosing. (See this cheat sheet for some possibilities.)

4.2 Adding an SVG element

  1. In the picture section of your document, let’s add an SVG element and two short paragraphs:

    The paragraphs above and below will be it clearer that space (600 “pixels” wide and 400 “pixels” tall) has been made for our picture. Pixels is in quotes because SVG is scalable, so it is possible that the final rendered version will be larger or smaller than this. But by default, this is what your browser will do.

Not to exciting: we have a big blank rectangle.

4.3 Adding simple shapes

The basic shapes in SVG are polygons (including rectangles as a special case), ellipses (including circles as a special case), and line segments. Most other things are built by cleverly combining these.

4.3.1 Circles: <circle ... />

Let’s start by placing some circles into our SVG. To do this we must specify the location and size of the circle. This is done with the cx, cy (center x and y locations), r (radius) properties.

  1. Add three circles to your SVG. You may place them anywhere. Here’s an example.

4.3.2 The SVG coordinate system

You may have noticed that your circles didn’t appear exactly where you thought they would. SVG used a coordinate system where (0,0) is in the top left corner. So larger values of the y coordinate are lower in the SVG. This is backwards from how we usually display data. Stay tuned for good ways to deal with this.

4.3.3 Rectangles: <rect ... />

  1. Now add 2 rectangles. The required properties are x, y, width, and height.

4.3.4 Lines: <line ... />

  1. Now add 2 rectangles. The required properties are x1, y1, x2, and y2.

4.3.5 Text: <text> ... </text>

  1. Now add some text. This uses an opening-closing tag pair. The required properties are x and y, the text to be displayed goes between the two tags.

4.4 Style and Class

4.4.1 Adding style

We can style our SVG by adding additional properties like

  • fill: the color of the “inside” of the shape
  • stroke: the color of the outside border
  • stroke-width: the thickness of the outside border
  • opacity, stroke-opacity and fill-opacity: a number between 0.0 (transparent) and 1.0 (completely opaque).
  • font-size, font-family: properties of the font for text elements
  1. Add some style to your shapes and text by adding additional properties to the tags.

As you might have guessed, we can included SVG styling in our CSS file. That makes it easy to set some style elements across all shapes of a certain kind. For example, to make all circles semi-transparent (but remember the cascade rules), we could use

  1. Add some style to your shapes and text using your CSS file. You may have to delete some of the styling in your HTML file (since that will take precedence over the styling in your CSS file).

4.4.2 Using class

Style and class are a good combination. You can add class properties to your SVG elements and then use class selectors to style them.

  1. Make one of your circles and one of your rectangles have class “special”. In your CSS, style them so that they have a different color from the other shapes. Again, you may need to edit your SVG elements if you had styled them with fill.

4.4.3 SVG and CSS

There is one strange thing about styling SVG inside CSS: the properties are not the same. In SVG we have fill where we used to use color and stroke where we had border. This is a bit annoying, but it’s how it is. To keep things straight in your CSS file, it can be handy to include svg as part of the selector for SVG elements. This makes sure that (a) you remember why you were doing what you were doing, (b) you use the write property names for SVG, and (c) you don’t try to apply those property values to non-SVG elements.

  1. In your CSS file, change .special to svg .special. Now only elements within an svg that are special will get this styling. You could use p.special or .special to style special things in HTML – or you might prefer to uses a different set of class names in HTML and SVG to avoid some potential confusion.

4.4.4 Stroke width, revisited

  1. If you make stroke-width of a circle quite large, does it grow out from the circle, in toward the center of the circle, or in both directions? Modify your circles (or add new ones) to find out.

4.4.5 Snow person, revisited

  1. Let’s clean things up a bit. Feel free to save what you have to a file with another name, if you like. Then delete/modify things to start creating your snow person. You might like to begin by stacking 3 circles on top of each other, but don’t stop there. Be creative. (If you prefer ellipses, see if you can figure out how to create those.) Does the order in which you place the elements matter? Make sure your circles look like snow. How can you take advantage of CSS to make styling simpler? What other features can you add to your snow person using what we now so far?

If you were hoping to do a carrot nose, you may be disappointed that we haven’t talked about triangles yet. Stay tuned.

4.5 Paths

Devdocs has a nice tutorial on paths. You can find it at https://devdocs.io/svg/tutorial/paths.

  1. Read the tutorial and use a path to add a feature to your snow person. For example, you might like to add an orange triangle to represent a carrot nose.

4.6 Groups <g> ... </g>

Suppose you would like to move your snow person a bit. Given how we have been doing things, you would need to go back and change the location of each shape. That’s very annoying.

But SVG allows us to make groups of elements that can be transformed together. Groups can also be given classes that make them useful for styling. Creating a groups is easy. Just surround your group with opening and closing g tags.

4.7 Basic Transformations

Individual elements, and more importantly groups, can be transformed by setting the transform property of the element or group. The most common transformations are translation (moving), rotation, and scaling:

  • translate right 50 and down 20: transform = "translate(50, -20)"
  • rotate 45 degrees: transform = "rotate(45)"
  • double the size: scale(2)
  • do all three: transform = "translate(50, -20) rotate(45) scale(2)"
  1. You might also like to put portions of your snow person into a group. For example, if you added buttons, you could put all the buttons into a group. That would make it easy to move them up or down a bit, or change their color (by giving the group a class and styling with CSS, for example).

For more on transformations, consult one of these

4.8 Resources