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.

Svg user icon