Blog

How to add a Vector Logo to your Website using CSS3 and a Scalable Vector Graphic (SVG)

Your logo is the most important piece of your overall branding and is usually the first statement a website visitor will most likely identify with. You of course want your website’s logo to stand out and grab someone’s attention and you definitely want it to look clean and crisp across all devices. So how do you achieve this when so many of today’s devices utilize different display settings? The best current method is to use Scalable Vector Graphics (SVG) and apply them as background images to HTML elements using CSS3. In this tutorial we will teach you how to add a vector logo to your website using CSS3 and a Scalable Vector Graphic (SVG).

STEP 1: Create and save your SVG logo file

In Step 1, you will need to create and save your SVG logo file; this can be done using Adobe Illustrator. If you need help with this step, please reference the Adobe help link below:

Adobe Illustrator Help (Export SVG)

STEP 2: Create an HTML element for the logo

In Step 2, we will be creating an HTML element for the logo. We prefer to utilize the H1 tag for SEO purposes, but please note you can utilize any HTML element you want for this method. Another standard practice of ours is to link the logo to the homepage, if you choose not to link your logo you will need to modify the method below.

HTML

<h1 id="logo"><a href="YOUR-WEBSITE-LINK">YOUR-WEBSITE-TITLE</a></h1>



Items to Note:


    

  • Any HTML element can be utilized.
    • 

  • You can use either a CSS ID or CLASS on the logo element.
    • 

  • Any HTML element can be utilized.
    • 

  • You don’t have to link your logo but you will need to modify the code if you choose not to.
    • 

  • Change ‘YOUR-WEBSITE-LINK’ to your website’s homepage URL.
    • 

  • Change ‘YOUR-WEBSITE-TITLE’ to your website’s title or company name.
    •

STEP 3: Use CSS3 to style and add the SVG file as a background to the logo element

In the final step we will use CSS to style and add the SVG file as a background to the logo element we created in Step 2.

CSS

h1#logo{
width: YOUR-LOGO-WIDTH;
height: YOUR-LOGO-HEIGHT;
float: left;
padding: 0;
margin: 0;
text-indent: -9000px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1#logo a{
width: 100%;
height: 100%;
display: block;
background: url(YOUR-SVG-FILE-URL) no-repeat center;
}



Items to Note:


    

  • Make sure that you are referencing the same CSS ID or CLASS placed on your HTML element.
    • 

  • Change ‘YOUR-LOGO-WIDTH’ to your logo’s width.
    • 

  • Change ‘YOUR-LOGO-HEIGHT’ to your logo’s height.
    • 

  • Change ‘YOUR-SVG-FILE-URL’ to the URL path where your logo SVG file is located.
    • 

  • You can adjust padding and margin as necessary but keep in mind padding will affect the overall size of the logo.
    • 

  • Setting ‘text-indent’ to -9000px will hide the text placed inside our HTML logo element.
    • 

  • Using ‘box-sizing’ helps to control overall sizing, if you do not know about ‘box-sizing’ we suggest that you look it up since it is very helpful with regards to responsive design.
    •

Full Code

HTML

<h1 id="logo"><a href="YOUR-WEBSITE-LINK">YOUR-WEBSITE-TITLE</a></h1>



CSS


h1#logo{
width: YOUR-LOGO-WIDTH;
height: YOUR-LOGO-HEIGHT;
float: left;
padding: 0;
margin: 0;
text-indent: -9000px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1#logo a{
width: 100%;
height: 100%;
display: block;
background: url(YOUR-SVG-FILE-URL) no-repeat center;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.