Brown Bag Series: What are SVGs and why should I use them?
Vectors vs Rasters
Before we get into what SVGs are, have a look at the photo above. They are visually the same but in different formats. All scaled to about 300%. The one on the right is a jpeg. It doesn’t look like it’s doing so well at that scale. The one on the left is an SVG. In trying to understand why it looks better scaled up, I’ll try to explain what they are and why you might want to use them.JPEG images are what the designers like to call raster images, (yes, pronounced like the 🇯🇲 ‘raster’).What will an intro be without a definition 😁 What is an SVG (Scalable Vector Graphic)? Well, — actually a markup language, similar to the HTML we love so much. While still a graphic format, it’s way advanced than its raster brethren.
Sample SVG Code — (Image from https://envato.com/blog/svg-animation/ )
You can use your .svg files in lots of places you’d normally use your .png and .jpg files. You can find the current SVG support in modern browsers here. So if you can use them almost anywhere when building apps and sites, why should you bother with them?
“SVG is drawn from mathematically declared shapes and curves and such, so pixels are no limitation." - Chris Coyier
Because SVG’s properties and behaviors are defined in the XML tags, this gives it amazing capabilities. They includeSharpness & Size: Probably the most compelling reason for most people is the ‘sharpness’. In the comparison image used at the beginning of this post, the JPEG version 500 x 500 px was about 110kb. The SVG version was just about 3kb, and that was without optimization. You get a magic file that you could resize at will without increasing file size.Indexability, Compression & Targeting: SVG images, being XML, contain many repeated fragments of text, making them perfect for compression. Targeting inner elements of inline SVGs works the same way you’d target HTML elements.So in practice, you could do cool (basic) things like this 👇👇(tip: Click "rerun" on bottom right of graphics to replay)See the Pen Animated signing of signature (SVG paths) by Gary Hepting (@ghepting) on CodePen.
See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.
Also, awesome projects like d3.js heavily rely on the use of SVGs.So what should you use SVGs for? By now, you should have an idea of what you might want to use SVGs for. SVGs are awesome for logos, icons, illustrations, Charts, Maps. Every day, people come up with amazing concepts and applications for SVGs. The purpose of all of my rambling is to spark some interest in it, hopefully, you’ll try using it in what you’re currently working on.So how do we get the SVGs?Since it’s XML, in theory, we could use any text editor, but it’s not really practical. Most professionals use vector design applications/graphics GUI to design SVGs. My personal favorite being Adobe Illustrator. Others include CorelDraw, Sketch, and Inkscape. But if designing yours is too stressful, you could just get one online from graphic marketplaces.The Noun Project is a great place to start. SVGs found here are great examples what you should use SVGs for.
To use your new file, you could just use them like a jpeg by using them as your src value in your images or as background. For best results and more control, you’re better off embedding the code directly as inline SVG. That way, you’re able to target inner elements of the SVG and manipulate them however you want. This is what we’re interested in! We’ll look at Using SVGs in the next part.Are you familiar with SVGs? Tell us about your SVG projects and please share this so other people can see it!.