Support@SwearenginWeb.Design

Free Download: Lightweight social media SVG code snippets

svg social icons with codes
October 1, 2018 at 11:12 pm

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)

Facebook SVG Icon Code

facebook icon



    facebook icon
    

Google Plus SVG Icon Code

google plus icon



    google plus icon
    

Instagram SVG Icon Code

instagram icon



    instagram icon
    

LinkedIn SVG Icon Code

linkedin icon



    linkedin icon
    

Twitter SVG Icon Code

twitter icon



    twitter icon
    

YouTube SVG Icon Code

youtube icon



    youtube icon
    
        
    

Leave a Reply

Your email address will not be published. Required fields are marked *