How to use svg logo in Squarespace

Before you begin: just use a bigger .png image instead

Svg file format is known to be superior (e.g. it will not lose sharpness on retina displays), it might not be worth hassle of uploading it for the logo. For example, you can upload 3x size .png logo and it will be same as svg. E.g. if your logo max height is 50px, use 150px height .png file.

Use svg logo

Upload regular image logo

First, we need to upload the regular image logo we will be replacing. It’s needed to define the correct dimensions for the replacement.

Upload svg file(s)

Go to pages → create new link → file → save. More on how to upload files to Squarespace.

You will receive a link e.g. /s/logo.svg

If you will be replacing mobile logo, upload mobile logo svg file too.

At the time of writing, Squarespace has issues with file uploads on trial. If it’s a case for you, you’ll need to convert .svg logo to so-called base64 format and use it instead of the file.

Add the code to replace regular logo with .svg one

Add this code to Pages › Website Tools › Custom CSS. Background-size: contain will make sure that logo doesn’t exceed the dimensions of the original one.

/* Hide current logo */
.header-title-logo a {
  position: relative;
}

.header-title-logo a img{
  opacity: 0;
}

/* Show svg logo */
.header-title-logo a:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  background: url("/s/logo.svg") no-repeat top left;
  background-size: contain;
}

On trial / base 64 we just replace url in background, everything else stays the same:

.header-title-logo a:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjE1MHB4IiBoZWlnaHQ9IjIyN3B4IiB2aWV3Qm94PSIwIDAgMjE1MCAyMjciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+T1BERU1PUzwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMTUxLjYsMjI3IEMyNDMuNywyMjcgMzAyLjgsMTgyLjMgMzAyLjgsMTEzLjMgQzMwMi44LDQ0LjkgMjQzLjcsMC41IDE1MS42LDAuNSBDNjAuMSwwLjUgMC43LDQ0LjkgMC43LDExMy4zIEMwLjcsMTgyLjMgNjAuMSwyMjcgMTUxLjYsMjI3IFogTTE1MS42LDE2Ny42IEMxMDQuNSwxNjcuNiA3NC4yLDE0NiA3NC4yLDExMy4zIEM3NC4yLDgwLjkgMTA0LjIsNTkuNiAxNTEuNiw1OS42IEMxOTkuMyw1OS42IDIyOS42LDgwLjkgMjI5LjYsMTEzLjMgQzIyOS42LDE0NiAxOTkuMywxNjcuNiAxNTEuNiwxNjcuNiBaIE00MDUuNywyMjEgTDQwNS43LDE2Ny42IEw1MDMuOCwxNjcuNiBDNTU3LjUsMTY3LjYgNTkwLjIsMTM3LjMgNTkwLjIsODYuNiBDNTkwLjIsMzUuNiA1NTcuNSw1LjYgNTAzLjgsNS42IEwzMzUuMiw1LjYgTDMzNS4yLDIyMSBMNDA1LjcsMjIxIFogTTQ4NywxMDguNSBMNDA1LjcsMTA4LjUgTDQwNS43LDY1IEw0ODcsNjUgQzUwNy4xLDY1IDUxNi43LDY4LjkgNTE2LjcsODYuNiBDNTE2LjcsMTA0LjMgNTA3LjEsMTA4LjUgNDg3LDEwOC41IFogTTc3Ni41LDIyMSBDODM4LjksMjIxIDg4NC4yLDE3NS40IDg4NC4yLDExMyBDODg0LjIsNTAuNiA4MzguOSw1LjYgNzc2LjUsNS42IEw2MjIuNiw1LjYgTDYyMi42LDIyMSBMNzc2LjUsMjIxIFogTTc0OCwxNjEuNiBMNjkzLjEsMTYxLjYgTDY5My4xLDY1IEw3NDgsNjUgQzc5MC42LDY1IDgxMS4zLDgwLjkgODExLjMsMTEzIEM4MTEuMywxNDUuNCA3OTAuNiwxNjEuNiA3NDgsMTYxLjYgWiBNMTEzNi44LDIyMSBMMTEzNi44LDE2Ny45IEw5ODcuMSwxNjcuOSBMOTg3LjEsMTM3LjMgTDExMzAuOCwxMzcuMyBMMTEzMC44LDg5IEw5ODcuMSw4OSBMOTg3LjEsNTguNyBMMTEzNi44LDU4LjcgTDExMzYuOCw1LjYgTDkxNi42LDUuNiBMOTE2LjYsMjIxIEwxMTM2LjgsMjIxIFogTTEyNDMsMjIxIEwxMjQzLDcyLjUgTDEzMTMuNSwyMjEgTDEzNzkuMiwyMjEgTDE0NDkuNCw3Mi41IEwxNDQ5LjQsMjIxIEwxNTE5LjksMjIxIEwxNTE5LjksNS42IEwxNDEwLjEsNS42IEwxMzQ2LjUsMTM5LjcgTDEyODIuNiw1LjYgTDExNzIuNSw1LjYgTDExNzIuNSwyMjEgTDEyNDMsMjIxIFogTTE3MDMuMiwyMjcgQzE3OTUuMywyMjcgMTg1NC40LDE4Mi4zIDE4NTQuNCwxMTMuMyBDMTg1NC40LDQ0LjkgMTc5NS4zLDAuNSAxNzAzLjIsMC41IEMxNjExLjcsMC41IDE1NTIuMyw0NC45IDE1NTIuMywxMTMuMyBDMTU1Mi4zLDE4Mi4zIDE2MTEuNywyMjcgMTcwMy4yLDIyNyBaIE0xNzAzLjIsMTY3LjYgQzE2NTYuMSwxNjcuNiAxNjI1LjgsMTQ2IDE2MjUuOCwxMTMuMyBDMTYyNS44LDgwLjkgMTY1NS44LDU5LjYgMTcwMy4yLDU5LjYgQzE3NTAuOSw1OS42IDE3ODEuMiw4MC45IDE3ODEuMiwxMTMuMyBDMTc4MS4yLDE0NiAxNzUwLjksMTY3LjYgMTcwMy4yLDE2Ny42IFogTTIwMjMsMjI3IEMyMTAyLjUsMjI3IDIxNDkuOSwyMDkuNiAyMTQ5LjksMTU1LjMgQzIxNDkuOSw5OS44IDIxMDIuNSw5MiAyMDI5LDg2LjMgTDIwMTYuNyw4NS40IEMxOTY4LjQsODIuMSAxOTYwLjMsNzcuOSAxOTYwLjMsNjYuOCBDMTk2MC4zLDU3LjUgMTk2OS42LDUxLjUgMjAwNy43LDUxLjUgQzIwNDguMiw1MS41IDIwNjcuNyw1Ny41IDIwNjcuNyw3NCBMMjE0MC45LDc0IEMyMTM4LjIsMjYuMyAyMDkyLjksMC41IDIwMDguMywwLjUgQzE5MzQuMiwwLjUgMTg4Ny4xLDIyLjcgMTg4Ny4xLDY2LjggQzE4ODcuMSwxMTMgMTkyMy40LDEzMy40IDIwMDUuOSwxMzguMiBMMjAxNi40LDEzOC44IEMyMDY4LjYsMTQyLjEgMjA3Ni43LDE0NC44IDIwNzYuNywxNTggQzIwNzYuNywxNjkuNCAyMDY3LjcsMTc2IDIwMjAsMTc2IEMxOTczLjIsMTc2IDE5NTcsMTY1LjUgMTk1NywxNDkuOSBMMTg4My44LDE0OS45IEMxODg2LjUsMjA2LjMgMTkzNi4zLDIyNyAyMDIzLDIyNyBaIiBpZD0iT1BERU1PUyIgZmlsbD0iI0NCQTVGRiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat top left;
  background-size: contain;
}

Different mobile and desktop logos

If you’re using different logos for desktop and mobile, you’ll need two files to replace two logos:

/* Hide current logo */
.header-title-logo a {
position: relative;
}

.header-title-logo a img{
opacity: 0;
}

/* Desktop logo */
.header-display-desktop .header-title-logo a:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;

background: url("/s/logo-mobile.svg") no-repeat top left;
background-size: contain;
}

/* Mobile logo */
.header-display-mobile .header-title-logo a:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;

background: url("/s/logo-mobile.svg") no-repeat top left;
background-size: contain;
}

Dynamic sections issue

If you have a dark logo, using dynamic header and set first section to dark color, you will see that your logo will become invisible. It’s an issue not only for svg logos, but for all image logos in Squarespace.

We can fix this by detecting header theme and applying some CSS based on it.