SVG (Scaleable Vector Graphics) files are two-dimensional vector based graphics in XML format that was created by the World Wide Web Consortium (W3C). It first emerged in the late 1990’s and was largely ignored throughout the 2000’s until recently. The primary use of these files are for sharing graphical contents online. They are ideal for interactive, data-driven, and personalized graphics. Since these files are vector based, they can be scaled to various sizes without losing their quality.
I first heard about .SVG files from a friend who works as a Front End Developer when I was talking about my infinite love for Adobe Illustrator. He mentioned how it’s a lot easier for him to fix the code versus opening it in Illustrator (he doesn’t know how to use the program very well). This blew my mind because one, I’m new to coding and I would take me a while to figure out where to even start and two, this seemed like such an easy task to complete in Illustrator. I always knew though that my AI files could be saved as a .svg file, but since I am a designer, I never really gave it much thought.
How do I open a .svg file?
The quickest and easiest way to open a .svg file is through a web browser like Chrome or Firefox, however, this won’t allow you to edit the actual files. Another way to open (or create) a .svg file is through Adobe Illustrator. This will open up the file like any other normal .ai file which gives you the capabilities to edit it.
Scaleable Vector Graphics file is similar to HTML in that it is a text file that can be opened in any text editor.
Why should you use .svg files and what are the advantages?
- SVG files are very versatile! They are able to be scaled to any size since it is created with vectors and not pixels. They’re resolution independent and responsive. They are also supported by all the popular browsers that have the capabilities to render SVG images. These files can be searched, indexed, compressed, and scripted.
- SVG files have their own DOM inside the browser. They have a separate document that are positioned inside the normal DOM of the page. This property is important because it allows us to create an image of any size and have it display in another browser, all without having to update the properties inside the SVG.
- Animations can be created with CSS, the Web Animations API in Javascript, or by using the SVG’s ‘<animate>’ tag. By using Javascript, we are able to interact with components inside of SVG files through the separate DOM. Also, we can apply animations with Javascript through the new Web Animations API that allow us to program both simple and complex interactions.
- Lastly, they’re accessible and flexible. SVG files can be very small which helps enhance the performance on the web versus a rasterized graphic image.
Which file format should I use? PNG, JPEG, or SVG?
There are two kinds of graphic images: raster and vector. Raster images are created by individual pixels whereas vector images are created through mathematic equations and geometric primitives that can be scaled to any size, without compromising the quality of the graphic.
There are two types of raster images: JPEG and PNG. JPEG images are good to use when working with photos. They are able to be compressed really small which allows it to load quickly. Every time a JPEG file is compressed, it loses some amount of data, but it isn’t too noticeable which is good. JPEGs aren’t ideal though if you want to have an image with a lot of straight lines since they will look pixelated and jagged.
PNG files are mostly used for graphs and diagrams with flat colors and diagrams that don’t need to be scaled up. PNG files allow for alpha transparency, meaning you can overlay an image in the background. When they are compressed, they don’t lose any data. They aren’t, however, able to be compressed quite as much as a JPEG file.
Since both PNG files and JPEG files are raster images, they’re not ideal for scaling. If you need to display graphics at a higher resolution and you need the flexibility of scaling an image, then use vector images, like a SVG file. SVG files, however, are not good with photos. They’re not able to handle complex elements that are found in photos.
