With the ubiquity of high density displays, SVG has gained much popularity in recent years for its resolution independent rendering of UI elements such as icons and logos. I have been using SVG for some time, always using a vector program like Illustrator or Sketch to manage the shapes and then export the code. The output is often an indecipherable stream of letters and numbers which would be insane to attempt to edit manually. Not all SVG shapes are complex vector paths, however. For some simple use cases, hand coding SVG is surprisingly simple.
Getting your hands dirty with writing SVG manually is a really good way to understand exactly how the shapes are rendered to the screen, which then becomes useful for efficiently implementing design or interaction features such as animating shapes.
In this article, I will cover the basics of writing SVG by hand, with examples of how the shape and attribute syntax can output simple UI shapes.
Shape syntax
Let's begin by looking at the six main SVG shapes:
- line
- rect
- circle
- path
- polyline
- polygon
Line
This syntax translates to "draw a line from x1,y1 to x2,y2" with the following attributes:
- x1
- starting X pos
- y1
- starting Y pos
- x2
- ending X pos
- y2
- ending Y pos
Example
<line x1="0" y1="25" x2="100" y2="75">
Rect
- x
- top left X pos
- y
- top left Y pos
<rect x="30" y="10" width="40" height="80"/>
translates to "draw a 40x80 rectangle with top left corner at pos 30,10".
Circle
- r
- radius
- cx
- centre X pos
- cy
- centre Y pos
<circle r="50" cx="50" cy="50"/>
translates to "draw a circle of radius 50 with the centre at pos 50,50".
Path
- M
- move to
- H
- draw a horizontal line
- V
- draw a vertical line
- Z
- close the path
<path d="M10 10 H 90 V 90 Z"> translates to "move to position 10,10; draw a horizontal line to pos 90,10; draw a vertical line to pos 90,90; draw a horizontal line to pos 10,90; close the path back to the starting point".
Polyline
points a list of X,Y positions
<polyline points="0 80, 20 20, 40 80, 50 5, 60 100, 80 50, 100 50"/> translates to "draw connected lines between the points".
Polygon
Same as polyline, with the path automatically closing to the first position.
Attributes
viewBox is the 'artboard' of the SVG file. A viewBox value of "0 0 100 100" translates to a 100x100 artboard with a top left position of 0,0.
fill sets the background colour and stroke sets the border colour of the shape.
preserveAspectRatio="none" disables the default behaviour of an SVG maintaining the viewBox proportions when resized. This is useful for shapes that stretch in one dimension, such as a line.
width and height are optional attributes for defining size. It is useful to set a width to prevent an SVG from rendering full screen in the absence of CSS. Unlike the inline style attribute, these styles have very low specificity and can be easily overridden with CSS.
<use> is a child element for referencing an SVG defined elsewhere.
xmlns="http://www.w3.org/2000/svg" defines the XML namespace. This only necessary for SVG files and optional for inline SVG.
Common shapes
Chevron
Tooltip arrow
Decorative line
Some Text
Arrow
Pie chart
<circle r="16" cx="16" cy="16">
Curves
Cubic bezier (C)
Quadratic bezier (Q)
Border image
Using SVG as a border image can allow for some visual effects that are difficult or impossible with the border or box-shadow properties, such as positioning a border on the center of a bounding box, rather than inside (border) or outside (box-shadow).