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.

The history of the SVG starts in the late 90s. Now let’s dive into the backstory of how SVG icons came to be. This is why using SVG for icons is a great idea! Since people browse apps and websites on different devices, it’s important for icons to resize accordingly-without getting pixelated or blurry. When we talk about the perfect icon, we have to mention scalability. Icons can replace entire sentences and show an action in one single glance (e.g. They help visitors to navigate pages and have a great user experience. And that’s how SVG icons come to life.Īs for icons, they’re tiny symbols that can play a major part in your web design.

To create different images, you can combine shapes and layer them on top of each other. Once you know the code equivalent of these shapes, it becomes relatively easy to draw an SVG element. All SVG images are based on universal shapes, and you can “draw” them digitally by using numbers and coordinates.Īll SVG drawings are formed using seven main shapes: If I ask you to draw a rectangle, you know exactly what to do. Let’s explain that again, but a little less techy this time. The image is drawn from a set of coordinates. 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). Scalable Vector Graphics (SVG) is a vector image format that can be drawn using the eXtensible Markup Language (XML) syntax. To answer the question: “What are SVG icons?”, we first need to explain the SVG part. We’ll also show you how to create and style SVG icons in Ycode. You’ll learn the benefits of SVG and how they differ from icon fonts.

Here at Ycode, we love using the SVG format for icons. Especially in web apps, where icons are often preferred over written text. Seeing an icon of a home, shopping cart or telephone will instantly resonate with website visitors. These small images can indicate actions and information in a much faster way than words. When building a no-code project, you’ll probably find yourself inserting icons at one point or another.

User icon svg code