Why & How To Use An SVG As Your Logo In Squarespace

When you have a logo that’s more than just a word, something with details, accent lines, or even multiple lines of text it can often lose some of its sharpness and detail when uploaded to Squarespace. That’s when an SVG comes in handy. An SVG file is a Scalable Vector Graphic. Basically, all you need to know is that instead of a typical image file, and SVG is made up of code, so if you use it on your website it’ll always be sharp. Here’s how you can create an SVG of your logo and upload it to Squarespace easily.

** For this to work you will need backup image set as your logo in Squarespace. The code I show below is to replace an already existing logo image with an SVG. THIS WILL NOT WORK WITH A "SITE TITLE".

Step 1: Create your SVG

To create an SVG it’s as simple as saving your logo in a different file type in a program like Adobe Illustrator. You simply select the item you want to export, choose  File > Export Selection and select SVG from the options. If you're using a logo (as opposed to text that you want to be able to be indexed) it's best to select “outline text” so that any fonts that aren’t uploaded in your website will still display correctly.

Step 2: Upload your SVG to Squarespace

To upload your SVG you’ll want to create a button on any page, and select Files > New File and import your new SVG. Be sure to select “Open In New Window”. Save the page and click the button to open the SVG in a second tab or window. Copy the link, it should look something like this:

https://static1.squarespace.com/static/598e683e893fc0867d7224d3/t/59bd71d0a9db092e095c62c0/1505587669567/Asset+67.svg

Screen Shot 2017-09-16 at 1.48.01 PM.png

Then, you can go back into the page editor, and delete the button. It won’t affect your link, and you’ll be able to paste it into the code below to make your SVG your site’s logo.

Step 3: Set your SVG as your logo using custom CSS.

With the code below, you can replace your logo in both the full and mobile versions of your site with your SVG. You might have to adjust the padding, to make the logo centered within your header. Simply paste the link in place of the two below, and paste all of the code in Design > Custom CSS on your Squarespace site.

Screen Shot 2017-09-16 at 1.47.03 PM.png

The top line of code for example (Header-inner--top .Header-branding) and (.Mobile-bar.Mobile-bar--top img.Mobile-bar-branding) varies by template, so if this code does not work, comment your template below and we will add the version that will work for you! Each template has a different name you will need to use to make changes to the logo element.

Example 1: Rally Template - Left Aligned Logo

/*This is the code that sets the SVG as the logo. You can adjust the width with px or percentages to make it the size you want, and adjust the margin, position, and padding to position it where you want.*/

html.svg .Header-inner--top .Header-branding
{width: 250px !important;
display: block;
background-image: url('https://static1.squarespace.com/static/59bddea93e00bee05f906d9a/t/59c730f8be42d656a954e947/1506226424529/Asset+96.svg');
background-repeat: no-repeat;
background-position: center center;
padding-bottom: 7%;
margin-left: 3%;} 

/*This hides the image logo.*/

html.svg .Header-inner--top a img.Header-branding-logo
{display: none;}

/*This is the code that sets the SVG as the logo in the mobile version of your site. You can adjust the width with px or percentages to make it the size you want, and adjust the margin, position, and padding to position it where you want.*/
@media only screen and (max-width: 640px){
html.svg .Mobile-bar.Mobile-bar--top .Mobile-bar-branding
{display: flex;
width: 230px;
background-image: url('https://static1.squarespace.com/static/59bddea93e00bee05f906d9a/t/59c730f8be42d656a954e947/1506226424529/Asset+96.svg'); 
background-repeat: no-repeat;
background-position: center center;
padding-bottom: 13%;}
 /*This hides the image logo on mobile views.*/
html.svg a img.Mobile-bar-branding-logo
{display: none;}}

Example 2:

Here is the code I used for the Five template, to make a centered SVG logo in the banner area.

/* Centered SVG in Banner Area */
html.svg #banner-area-wrapper #banner-area #banner-wrapper a
{display: flex;
background-image: url('//static1.squarespace.com/static/597fe97144024358e2c8dbc6/t/5a0ff2c3ec212df52574cc35/1510994627044/Asset+9.svg');
background-repeat: no-repeat;
background-position: center center !important;
height: auto;
width: 100%;
padding-bottom: 10%;
 } 

html.svg #banner-area-wrapper #banner-area #banner-wrapper a img {display: none;}

body.canvas-setting-full-width #banner-area
{max-width: 600px;}


/* Mobile SVG */

.Mobile-bar.Mobile-bar--top {padding-top: 20px !important;}

@media only screen and (max-width: 768px) { html.svg #banner-area-wrapper #banner-area #banner-wrapper a
{display: block;
background-image: url('https://static1.squarespace.com/static/597fe97144024358e2c8dbc6/t/5a0ff2c3ec212df52574cc35/1510994627044/Asset+9.svg'); 
background-repeat: no-repeat;
background-position: center center;
height: 0;
padding-top: 30px;
padding-bottom: 30px;}}

@media only screen and (max-width: 768px) {
html.svg #banner-area-wrapper #banner-area #banner-wrapper a img {display: none;}}

 

You Might Also Like...

Share This Post