SVG: Pros and Cons
Introduction to Scalable Vector Graphics (SVG)
While working on my volunteer project, I have discovered the beauty of Scalable Vector Graphics aka SVG. They are great alternatives to PNG and JPEG. In this blog, I will introduce SVG and give a brief tutorial on how to use them!
What are SVGs?
Scalable Vector Graphics (SVG) is an image format written in extensible markup language (XML) specifically for defining two-dimensional vector graphics. The markup details shapes, texts, colors, lines, curves, etc. SVG images are defined in XML files and can be edited with any text editor. They can also be created with any drawing software. Every attribute and element can even be animated!
SVG was developed by the World Wide Web Consortium (W3C) in 1999. They work work with almost all modern web browsers and works with any device. They are used for logos, icons, and plenty of other user interface elements.
Why use SVG?
Although SVG was developed in the late 90’s, they were not always popular. Lately more and more sites are using SVGs for different UI aspects. So why use SVG?
- Compared to the classic image formats like PNG and JPEG, the beauty behind SVG is its power to scale to any size due to its vector format. SVG are small files and does not lose data or quality when compressed. They can be rendered into any size! That is extremely important when creating and designing responsive web applications.
- SVG can be created in any text editor or code editor.
- SVG can be designed and exported from drawing software.
- SVG are supported by modern browsers.
- SVG images and their behaviors can be manipulated easily. Anything that can be done with other formats can also be done with SVG.
- SVG files are small and easy to render.
What are the disadvantages to using SVG?
As you can see there are a lot of advantages to using SVG. But there are also a few things to consider before using them:
- It works only with 2 dimensional images. Complex images can be very hard to work with. It is not ideal for very detailed images.
- It does not work on legacy browsers, meaning Internet Explorer 8 and below.
Exporting an SVG image
On Figma, you can create and design UI layouts for your web applications. It provides tools for you to design and draw shapes. The images that you create can even be exported as an SVG! I will show an example:
Under the design tab, at the bottom you can export the image you have highlighted. In the drop down menu, just pick the SVG as the format you would like to export. And finally hit that export button. The file will automatically be downloaded.
Next you can drag and drop it into your code.
You can rename the file into whatever you want just make sure to label it as an SVG file. Now we can start adding it to our web page!
Using the <img>Tag
And here is the result:
Using Inline Tags
Another way you can use the SVG image is to insert it directly! You can copy the code in the SVG file and simply copy and paste it in the HomePage file.
This would get the same result as above! (Fun fact: This method greatly reduces the load time!)
Using SVG as an <object>
Using an SVG Image as a Background
Finally you can add a SVG image as a background.
Once you import that css file, this is the result:
Of course, if you do not want a repeating image you can add no repeat or any other css manipulation that you want.
Conclusion
And thats it! I hope you were able to take away the importance of SVG images and the many advantages that they have over other image formats. See you later!
