How to add an SVG to Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

SVGs are scalable vector graphics; image files that can be resized without getting pixilated or distorted. In Squarespace, we can’t add them to an image block, but we can still use them on your site, and this tutorial will teach you how!

To add an SVG, we’re going to open the file in chrome to grab its HTML. That short for Hyper Text Markup Langauge, a simple language that computers use to understand content.

Then we will add a code block to our site. In edit mode, select add block in a page section, or lcick the plus sign in classic editor. If you need a little more context, check out the beginners guide to Squarespace code blocks; this will open in a new tab so you won’t loose this tutorial!

Paste the HTML inside your code block, and use a little more code to resize it so it will look great on every device!

Here is an example SVG code you can add to your site to try this out:

<center>
<svg xmlns="http://www.w3.org/2000/svg" height="25vw" width="25vw" viewBox="0 0 50 50">
<path fill="#333" path d="M11.3 39.4q-1.1 0-1.9-.8-.8-.8-.8-1.9V11.3q0-1.1.8-1.9.8-.8 1.9-.8h25.4q1.1 0 1.9.8.8.8.8 1.9v25.4q0 1.1-.8 1.9-.8.8-1.9.8Zm0-1.1h25.4q.6 0 1.1-.5.5-.5.5-1.1V11.3q0-.6-.5-1.1-.5-.5-1.1-.5H11.3q-.6 0-1.1.5-.5.5-.5 1.1v25.4q0 .6.5 1.1.5.5 1.1.5Zm4.55-5.55H32.6L27.5 26l-5.15 6.35-3.25-3.8ZM9.7 38.3V9.7v28.6Z"/></svg>
</center>

The code above will center the SVG icon inside the content block, because of this center label that we gave it. Remove that part of the code if you want it aligned to the left.

<center> your code </center>

To change the color, add the path color before the path info in your code, like this:

<path fill=”color” path d=… 

You can use a web-safe color name or a HEX color code as I do in the tutorial!

The Google Icons that I use in the video can be found here: https://fonts.google.com/icons

To learn more about resizing your SVG icon, check out this excellent article: https://css-tricks.com/scale-svg/

I recorded a video if you want to see a step-by-step process of adding an SVG icon to Squarspace:

Other Squarespace info you might like:

Beginner’s guide to Squarespace image blocks

Creating colors with code

Free class: how to customize Squarespace with code

Support my blog with a donation on BuyMeACoffee