Today SVG is a standard format mostly because of the web. It is easy to use, most of the graphics editor can export it, and all of the browsers display it well.
But why the Scalable Vector Graphics is this good and why we should use it? In this article, we try to give you a basic introduction about SVG and more.
What Exactly SVG Is?
SVG or Scalable Vector Graphics is an XML based vector image format for 2-dimensional graphics.
XML is a markup language which means for me in this case that an SVG file is mostly (sometimes hardly) readable for humans too; this is important because of this we can animate it on the web with CSS or JavaScript.
The primary territory of SVG is the web. It is well displayed on the internet like any other popular image format. Because it is a vector, it has a lot of advantage in today’s retina display screens.
The most basic usage in a web page/application is a logo or any other simple image (icons or illustrations). Using this format you don’t need anymore the 2x or 3x retina versions of your images. You can save size and get better results.
How Scalable Vector Graphics Is Building Up
In SVG (or any vector based format) you have a lot of essential elements like path, circle or rectangle. These elements make up the final result in a coordinate system with precise positioning.
If you only using a graphics app to edit SVG is not mandatory to know how this format works under the hood but an excellent skill. Knowing this you can build cleaner export which is fun to work with for the developers too.
Some Nice Feature of Scalable Vector Graphics
The list below is far from but can give you some information about why you should use it too!
- Cross-platform, Cross-browser – no matter where you display it. On the phone, Max, Linux, Win or any modern browser, it will work.
- We can animate it from code – this is a big deal on the web. For a good UX, we need micro-animations, for an illustration moving some part of it is spectacular.
- Editable from code – it remains editable from code. If you are a pro, you can write you SVG instead of editing it in a GUI.
- Easily openable and editable in any vector graphics editor – we can use it as a container to share it our files instead of the app-specific file formats.
- It remembers your groups – in an SVG file everybody will see how you organize your projects! 😉
We Should Use It as a Base Format
For a classic vector illustration or icon, we can share our files – like the mentioned logo – in SVG; this is more cross-platform than using Illustrator’s .ai or Affinity’s .affinity format because we can open it with any vector editor or we can edit it directly from code well.
Nowadays the application’s formats are more popular, and this is necessary in a lot of cases, but we mostly overuse them.
If you check out Freepik, you find out that the most files are shared only in .ai and .eps format. It is not a problem by its own, but we should also share an SVG; this is a thing that you start to notice when you want to open big Illustrator files in Affinity. Sure, it is open it, but mostly the layouts and the elements aren’t right.
SVG is an open source alternative to the vector format sharing, and I’m sure we should use it more. Imagine just because you are using Affinity you only share files in vector format just in .affinity format so nobody can view/edit it easily unless he has a Designer.
I think the better way for sharing is a cross-platform and open solution for this as the web proved it. At this point, we should know that the .svg has some drawbacks to the unique formats. These unique formats are the vendor’s own, so they can do whatever they want with it, there no problem because it displays in the editor program. You can embed an image, add texture and then export to PNG or JPG. Different applications support different level SVG export, but this is another topic.
Let’s Use and Export to SVG Too
Here at Pathlove, we share our stuff in SVG too, and this makes them useable for a broader user base quickly. Of course, we have to attentive what we make and how but in the end this is a great solution.