Web Design

How to Use an SVG Logo on Squarespace 7.1

A quick and easy guide to uploading an SVG logo file to your Squarespace 7.1 website.

Apple logo on a silver MacBook Pro
TL;DR

Ever notice that your logo looks a bit blurry on your website, even though you exported it at some insane file size, like a 1000ppi PNG? That’s because Squarespace 7.1 currently only allows JPG and PNG uploads, which aren’t the best for a responsive design. What we need is an SVG file that’ll eliminate any question of clarity, no matter the screen. This workaround enables just that.

1. Add PNG logo

Nothing out of the usual here — upload your PNG logo to the header of your 7.1 site as you would normally. Modify the vertical and horizontal scale to taste, and position as you’d like.

2. Upload SVG logo

  1. Add a new Link to your “Not Linked” section of pages.
  2. Title the link “logo” and click the settings cog next to “link”.
  3. At the bottom of the Link Editor options is “file” — find your SVG file and upload it here.
  4. Select your file (make sure it’s checked) and hit save to close the window — once it shows the URL for the file, copy it to the clipboard (Command + C) for later use.
  5. Hit save again on the new link to finish up. (Note: You can delete this link later, so don’t worry about the placement)

3. Add custom CSS

Navigate to Custom CSS under “Design”, and paste this code:

.header-title-logo img {
visibility: hidden;}

.header-title-logo a {
background-image:
url(https://yourdomain.com/LINK)!important;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;}

This is where that link you copied earlier will come in handy.

Replace that “https://yourdomain.com” with whatever your site’s URL is, and replace “LINK” with the link you just created to the SVG file — you know you did it right if it ends in “.svg”.

Hit save and refresh the page, and voilà — your logo is now a crystal clear SVG file instead of a questionable PNG.

4. Check your work

To check your work, open a new tab of your website (not in Squarespace), right-click your logo, and hit “inspect” at the bottom.

The very first style element you’ll see is the logo (since you directly inspected it) — find the blue-underlined link, which is your logo, and ensure that it ends in “.svg”

From my testing, the new SVG file mimics the sizing of the PNG — so if you want to change the size or spacing, adjust it via the navigation settings as you normally would in setting a logo.