SVG & Design Tools: A practical guide
Let’s face it: a good understanding of SVG is a rare skill. Surprisingly often, SVG is treated as just another image format. We use SVG because of its scalability and smaller file size. But in reality, SVG is so much more! To make the best of it, it’s useful not only to learn its syntax but also to understand how SVG is generated by graphic design software. This article will guide you through the entire process of generating SVG with popular design apps and show you how to use them to your own advantage. 

Notes: If not stated otherwise, the content of this article is referring to SVG 1.1 2nd Edition. Some of the points discussed below would not apply to SVG 2, however, it still hasn’t reached the recommendation status, leaving SVG 1.1 as the most up-to-date specification.

This article describes features of three popular design tools: Adobe Illustrator, Sketch and Figma. There are also other tools available supporting SVG that may have other functionalities and implement other solutions.

Why bother about design tools?

SVG is an XML-based markup language and, like any other programming language, can be written and edited in a text editor. So theoretically, as opposed to .jpg or .png files, we don’t need any GUI software to create SVG. However, in a vast majority of cases, using graphic design applications is inevitable. Working with complicated shapes and graphics in a text-based format is utterly possible, but usually would be very tricky and tedious. Therefore, it’s a common practice to use applications such as Adobe Illustrator, Sketch or Figma to design graphics visually and then export them to an .svg format.

So no matter if you’re a designer that codes or a design-conscious developer, a good proficiency in working with SVG requires a bit of knowledge from both sides: design tools and the SVG language itself. To better understand the relation between the two, let’s take a closer look at what graphic design apps have to offer and how their features translate to SVG.

Basic shapes

Many vector graphics are build out of a few basic shapes – grouped, transformed and combined with each other. The table below represents what shape tools are available in Illustrator, Sketch and Figma and what SVG elements they are exported as. 
Illustrator
Sketch
Figma
Generated SVG
Ellipse Tool
Oval
Ellipse
<circle /> or <ellipse />
Rectangle Tool
Rectangle
Rectangle
<rect />
Rounded Rectangle Tool
Rounded
-
<rect rx="…" />
Line Segment Tool
Line
Line
<line /> (Illustrator and Figma)
<path /> (Sketch)
-
Arrow
Arrow
<path />
Polygon Tool
Polygon
Polygon
<polygon /> (Illustrator and Sketch)
<path /> (Figma)
Star Tool
Star
Star
<polygon /> (Illustrator and Sketch)
<path /> (Figma)
-
Triangle
-
<polygon />

Ellipses and circles

One of the basic shapes in every design tool in an ellipse. In SVG, we will find a matching <ellipse /> element, defined by the coordinates of the ellipse’s centre (cx and cy) and two radii (rx and ry). This is what an ellipse looks like in SVG:

<ellipse cx="400" cy="300" rx="250" ry="150"/>


The very special type of an ellipse is a circle. A circle is an ellipse with rx and ry radii equal to each other. SVG has its own <circle /> element that takes one attribute less as there’s only one radius to be taken into account:

<circle cx="400" cy="300" r="250"/>


In case of ellipses and circles, all design tools work the same: Ellipse Tool in Illustrator, Oval tool in Sketch and Ellipse tool in Figma will will all generate <ellipse /> element unless the radii are equal: in such case we will end up with a <circle /> element.

Rectangles and rounded rectangles

Another basic shape common to all design tools is a rectangle. In case of all design tools, using a rectangle tool generates a <rect /> element in SVG. A basic <rect /> is defined by 4 attributes: its x and y coordinates, width and height:

<rect x="150" y="100" width="500" height="400"/>


Notice that while <ellipse />‘s and <circle /> ‘s position is defined by their geometrical centres, the position of a <rect /> is defined by the coordinates of its top left corner. 

Apart from basic rectangles, we often use rectangles with rounded corners. In all three design tools, you can turn a rectangle into a rounded rectangle by applying a border radius to it in the Inspector or the Properties panel.