SVG: Scalable Vector Graphics
Scalable Vector Graphics, or SVG, is a vector graphics format that is comprised of shapes, lines, curves, colors, and text. Most of you probably see SVGs on a day to day basis and have no clue that you’re seeing it. They look on the front end, for the most part, like a typical image, or png file. However, the benefits and things you can do with SVGs are substantial. Let’s first take a look into what an SVG actually is, how it is comprised and created, and then we’ll take a dive into all of the fun things you can do with them.
Basics: Vector Graphics vs. Raster Graphics
Raster graphics, also known as Bitmap, or Pixel Graphics, is an image file that has a set amount of pixels. When you scale up or enlarge a raster graphic, the pixels themselves retain their values and will scale up as well, causing antialiasing, or pixelation. You can see this by going to any standard jpg, png or other image and zooming in on it. You'll see the quality degrade and get jagged.
Vector graphics however, work very differently. Vector graphics are created with mathematical calculations from point to point. If you have a curved like for example, the computer will first generate those points, and render a smooth line to those two points. No matter how much you enlarge/shrink/stretch/skew the image, it will retain its smoothness. Every vector graphic is made up of these lines, curves, shapes, colors and text, and are saved in a file called an SVG file. SVG files, when opened in your browser or IDE, are just tons of lines of code, handling the points in the picture’s shapes, lines and colors.
Creation & Implementation
To create vector images, you must use a vector design software. Some very popular ones are:
Adobe Illustrator (Paid — can sign up for 30 day trial)
Adobe XD(Free)
Sketch (Paid — MacOS only — Free Trial)
Boxy SVG (Free — browser based)
Vectr (Free — browser based)
These programs are vector creation programs, meaning they have the ability to export into various vector formats, including SVG. Unfortunately, as popular as Adobe Photoshop is, it’s purpose is creation/manipulation of raster images, so it won't be able to get the job done. If you don’t have any of the above mentioned softwares or other vector illustration software (or artistic talent), you can always find and download a whole plethora of free/paid vector assets from any of the following (but not limited to) sites:
Adobe Stock (Paid assets — Select vectors after you search)
Fontastic.me (Free icons)
FontAwesome (Free icons — Loaded like a font face)
Good ole’ Google Search (Need a SVG logo or image? Append SVG or vector to your image search)***
***Make sure not to just drag and drop the preview image off the image search result, those are not going to be in the proper format. You cannot drag and drop or save SVG images off a website. Generally all these sites will allow you to download the .svg directly.
So what makes SVG so special?
— File Size
Vector files are tiny. In most cases, really really tiny. Due to the fact the image is drawn by your browser, and the file used to draw it is some lines of code, we’re talking about file sizes anywhere from 1/4 of the size of your typical image, if not wayyyy more.
Complexity of the image will cause a variance in file size (a basic simple circle will be a smaller file size (less points) than lets say a vector image of the mona lisa (way more colors/points/lines)). Raster images are large, and the larger the size (pixels) the more detail or pixels the photo will have, increasing the file size, thereby increasing your websites load time. PNG images possess the ability to contain transparent pixels and are compressed less than your standard JPG, which leads to better quality photos but also higher file sizes. This brings us to our next point.
— Vectors are scalable to ANY size
Because vectors are drawn using the coordinates provided in the SVG file, Your browser is able to display your image at any size without ANY pixelation. Seriously try this out. Find a vector image, and zoom in. Keep going. Go until the browser is like “uh if i zoom in anymore you're going to see atoms next to your image”. The lines will still be crisp.
Another benefit is you only need ONE SVG image to use throughout your site. Let’s use an example. Let’s say you have this super sweet logo. Typical usage is a logo in the top right of your page, perhaps negative white, slightly larger, in your footer. Let’s say you also have it throughout the site in different spots, in different sizes, and maybe even use it as a faded background image for a cool style. With jpg/png all of these uses are achievable, but you need to create multiple images for each use case (one for 50x50, 100x100, 500x500, etc etc). The transparent background one will need to be alphaed, and made super large. You could upload one large logo, and use width: “XX”px to size them, however this is extremely bad practice. You shouldn’t use images resized down, due to the fact that everytime you load the image, even with a CS styling resize, it will load at the size the actual image is, and then is scaled down. It will slow down your size massively, and Google Speed Test will yell at you.
With SVG’s you just need one file: the SVG. It can be made any size on the fly, can be made any color, and given any transparency. It can be sized directly via CSS, so you can do things to it that you could NEVER do to a plain, flat photo.
— CSS manipulation & animation
SVGs are a supported file type of all modern browsers, and CSS. This means you can take a basic SVG file, and apply CSS effects to it directly, like you would any other text, div or element on a webpage. This flexibility gives you the ability to do anything your creative little heart wants, on the fly such as color fills, shadows, transitions, animations, strokes; the sky's the limit!
You can also tie in some JavaScript to create conditionals, and on the fly, change colors/sizes right in the DOM. Eat your heart out, JPG.
Animation is also something you can do to the SVGs. You can run basic CSS animations, and set them to animate in when loaded or on scroll. You can also make use of AirBnB’s Lottie and BodyMovin’ After Effects plugin, which allows motion graphic level animations to display right in the browser (Seriously, you can create animations with Adobe After Effects, and export them as SVG animations!).Once again can tie this to user events such as clicks, on load, or scroll, to name a small few. SVG’s animated like this can also be set to infinitely loop, or animated once. Regardless of how you handle your SVG in these formats, they are still, just ONE small SVG file. You’d have to set up embedded movie files with .mp4 to do this with your traditional raster graphics, and you can throw transparency out the window.
— Protection against image thieves
Another additional benefit to SVGs is that the image cannot be right clicked-saved or drag and dropped off the page. The image is rendered in browser, so there is no image actually present. This makes it easier than conventional image protection scripts which disallow right clicks on page. However, users will always be able to use screenshot tools!
Where are SVGs used?
Look at the top left of this page. See that Medium logo? That’s an SVG. Most logos, symbols, icons and elements on major sites are SVGs. This is a very common usage across major websites and companies. Here are some examples from a project at Flatiron School I did. All the images are single SVGs for each type of crypto, and I was able to use it throughout the project and alter how they are viewed.
Limitations
Photographs cannot be converted easily into vectors, therefore for actual photographs or pictures with details, it’s best to just use actual photographs in jpg/png format.
Depending on the platform, sometimes sites like Facebook or Twitter will not auto populate SVG images found on your site (yet), so when you share a site containing those images, the ‘share’ image that generates on the post will not see the pictures. In these cases, it’s good to set up a fallback image, or manually add a standard jpg/png image to the post.
Support
At the time of this writing, SVG is supported in all major desktop and mobile browsers, except older Android specific browsers and the all infamous Internet Explorer 6 through 8.
You could always include your generic png/jpg versions of your artwork, as fallback images, incase for some reason you need older browsers to render your page and not have blank spots.
As the web becomes more and more mobile centric every year, Big initiatives to make websites faster are rolled out, especially when mobile user bounce rates are high when speed is low. Poorly optimized and non-compressed images cause for a major speed bump in these regards. SVG’s are the tool modern website developers need: versatility, speed, power, simplicity, flexibility and most of all, choice.
