A scalable vector graphic (SVG) is a vector-based file that can be scaled to any size without losing quality. It is the most basic vector format used by many web browsers.
What are SVGs used for?
SVGs are used to display two-dimensional graphics, logos, charts, and illustrations on websites. You can edit in SVGs in text editors or vector graphics editors like Adobe Illustrator.
Using SVGs for Printing & Vinyl Machines
You can also use SVGs for plotter devices or vinyl cutting machines, like Circut. Devices like Circut allow you to logos and texts into the program directly from Illustrator.
Saving Your Design as an SVG
Before you save a design as an SVG, make sure to flatten your objects and convert your text outlines. As always, remember to keep a backup of your work before you start this process.
SVGs Are Taking Over the Web
SVG is becoming more of a standard across the internet. Not all web browsers have adopted them yet, but we believe SVGs will be read natively by all of them soon.
What Makes SVGs Awesome
One of the coolest things about this file format is that you can plot coordinates right into your HTML to generate an SVG rather than uploading a file. This functionality means you can create animations with Javascript and the HTML canvas form.
Scale Up or Down Without Losing Quality
Another advantage to SVG files is their size flexibility. You can make an SVG bigger or smaller without losing any image quality.
SVGs Are Made Out of Code
Since vector graphics are made out of code, they have smaller file sizes than raster graphics. The coding aspect of SVGs also allows the image (or parts of it) to be animated.
Downsides of SVGs
Unfortunately, SVGs only work with two-dimensional images, so photographs don’t work. Plus, understanding the cross-browser responsiveness required to display the SVG images correctly can be tricky.