Let’s talk SVG icons: Why and how to use (and create) them

When building a no-code project, you’ll probably find yourself inserting icons at one point or another. 

These small images can indicate actions and information in a much faster way than words. Seeing an icon of a home, shopping cart or telephone will instantly resonate with website visitors. Especially in web apps, where icons are often preferred over written text.

Here at Ycode, we love using the SVG format for icons. In this article, we’ll tell you why! 

You’ll learn the benefits of SVG and how they differ from icon fonts. We’ll also show you how to create and style SVG icons in Ycode.

What are SVG icons?

To answer the question: “What are SVG icons?”, we first need to explain the SVG part.

Scalable Vector Graphics (SVG) is a vector image format that can be drawn using the eXtensible Markup Language (XML) syntax. The XML part is important here. An SVG is not a fixed-size pixel image, but an XML code block that is directly served to and rendered within a browser (and thus: scalable). The image is drawn from a set of coordinates.

Let’s explain that again, but a little less techy this time.

If I ask you to draw a rectangle, you know exactly what to do. Rectangles are universal shapes. All SVG images are based on universal shapes, and you can “draw” them digitally by using numbers and coordinates.

All SVG drawings are formed using seven main shapes:

• Circle

• Ellipse

• Line

• Path

• Polygon

• Polyline

Once you know the code equivalent of these shapes, it becomes relatively easy to draw an SVG element. To create different images, you can combine shapes and layer them on top of each other. And that’s how SVG icons come to life.

As for icons, they’re tiny symbols that can play a major part in your web design. They help visitors to navigate pages and have a great user experience. Icons can replace entire sentences and show an action in one single glance (e.g. the Home button).

When we talk about the perfect icon, we have to mention scalability. Since people browse apps and websites on different devices, it’s important for icons to resize accordingly—without getting pixelated or blurry.

This is why using SVG for icons is a great idea!

Now let’s dive into the backstory of how SVG icons came to be.

The rise of SVG

The history of the SVG starts in the late 90s. The image file format had its web debut around the same time as when Tamagotchis, iMacs, and Palm Pilots made their way into our households.

However, the file format’s popularity was a far cry from that of the technology devices. Most web browsers didn’t support SVG formats and had no intention of doing so. This remained to be the case for a long time. 

It wasn’t until 2017 that web browsers started rendering SVG without any issues. And things were moving pretty fast ever since.

Nowadays, SVG image formats are widely used and supported—finally getting the recognition they deserve!

TIP: On the website Can I use…, you can check which browsers support SVGs. Currently, Internet Explorer 6-8 and Android Browser 2.1 - 2.3 are not supported. As for SVG fragment identifiers, you might have issues with some Safari, IE, Chrome, Firefox browser versions.

Why web folks love SVG

SVG icons are different from PNG and JPG because SVG files aren’t limited by rasters. A JPG image is designed within certain boundaries and therefore has a fixed size. If you’d want to enlarge that image, a loss of quality is often inevitable.

SVG icons were never designed within certain “walls”, and can therefore be scaled indefinitely.

But that’s not the only reason why designers and developers love SVG.

SVG formats are:

• Easy to create (whether with a text editor or drawing program)

• Pixel-perfect in any resolution (images are resolution-independent)

• Zoomable (without losing their quality)

• More flexible and versatile than other graphic formats

• Searchable, indexable, scriptable, and compressible—aka great accessibility for screen readers and search engines

• Part of the W3C standard (main international standards organization for the World Wide Web)

The benefits of using SVG icons in your web design

As we mentioned earlier, SVG files are pure XML code. If you’d open the text file of an SVG icon, you would see things like numbers, colors, and shapes described. This SVG characteristic is why web designers and developers love to work with SVG icons.

Let’s look at a few reasons why you should use SVG icons in your Ycode project.

#1 Flexible: SVG files can be easily read by humans, and are just as easily edited and manipulated using CSS or Javascript.

#2 Animatable: Continuing on #1, this flexibility also means you can use CSS, Javascript (through the Web Animations API), and tags to make SVG icons animatable.

#3 High-resolution: Because SVG images aren’t really “images” but code, they’re resolution-independent. Your icon will be crystal clear whether viewed on a Samsung Galaxy phone or an iMac Pro.

#4 Time saver: Web designers will especially love this about SVG. As these icons scale automatically, there’s no need to create separate @2.png images. You just need one file for all icons.

#5 Lightweight: Of course, the size depends on the complexity of the file, but when optimized, SVG can be a lot smaller than other image file types.

SVG icons versus icon fonts

When it comes to icons, you don’t need to use or create your own SVG icons. A common practice is to work with icon font libraries. But which one is the best icon format? 

Let’s first look at the similarities.

Since fonts are vectors, you’ll have zero issues with scaling when using either SVGs or icon web fonts. Both options are also widely supported, with very few display issues. You can also easily find an icon library and download free icons, both fonts and SVGs. Just make sure that your icon pack allows commercial use, and if not, make sure to pay for the icons.

And lastly, both formats are small in file size—though icon fonts are typically the smallest.

Now as for the differences.

One big difference is that with premade icon sets, you’re more limited when it comes to design. SVG files support (multi-)colors, gradients, styling, and animation. Icons support coloring, animation, and transforms as well, but to a much lesser degree.

When it comes to rendering, you might face text anti-aliasing issues with icon fonts, as browsers treat them as text. Anti-aliasing is the practice of smoothing the edges of fonts to make them more readable. Great for fonts, but you might not want your icon affected by this. An SVG, on the other hand, is rendered as vector artwork.

Both options can be used, but if you’re looking for more versatility, SVG is the preferred choice.

Creating SVG icon shapes

Now for the technical part. Let’s get into how to create SVG icons. 

For designers and those working mainly with front-end code, it can be quite intimidating to edit SVGs. What on earth are all these numbers and letters mentioned in between the viewbox and path quotations? ¯\(ツ)/¯

Luckily, you don’t have to understand. There are two ways to create SVG icons: by hand or using a tool. The latter is the easier option that involves practically no code.

When you’re using a vector image program, you draw your icons on a virtual drawing board using different shapes, colors, and path manipulation. Then you export your .svg file and you’re done. The coding part is all done in the background.

Some examples of vector image programs are:

• Inkscape

• Sketch

• Adobe Illustrator

• Method Draw

• Vecteezy

• Vectr

You can also download ready-made free SVG icons, for example from this Evernote list. 

If you’re curious about learning what’s going on under the hood, keep reading.

The anatomy of an SVG icon

Though we won’t teach you how to draw SVG icons by hand in this article, we will explain the basics, so you can understand what’s happening in the XML code. 

When you use SVGs with their code directly in the HTML document (aka, you’re not importing them from a file), this is called inline SVG.

As an example, we take a rectangle shape. This is one way to write the code for an SVG:

SVG icons are always created using tags.

With the viewBox attribute, you can define the position and dimension in the SVG viewport. In our example, the “0 0” numbers indicate that the SVG element is placed at the top left corner. Then the “500 120” numbers are the width and height of the SVG element

At times, you'll also see the following attributes within a code:

• Xmlns, short for “XML namespace”. It’s followed by an identifier (the URL). The namespace can be used to differentiate between elements by giving them a unique name

• Version,referring to the SVG version (either 1.0 or 1.1). You will only see this mentioned within the

• Standalone, indicating whether the SVG document refers to an external file or is standalone

Then we come to the part, you use this tag to indicate drawing a rectangle shape.

Within these tags is where the x-axis (pointing towards the right) and y-axis (pointing down), as well as the SVG width and height are set. The width and height are defining the dimensions of the shape, while the x and y are defining its position. 

Now, you might also come across rx= and ry=, this stands for radius. Setting a value will result in the sides of the rectangle being curved.

To further style your rectangle, you can use the “style=” tag and add things like:

• fill:rgb(255,0,127)

• stroke-width:3

• stroke:rgb(0,0,0) stroke and stroke-width

Or, alternatively, you can set class names to the

Example:

How to use SVG icons in Ycode

For your final piece of knowledge, you need to know how to use SVG icons in your Ycode webpage. 

What’s great about Ycode is that you can change the color of SVG icons directly within the no-code builder, creating your own custom icon. Not with tricky HTML edits, but simply by changing the background color in the design settings.

How to insert SVG icon files

This one’s easy. You can insert SVG images into your web projects like any other image. You have the option to upload icons or the SVG code.

Click for instructions on how to add SVG icons as images in Ycode.

How to edit SVG icons

After uploading your SVG icons, you can edit the color and icon state. The colors are changed via the Background feature in the Design tab. See how this works in the video tutorial below.

For customization to the hover state, you first need to change from a neutral to a Hover state in the Design tab. Select the state, and then edit the icon as preferred. Navigate back to the neutral state to see how your icon changes when hovered over.

SVG: Shape, view, go!

So what’s your verdict, do you like SVG icons as much as we do? Hopefully, this article inspired you to start using SVG icons in your web projects—and maybe even to create some of your own!