If you have some basic knowledge about HTML, XML, or even graphics designing, you must have seen the file format SVG or the extension .svg. What is this SVG file and what makes it different from other file formats such as JPEG, PNG, etc?
SVG stands for Scalable Vector Graphics. As you can see, it is a vector-based format. This means that SVG files are resolution independent and can be scaled up or down without loss in quality or sharpness. The SVG format is the W3C standard for web graphics such as icons, logos, some images, even some animations. Let’s get to know this file format in detail.
SVG files are for the internet
The W3C or the World Wide Web Consortium recommends the usage of these files for web graphics. Vector graphics are not like your typical images. Instead of using pixels, it uses a mathematical grid to show basic illustrations. The advantage of vector format is the size of the images can be increased to incredible amounts without any quality loss. The same cannot be done with pixel-based images. I’ll link more articles about vector and raster files if you want to get a better understanding of the two.
Scalable vector graphics file format is compatible with almost all browsers such as Google Chrome, Microsoft Edge, Internet Explorer, Mozilla Firefox, Safari, Opera, etc. This means that you can view (and not edit) SVG files using these browsers. But if we already have PNGs and JPEGs to view images, why do we need a vector graphics compatibility with web browsers?
Why do browsers need to be SVG compatible?
SVG files were not very famous when they first came out, in the late 90s. And almost for the next decade, they did not have much use. This was because back then, the internet was just a place to read things, with minimal graphics. Remember those early 2000s websites?
But as things developed, websites become more graphic-based with animations, with more interactivity. This is when SVG files shined. This format was very capable of showing graphics. But why vector?
We all have different sized screens. You may be visiting this website right now using a mobile phone, or a desktop, or laptop, etc. Different screen sizes require different sizes of graphical elements such as logos, banners, icons, etc. Vector is a great choice for this since the scale of vector elements can be increased without losing the sharpness.
So a desktop monitor with a screen size of 32-inches will display these graphics as sharply as in a small 5-inches screen phone (yeah, 5-inches is considered small these days. Double entendre).
SVG can be created using text!
As you read in the title of the article, you can create images using text. That is true since SVG is based on XML language, an upgraded version of HTML. This means that using a text editor like Pages or Notepad, you can write the XML code to create basic shapes and images, complex too if you are up for it.
Using XML, you can define the size, color, shape, etc of the image. Visit the W3C’s site by clicking here to use the editor yourself to edit an SVG-based image.
SVG converter; Online and software
Viewing and editing an SVG file is one thing, but how do you convert an SVG file to say PNG or JPEG and vice versa? Well, it is quite easy. All you need is a graphics editor (preferably vector-based such as these) or an online converter.
We recommend using Autotracer as it is very simple to use and quite capable of converting to and from SVG format. This is the online editor option that can be accessed using any web browser. What about software?
Adobe Illustrator is what we use to covert vector-based graphics such as SVG files or Ai files (Illustrator) into raster-based files such as PNG, JPEG, or even GIF. You can also use programs such as InDesign, Inkscape, GIMP, CorelDraw, Boxy SVG, etc. If it is a vector-based graphics editor, it will let you edit these files.
You can view SVG files with these programs:
- Adobe Illustrator
- Adobe InDesign
- Inkscape
- GIMP
- File Viewer plus
- CorelDraw
- Corel Paintshop
- Microsoft Visio
- IrfanView
- Google Drive
- File Viewer for Android
- Photoshop (with add-on plugins)
This was all about the SVG file format. In summary, or for TL;DR, it is a vector-based graphics format that makes images using a mathematical grid that allows it to be scaled up without loss in quality. It is lightweight, compatible with all modern browsers, and is mostly used for logos, icons, illustrations, and even animations. SVG stands for Scalable Vector Graphics and it was developed by the W3C or the World Wide Web Consortium and is the standard for web graphics.
