Why I started using SVG’s
Reducing HTTP requests is a great way to speed up your website. By utilizing inline SVG (Scalable Vector Graphics) on your website, you can reduce HTTP requests and skip the tedious process of creating additional higher DPI graphics, and you also don’t have to use a third party plugin that loads more scripts and files. These SVG’s will look extra crispy on every display and they can be altered via CSS to your heart’s desire.
Don’t forget to set the dimensions
When creating SVG’s, it’s important to set the width and height based on the pixel dimensions you plan on using. If you do not explicity declare the width and height dimensions, the graphic will stretch dynamically to the maximum width of its container, which is an undesired effect in most of my cases. These dimensions can be scaled up or down losslessly, but you must ensure that you maintain a consistent aspect ratio so the graphics do not become distorted.
Adobe Illustrator has a handy SVG export tool to generate the SVG code snippets and files
I created and exported these icons in Illustrator. You can simply copy and paste the following SVG codes into your website and modify the colors as desired by changing the fill attribute’s hex code inside the inline style. To make the SVG code even more light weight, simply remove the line breaks in the code. I’ve added line breaks in the snippet references below for the sake of readability, but the SVG snippets in the zip file are minified.
Click here to download the SVG snippets in one HTML file (3KB)