Learn SVG basics

Taimoor Sattar

SVG (Scalable Vector Graphics) is a two-dimension vector-based graphic, ** supports animation and interaction**. SVG can be rendered to any size without loosing quality.

Bitmapped image formats, such as JPEG or PNG, distort as the size increases. In order to display a bitmapped image in a higher resolution, we need a larger matrix and more pixels in the grid.

In HTML, we can write svg as below:

<svg width="960" height="500">

<!-- or -->

<svg viewBox="0 0 960 500">

Using the viewBox attribute, we can define the position and dimension.

In <svg>, we can use the <g> tag to group elements. For example, if we want to apply the certain transformations to the group of SVG elements, we can use the <g> tag.

<svg viewBox="0 0 63 21" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="1">
    <circle cx="10.5" cy="10.5" r="10"></circle>
    <circle cx="31.5" cy="10.5" r="10"></circle>
    <circle stroke="blue" cx="52.5" cy="10.5" r="10"></circle>

In the CSS, we can change the

  background-color: red;

In the above code, we have defined three circles with a stroke width of 1. First, two circles inherit the property as define in the <g> tag. The third (last) circle has the stroke color of blue. To visualize how the above code work, see below:

svg circle

Rather than a circle, we can also draw more shapes in SVG.

Basic Shapes in SVG

In SVG, we can draw seven(7) basic shapes as below:

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

Path in SVG

The <path> element is used to define a path. The below command is available to define the path.

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

In HTML, we can define a path as below:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />

In the above example, the path starts at a position (150,0) with a line to position (75,200) from there, a line to position (225,200), and finally closing the path back to (150,0).

svg path

line in svg

The <line> element is an SVG used to create a line connecting two points.

<svg viewBox="0 0 100 100">
  <line x1="20" y1="80" x2="100" y2="20" stroke="black" />

svg line

Rectangular in svg

The <rect> element is used to create a rectangle and variations of a rectangle shape:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"/>

In CSS, we can style below:


svg rect

Circle in SVG

The <circle> SVG element is used to draw a circle, based on the position and radius. In HTML, we can draw svg circle as below:

  <circle cx="10" cy="10" r="10"/>

svg circle

ellipse in svg

The <ellipse> SVG element is used to draw an ellipse, based on a center coordinate, and both their x and y radius.

In HTML, we can draw SVG ellipse as below:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50" />

svg ellipse

polyline in svg

The element is used to create any shape that consists of only straight lines (that is connected at several points):

<svg height="140" width="500">
   <polyline points="0 100, 50 70, 60 40, 20 0" />

svg polyline

polygon in svg

The element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is “closed”.

<svg height="200" width="200">
  <polygon points="25 100, 120 110, 170 40, 20 0" />  

svg polyline

If you want to draw complex SVG art, you have to be good at math. I prefer to draw SVG on illustration software e.g. Photoshop, Affinity Designer, Gimp, etc. Once you finalize the SVG, you can then export it in SVG format.

About the Author

Written by Taimoor Sattar I'm Taimoor Sattar, a full-stack developer, experience to develop websites in React/JavaScript, Node, and HTML/CSS. You should follow them on Twitter. You can contact me on this page.