Quick Tip: Use SVG Files To Speed Up Your Squarespace Site

I’m feeling the need…

The need… for a speedy website.

If you’re reading this and feeling a little déjà vu, then you’re not alone. I’ve written a bit about optimizing the images on your website before, in Skinny Images = A Speedier Site. In that post, I explain how uncompressed images are a fantastic way to slow down the loading of your website.

Skinny Images = A Speedier Site

Every single second counts when someone visits your site. Seriously. According to Think with Google, “…53% of mobile site visits leave a page that takes longer than three seconds to load.” 53%! If your site isn’t loading itself up as fast as possible, not only are you going to lose visitors, you’re going to lose revenue. If people aren’t sticking around because your site is too slow, then they clearly aren’t going to be buying anything from you.

Let’s do something more about that.

A quick note about file formats

SVG files are amazing. Unlike JPGs or PNGs, which are raster formats used primarily for photos, an SVG file is essentially just letters and numbers. If you open a JPG file, you see this:

When you work with an SVG file to add it to your Squarespace site, like we’re doing in this post, you see this:

With an SVG file, you’re dealing with an XML format, so your browser is rendering code. This offers a bunch of benefits, namely that they can be animated, can scale to any size without becoming fuzzy, and can be small files. Like, really small. The same image exported as a JPG is pretty huge compared to an SVG:

712kB compared to just 27kB? That’s a 96% reduction in file size. Pretty crazy numbers.

But that doesn’t mean we should just export everything as an SVG. JPGs are still the clear winner when it comes to photographs. Just make sure to compress them, like I instructed in that blog post I mentioned earlier. For dealing with vector icons and logos, SVGs are a wonderful option.

How to get an SVG file into Squarespace

Let’s talk about how to do this in both Affinity Designer and Adobe Illustrator/Photoshop. The steps are pretty much the same. I’m going to use the image I had used at the top of my main blog page on my old website. Open up a completed vector image in whichever program you prefer.

In Affinity Designer:

1. Click on File -> Export.
2. Select SVG from the options in the window.
3. If you have text in your vector image, then select “Export text as curves for font independence.” This will increase the size of your file a bit, but it’ll ensure your font doesn’t change.
4. Click Export and save your file in your preferred location.

In Illustrator:

1. Click on File -> Export -> Export As…

2. Select SVG in the Format dropdown menu.

3. In the SVG Options menu:

• Styling: Internal CSS
• Font: Convert to Outlines if you’re using an unusual font. SVG otherwise.
• Images: Link
• Object IDs: Unique
• Decimal: 2
• Minify: Check the box
• Responsive: Up to you, but checking it is fine

4. Click OK.

We’ve got our SVG file saved to our computer. Pretty simple so far. Let’s get it into Squarespace. Instead of inserting an Image Block on your site, we’re going to be using a Code Block. Remember, we’re dealing with XML code here.

Insert a Code Block where you’d like your SVG image to appear and delete the placeholder text.

Right click on your new SVG file and tell it to “Open With” TextEdit on Mac or Notepad on Windows.

Copy all of the text from your text editor app and paste it into the Code Block on Squarespace. Click Save on the Code Block window and again at the top of the Squarespace editor.

There you have it. You can adjust the Code Block as you would any other Squarespace block by moving it around the page or dragging the sides of the block. You’ve now got a beautiful image that will always remain sharp at any size.

There’s a whole lot you can do with SVGs. Really, I’m only scratching the surface here. Imagine being able to have the SVG icon you put into your site automatically move around the page, scale up or down, or even change its transparency.

There’s just so dang much you can do with them.

Best of all, they really help cut down on the size of your site’s images. I used a fair amount of SVGs on the old Dandy Cat Design. Pretty much every icon and logo on that site were SVGs. All combined, they were less than 500kB in size. For reference, Squarespace recommends that individual images be less than 500kB. All of my icons are less than that.

Pretty easy to see how that would help speed up a site.

Think small, cats.