SVG Basics

Earlier in this site I have mentioned that if you download the SVG version of the icon, then you will be able to style it yourself. All well and good – but how exactly do we do this? For the perplexed and the beginner, I have written a short introduction to using SVGs and SVG icons.

Bézier curves diagram
A diagram of a simple Bézier curve. SVG also utilises Bézier curves to create curving lines on more complex graphics. If you have ever used Adobe Illustrator, then you will probably already have worked with Bézier curves.

It's good to start out thinking of SVGs in terms of a collection of points joined by lines to make shapes. We'll see how to generate curves in SVG later but first, we'll look at regular polygons and simple paths.

Firstly, you should know that SVG stands for “Scaleable Vector Graphic” and that it is an image graphic which is written in XML mark-up language. To follow this introduction, you should really have some basic knowledge of HTML and XML. If not, here are a few links where you can get started to learn these very important internet technologies:

Learn HTML Online

Learn XML Online

Regular Polygons

SVG Predefined Elements

Circle

Creating SVGs by hand in many cases is relatively simple. Open with the <svg> element and the required namespace attribute (you'll need this if you want to view the SVG “standalone”), and inside the tag, place your shape. SVG has some predefined shape elements that are straightforward to use, they are:

  • Circle <circle>
  • Rectangle <rect>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

The following code produces the circle seen below.

<svg xmlns="http://www.w3.org/2000/svg" height="264" width="264">
<circle cx="132" cy="132" r="132" fill="#936e20"/>
</svg>

The cx attribute defines the x-coordinate from the center of the circle, the cy defines the y-coordinate from the center of the circle, and the r defines the radius

 


Square & Rectangle

Use the <rect> shape element to draw rectangles or squares. See the examples below, and note how the styling has been done with a style attribute and various different values. For example; here the fill colour and stroke colour have been defined using the rgb() syntax. You can also use the old faithful hex colour codes.

So here is the SVG code to draw rectangles and squares:

<svg xmlns="http://www.w3.org/2000/svg" width="350" height="140">
<rect width="350" height="140" style="fill:rgb(60,0,200);stroke-width:12;stroke:rgb(12,66,88)" />
</svg>

 


The following code will draw a bounding box of 400 by 180 pixels. Inside, the square is 150px wide and it starts at the (x,y) co-ordinate (50,20). Also, the opacity has been differently set for the fill and stroke colours:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:crimson;stroke:darkorange;stroke-width:16;fill-opacity:0.3;stroke-opacity:0.8" />
</svg>

 


Square with Rounded Corners

The square in the next example is coloured using hex colour codes, has it's opacity set to 70% all over and has rounded corners:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="180">
<rect x="50" y="20" rx="22" ry="22" width="150" height="150" style="fill:#69229a;stroke:#cf406c;stroke-width:22;opacity:0.7" />
</svg>

 


Ellipse

The ellipse is very similar to the circle. An ellipse, however, has an x and a y radius that differ from each other, while a circle has equal x and y radius. The radii are set using rx and ry. The center of the ellipse is set using the coordinates cx and cy.

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200">
<ellipse cx="200" cy="80" rx="120" ry="60" style="fill:#f0c328;stroke:#8f0ca3;stroke-width:12;stroke-opacity:0.6" />
</svg>

 


Line

The line element is used to create a line.

  • The x1 attribute defines the start of the line on the x-axis
  • The y1 attribute defines the start of the line on the y-axis
  • The x2 attribute defines the end of the line on the x-axis
  • The y2 attribute defines the end of the line on the y-axis
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="500">
<line x1="0" y1="0" x2="300" y2="160" style="stroke:rgb(120,66,86);stroke-width:6" />
</svg>

 


Polyline

The polyline element can create any shape that consists of just straight lines:

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="500">
<polyline points="20,20 140,25 120,40 220,80 240,120 400,200" style="fill:none;stroke:orange;stroke-width:3" />
</svg>

 


Polylgon

Polygon comes from the Greek language. "Poly" means "many" and "gon" means "angle" - therefore, this element can make a regular or irregular polygon shape that are 'closed' ie. The lines connect together. Any shape can be produced, as long as it has three sides or more.

For the low-down on SVG Regular Polygons, check out this post by Ana Tudor on Codepen.

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="500">
<polygon points="10,10 60,180 210,160" style="fill:DarkGoldenRod;stroke:DarkOrange;stroke-width:4" />
</svg>

The following example will create a polygon with six sides:

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="500">
<polygon points="10,10 20,110 60,180 210,160 222,100 100,30" style="fill:#8e80d7;stroke:#6d505e;stroke-width:6" />
</svg>

SVG Strokes

SVG Stroke Properties

The Stroke

Basic strokes have a wide number of different properties that handle different aspect of your SVG stroke. There are examples of those listed below:

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-linejoin
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-opacity

 


Stroke-width

The stroke-width property defines the thickness of a line, text or outline of an element:

<svg xmlns="http://www.w3.org/2000/svg" height="120" width="360">
<g fill="none" stroke="SlateGray">
<path stroke-width="4" d="M5 20 l315 0" />
<path stroke-width="6" d="M5 40 l315 0" />
<path stroke-width="8" d="M5 60 l315 0" />
<path stroke-width="12" d="M5 80 l315 0" />
</g>
</svg>

 


Stroke-linecap

stroke-linecap defines which shape the end of an open path will take and there are four value options: butt, round, square, inherit.

<svg xmlns="http://www.w3.org/2000/svg" height="230" width="360">
<g fill="none" stroke="#a1305d">
<path stroke-width="22" stroke-linecap="butt" d="M5 38 l315 0" />
<path stroke-width="22" stroke-linecap="round" d="M5 98 l315 0" />
<path stroke-width="22" stroke-linecap="square" d="M5 158 l315 0" />
</g>
</svg>

Butt Cap Round Cap Square Cap

 


Stroke-linejoin

The stroke-linejoin property defines how the corners will look on paths and shapes. The value-options are: bevel, miter and round.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px">
<polyline stroke-linejoin="miter" stroke="#062951" stroke-width="12" fill="none" points="20,150 50,50 80,150"/>
<polyline stroke-linejoin="round" stroke="#062951" stroke-width="12" fill="none" points="120,150 150,50 180,150"/>
<polyline stroke-linejoin="bevel" stroke="#062951" stroke-width="12" fill="none" points="220,150 250,50 280,150"/>
</svg>

 


Stroke-dasharray

The stroke-dasharray attribute allows us to turn paths into dashes rather than solid lines. Within this attribute you can specify the length of the dash as well as the distance between the dashes, separated with commas or whitespace. In the example below are three circles set with different stroke-dasharray values.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="120" width="220">
<circle cx="60" cy="60" r="50" style="fill:#5694e8;stroke:#16263c;stroke-width:6;stroke-dasharray:6">
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="120" width="220">
<circle cx="60" cy="60" r="50" style="fill:#5694e8;stroke:#16263c;stroke-width:6;stroke-dasharray:12">
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="120" width="220">
<circle cx="60" cy="60" r="50" style="fill:#5694e8;stroke:#16263c;stroke-width:6;stroke-dasharray:20">
</svg>

 


Elements used in svg

SVG Basic Reference

Principal Elements

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

Element Description Attributes
<a> Creates a link around the svg elements. xlink:show
xlink:actuate
xlink:href
target
<animate> How an attribute of an element changes over the animation time. attributeName="the name of the target attribute"
by="a relative offset value"
from="the starting value"
to="the ending value"
dur="the duration"
repeatCount="the number of time the animation will take place"
<circle> Defines a circle cx="the x-axis center of the circle"
cy="the y-axis center of the circle"
r="The circle's radius". Required.
<clipPath> The clipPath element is used to define a clipping path to clip elements. clip-path="the referenced clipping path is intersected with the referencing clipping path"
clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'."
* Clipping Paths and other more advanced SVG techniques are explained on my website: svg.iopan.co.uk (currently in production).
<defs> A container for referenced elements.
<desc> Text-only description for container elements or graphic elements in SVG (may display the text as a tooltip).
<ellipse> Defines an ellipse. cx="the x-axis center of the ellipse"
cy="the y-axis center of the ellipse"
rx="the length of the ellipse's radius along the x-axis". Required.
ry="the length of the ellipse's radius along the y-axis". Required.
font Defines a font.
font-face Describes the characteristics of a font.
<g> Used to group elements together. id="the name of the group"
fill="the fill color for the group"
opacity="the opacity for the group"
<image> Defines an image. x="the x-axis top-left corner of the image"
y="the y-axis top-left corner of the image"
width="the width of the image". Required.
height="the height of the image". Required.
xlink:href="the path to the image". Required.
<line> Defines a line. x1="the x start point of the line"
y1="the y start point of the line"
x2="the x end point of the line"
y2="the y end point of the line"
<linearGradient> Defines a linear gradient. Can be defined as horizontal, vertical or angular gradients. id="the unique id used to reference."Required to reference.
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox')"
gradientTransform="the transformation to apply to the gradient"
x1="the x start point of the gradient vector (number or % - 0% is default)"
y1="the y start point of the gradient vector. (0% default)"
x2="the x end point of the gradient vector. (100% default)"
y2="the y end point of the gradient vector. (0% default)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<mask> Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define sections of the mask. For more information try: "SVG Masks" or "Clipping and Masking in CSS" or http://svg.iopan.co.uk. x="the clipping plane of the mask (default: -10%)"
y="the clipping plane of the mask (default: -10%)"
width="the clipping plane of the mask (default: 120%)"
height="the clipping plane of the mask (default: 120%)"
<path> Defines a path. d="a set of commands which define the path"
pathLength="If present, the path will be scaled so that the computed path length of the points equals this value"
transform="a list of transformations"
<polygon> Defines a polygon. points="the points of the polygon. The total number of points must be even". Required.
fill-rule="part of the FillStroke presentation attributes"
<polyline> Defines a shape that consists of only straight lines points="the points on the polyline". Required.
<radialGradient> Defines a radial gradient. For more information on radial gradients see: "Getting started with SVG gradients" or svg.iopan.co.uk. gradientTransform="the transformation to apply to the gradient"
cx="the center point of the gradient (number or % - 50% is default)"
cy="the center point of the gradient. (50% default)"
r="the radius of the gradient. (50% default)"
fx="the focus point of the gradient. (0% default)"
fy="The focus point of the gradient. (0% default)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
<rect> Defines a rectangle. x="the x-axis top-left corner of the rectangle"
y="the y-axis top-left corner of the rectangle"
rx="the x-axis radius (to round the element)"
ry="the y-axis radius (to round the element)"
width="the width of the rectangle". Required.
height="the height of the rectangle" Required.
style Allows style sheets to be embedded directly within SVG content
<svg> Creates an SVG document fragment x="top left corner when embedded (default 0)"
y="top left corner when embedded (default 0)"
width="the width of the svg fragment (default 100%)"
height="the height of the svg fragment (default 100%)"
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)"
preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)"
zoomAndPan="'magnify' or 'disable'. Magnify option allows users to pan and zoom your file (default magnify)"
xml="outermost <svg> element needs to setup SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""
<text> Defines a text. x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. If there are additional characters after the positions run out they are placed after the last character. 0 is default"
y="a list of y-axis positions. (see x). 0 is default"
dx="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x)"
dy="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x)"
rotate="a list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value"
textLength="a target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length)" lengthAdjust="tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'"
<use> Uses a URI to reference a <g>, <svg> or other graphical element with a unique id attribute and replicate it. The copy is only a reference to the original so only the original exists in the document. Any change to the original affects all copies. x="the x-axis top-left corner of the cloned element"
y="the y-axis top-left corner of the cloned element"
width="the width of the cloned element"
height="the height of the cloned element"
xlink:href="a URI reference to the cloned element"

 

Path Commands

The table below shows a list of possible pen commands for the SVG path element. Each command consist of one letter and a set of numbers which are the command's parameters. In most cases: Uppercase commands interpret coordinate parameters as absolute coordinates. Lowercase commands interpret parameters as being relative to the pen's current location.

Comm.  Parameters Name Description
M x,y moveto Moves pen to specific point x,y without drawing.
m x,y moveto Moves pen to specific point x,y relative to current pen location, without drawing.
L x,y lineto Draws a line from current pen location to specified point x,y
l x,y lineto Draws a line from current pen location to specified point x,y, relative to current pen location.
H x horizontal  lineto Draws a horizontal line to the point defined by (specified x, pens current y).
h x horizontal lineto Draws a horizontal line to the point defined by (pens current x + specified x, pens current y). The x is relative to the current pens x position.
V y vertical lineto Draws a vertical line to the point defined by (pens current x, specified y).
v y vertical lineto Draws a vertical line to the point defined by (pens current x, pens current y + specified y). The y is relative to the pens current y-position.
C x1,y1 x2,y2 x,y curveto Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it curves.
c x1,y1 x2,y2 x,y curveto Same as C, but interprets coordinates relative to current pen point.
S x2,y2 x,y shorthand / smooth curveto Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve.
s x2,y2 x,y shorthand / smooth curveto Same as S, but interprets coordinates relative to current pen point.
Q x1,y1 x,y quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends.
q x1,y1 x,y quadratic Bezier curveto Same as Q, but interprets coordinates relative to current pen point.
T x,y shorthand / smooth quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used.
t x,y shorthand / smooth quadratic Bezier curveto Same as T, but interprets coordinates relative to current pen point.
A rx,ry x-axis-rotation large-arc-flag, sweepflag x,y elliptical arc Draws an elliptical arc from the current point to the point x,y. rx and ry are the elliptical radius in x and y direction. The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values. The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. The sweep-flag determines the direction to draw the arc in.
a rx,ry x-axis-rotation large-arc-flag, sweepflag x,y elliptical arc Same as A, but interprets coordinates relative to current pen point.
Z closepath Closes the path by drawing a line from current point to first point.
z closepath Closes the path by drawing a line from current point to first point.

Grouped svg Circles

Grouping Paths

The <g> SVG Element

The ‘g’ in <g> stands for ‘group’. The group element is used for logically grouping together sets of related graphical elements|. In terms of graphics editors, such as Adobe Illustrator, the <g> element serves a similar functionality as the Group Objects function.

Naming Groups and Applying Styles

Styles applied to the <g> element are performed on all of its child elements, and any of its attributes are inherited by its child elements. It can also group multiple elements to be referenced later.

It's good practice to add an id attribute to give that group a name. As any styles you apply to the <g> element will also be applied to all of its descendants it is easy to add styles, transformations, interactivity, and even animations to entire groups of objects.

As you construct your image, make logical sub-groups and name them too. This way you can reference sections of the image, which can be essential for interactivity or animation. See the example below.


I have created a simple logo in Adobe Illustrator to serve as an example, the image you see below, is the actual svg placed inline in this html document - take a look at the page source if you like - or see the SVG code for the image, below. This is how my edition of illustrator output the SVG in XML.

If you don't have a copy of Illustrator or similar graphic program, where you can save and manipulate SVG images, you could try the free inkscape vector graphics program; open-source and available at: https://inkscape.org/.

Logistics North Star
Note the grouping and sub-grouping of elements. Groups have different, but semantic IDs. Fill colours have been translated into css styles. Note also the font in the style-sheet has been set to serif - In the next example, I have used CSS to create a sans-serif default font and I've re-coloured the artwork.
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 380 200" style="enable-background:new 0 0 380 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EFECD5;}
.st1{fill:#1D88B2;}
.st2{fill:#314598;}
.st3{fill:#FFFFFF;}
.st4{fill:#5BCAE8;}
.st5{font-family:serif; font-weight:700;}
.st6{font-size:33px;}
.st7{font-family:serif; font-weight:200;}
.st8{font-size:29.5px;}
</style>
<g id="Background">
<rect class="st0" width="380" height="200"/>
</g>
<g id="Logo">
<g id="drop-shadow-mid-blue">
<g id="drop-shadow-mid-blue-right">
<polygon class="st1" points="140.5,74.8 108,63.5 150.8,41.3 183.3,52.6"/>
</g>
<g id="drop-shadow-mid-blue-left">
<polygon class="st1" points="70.2,114.3 37.7,103 80.1,78.8 112.6,90"/>
</g>
</g>
<g id="drop-shadow-dark-blue">
<g id="drop-shadow-dark-blue-bottom">
<polygon class="st2" points="109.3,180.4 76.8,169.2 78.4,114.7 110.9,125.9"/>
</g>
<g id="drop-shadow-dark-blue-top">
<polygon class="st2" points="112.6,90 80.1,78.8 83.5,24 116,35.3"/>
</g>
</g>
<g id="star-outline-white">
<path class="st3" d="M183.3,52.6l-27.2,48.7l23,41l-41.3-9.4l-28.6,47.6l1.6-54.5l-40.7-11.6L112.6,90l3.4-54.8l24.6,39.5 L183.3,52.6z M169.6,134.8L151.2,102l21.7-38.9l-34.2,17.7l-19.6-31.6L116.4,93l-33.8,19.4l32.5,9.3l-1.3,43.5l22.8-38 L169.6,134.8"/>
</g>
<g id="star-light-blue">
<polygon class="st4" points="119.1,49.3 138.7,80.9 172.9,63.1 151.2,102 169.6,134.8 136.6,127.2 113.8,165.2 115.1,121.7 82.6,112.4 116.4,93"/>
</g>
</g>
<g id="Text">
<text transform="matrix(1 0 0 1 177.0934 126.0029)" class="st1 st5 st6">Logistics</text>
<text transform="matrix(1 0 0 1 177.0929 95.6538)" class="st2 st7 st8">North Star</text>
</g>
</svg>

 

Logistics North Star

Simply by making a few changes to the stylesheet, I have been able to re-colour the logo and to add a sans-serif font. See the styles below to see what changed:

<style type="text/css">
.st0{fill:#EFECD5;}
.st1{fill:#D4A418;}
.st2{fill:#5C2000;}
.st3{fill:#FFFFFF;}
.st4{fill:#ECD854;}
.st5{font-family:'Montserrat-SemiBold', sans-serif; font-weight:700;}
.st6{font-size:33px;}
.st7{font-family:'Montserrat-UltraLight', sans-serif; font-weight:200;}
.st8{font-size:29.5px;}
</style>

 


Elements used in svg

Drawing Curves

Types of Curves

There are three different commands that you can use to create curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. For a complete description of the maths involved with Bezier curves, you could try this reference on Wikipedia. There are two simple types of Bezier curve used in path elements: a cubic one, called with C, and a quadratic one, called with Q.

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

 


Elements used in svg

Code Placement

Principal Elements

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

 


Elements used in svg

Using SVG Icons

Principal Elements

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

 


Elements used in svg

Re-colouring Icons

Tidying the Code

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

Naming the Parts

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

A Re-colouring Example

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

Changing Hover State with CSS

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.

 


Elements used in svg

Additional Resources

Teach Yourself SVG Online

After looking through the previous examples, you will have come to understand how to use a few of the basic SVG elements and their properties. The table below covers those that we have looked at and has a few more simple elements explained.