Aaron Rolston
March 26, 2021
Articles
→
Technical
How to Add an SVG File as a Logo in Squarespace 7.1
Learn how to add an SVG file as a logo in Squarespace 7.1 for a responsive, high-quality design. Follow our step-by-step guide to upload and integrate an SVG file into your website header.
How to Add an SVG File as a Logo in Squarespace 7.1
↓
Why an SVG?
Why an SVG?
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.
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. Prepare your files
Before you get started with uploading your SVG logo, make sure the file name is both lowercase and doesn’t contain any spaces. This ensures that when you reference the file later on, it’s exactly right (case-sensitive and turns spaces into dashes).
Before you get started with uploading your SVG logo, make sure the file name is both lowercase and doesn’t contain any spaces. This ensures that when you reference the file later on, it’s exactly right (case-sensitive and turns spaces into dashes).
2. 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. This is how your uploaded SVG logo will look.
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. This is how your uploaded SVG logo will look.
3. Upload SVG logo
This part of the process is prone to small errors, so make sure you’re following the steps exactly! See the images below for more context if you’re having trouble.
Add a new Link to your “Not Linked” section of pages.
Title the link “logo” and click the settings cog next to “link”.
Navigate to “File”, find your SVG file and upload it here.
Select your file (make sure it’s checked) and hit save. Once it shows the URL for the file, copy it to the clipboard for later use.
Hit save again on the new link to finish up. (Note: You can delete this link later, so don’t worry about the placement)
This part of the process is prone to small errors, so make sure you’re following the steps exactly! See the images below for more context if you’re having trouble.
Add a new Link to your “Not Linked” section of pages.
Title the link “logo” and click the settings cog next to “link”.
Navigate to “File”, find your SVG file and upload it here.
Select your file (make sure it’s checked) and hit save. Once it shows the URL for the file, copy it to the clipboard for later use.
Hit save again on the new link to finish up. (Note: You can delete this link later, so don’t worry about the placement)
4. Add code to Header Code Injection
Navigate to Settings » Advanced » Code Injection » Header, and paste this:
<!---SVG LOGO--->
<style>
/*Hide PNG Logo*/
.header-title-logo img, .header-mobile-logo img {
visibility: hidden;}
/*Replace with SVG Logo*/
.header-title-logo a, .header-mobile-logo a{
background: url('https://YOURSITE.squarespace.com/s/YOURFILE.svg') no-repeat!important;
background-position:center!important;
background-size: contain!important;}
</style>There are two things that you need to change for this to work:
Replace
YOURSITEwith your site’s unique Squarespace domain.Replace
YOURFILEwith the name of the fils you uploaded.
Hit save and refresh the page, and voilà — your logo is now a crystal clear SVG file instead of a questionable PNG.
Navigate to Settings » Advanced » Code Injection » Header, and paste this:
<!---SVG LOGO--->
<style>
/*Hide PNG Logo*/
.header-title-logo img, .header-mobile-logo img {
visibility: hidden;}
/*Replace with SVG Logo*/
.header-title-logo a, .header-mobile-logo a{
background: url('https://YOURSITE.squarespace.com/s/YOURFILE.svg') no-repeat!important;
background-position:center!important;
background-size: contain!important;}
</style>There are two things that you need to change for this to work:
Replace
YOURSITEwith your site’s unique Squarespace domain.Replace
YOURFILEwith the name of the fils you uploaded.
Hit save and refresh the page, and voilà — your logo is now a crystal clear SVG file instead of a questionable PNG.
5. 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.
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.
