Intro to SVG

Reference

February 10, 2018

Fitting with the work we’re doing with D3, now we’re learning about scalable vector graphics aka SVG.

The basic SVG element is placed in your HTML and contains the following:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>

Then you use CSS to define the size of the SVG element:

svg {
  border: 1px solid black;
  width: 800px;
  height: 450px;
}

Lines and curves are then placed inside the SVG element in HTML. Descriptors of some of the basic building blocks are below, and at the very end an example of putting it all together.

Basic SVG Rules

  • If you draw an SVG element outside of the SVG area, it will get cropped or just won’t be visible.
  • SVG elements are drawn top to bottom in the order of the html. To layer elements, the bottom layers must come first.
  • The default fill color for any SVG element is black.

Drawing Lines

To draw a line, identify the coordinates of the starting position (x1 and y1), the coordinates of the ending position (x2 and y2), and the width of the line (stroke-width). The color can also be set with the stroke property.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="100" x2="695" y2="415" stroke-width="5px" stroke="red"/>
</svg>

Note that the (0,0) coordinates are in the upper left corner, and that the y-axis increases in numbers from top to bottom. So the line above would start in the upper left and move to the lower right ends of the box.

Drawing Rectangles

Rectangles (rect) require starting x and y coordinates, a width, height, and optionally rx and ry which give a horizontal & vertical radius to the rectangle corners:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" rx="15" ry="15"/>
</svg>

Additional options are stroke for the border color, stroke-width for the border width, and fill for the fill color.

Drawing Polygons

To draw a polygon, the element requires a list of space-separated points, between which a straight line will be drawn:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
</svg>

Drawing Circles & Ellipses

Circles are determined by the x & y coordinates of the center (cx and cy) and the radius r of the circle. To draw an ellipse, use a separate radius for x and y with rx and ry.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <circle cx="150" cy="150" r="70"/>
  <ellipse cx="450" cy="150" rx="100" ry="75"/>
</svg>

Grouping SVG Elements

Elements can be grouped together by wrapping them in a g tag:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <g stroke-width="5px" stroke="red">
    <line x1="0" y1="100" x2="695" y2="415"/>
    <line x1="0" y1="100" x2="695" y2="415"/>
  </g>
</svg>

In this way, they can be styled as one element either inline in HTML as above, or in CSS.

Rotating SVG Elements

Use the CSS transform property to rotate lines, shapes, or text elements. It should be defined with the number of degrees to rotate, and the x + y coordinates of the point to rotate around.

Adding Text

Text can be added by identifying where it should be placed and then using the <text> element. Other properties can help with placement:

  • text-anchor sets a point where the bottom-middle of the element should be anchored horizontally: start, middle, or end
  • alignment-baseline sets the point where the left-middle of the element should be anchored vertically: hanging (bottom-left), middle, or baseline (top-left)
  • font-size and font-family can be used as they are in normal CSS
  • Colors are set like other SVG elements with fill, stroke, and stroke-width

Putting It All Together

A polygon, circle layers, text, and rotation can all be referenced in this CodePen pen. Here is another pen just to play around with SVG elements.

SVG Path Element

A simpler way to draw SVG elements without taking all of the steps in the above is to use the <path> element, which can contain a very long list of instructions about how to draw the shape.

The main attribute is the d attribute which takes a number of commands indicating where to draw:

  • M moves the cursor from one location to another without drawing anything: M X Y moves it to point X,Y
  • L draws a line from the cursor position to the XY coordinates specified in L X Y.
    • L commands can be chained to create polygons
  • Z closes the path; it’s a shortcut to move the cursor back to the path’s starting point
  • H and V are additional shortcuts to draw horizontally or vertically from the current position
  • There are also several curves which, due to their mathematical principles, would normally be drawn in software which would output an SVG path element, but to list them:
    • Q makes a quadratic Bezier curve
    • C makes a cubic Bezier curve
    • A makes a circular arc and is the most flexible, and also most complex

These commands can also be used with lowercase letters: instead of indicating what X,Y point to go to from the current position, with lowercase letters it indicates how far you want the cursor to go from the current position.

I made some SVG flags using path elements and regular shapes to play around with these concepts. One thing I learned from watching the code-along after: for the UK flag’s diagonal crosses I could have set the starting points outside of the SVG area to avoid making the corners manually. Otherwise I think I did pretty well!

Other Stuff

This week I’ve been working on that other side project and it is deployed! Well a test site is up, and the final deployment will happen this week. I have a few nice-to-haves I’ll be adding in the meantime but overall it’s done, working, and should last a while. I’m really pleased with how it turned out, and I learned a lot!

Up Next

Next in this course we are going back to D3 for the next level, and will be incorporating SVG elements in with the data. I’ll keep adding to the D3 post so that everything’s in one place for reference.

Tags icon Stacked price tag looking things Tags: