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!
—
Learn more about custom code for Squarespace in my free class at https://insidethesquare.co/learn
—
To add an SVG, we’re going to open the file in Chrome to grab its HTML. Then we will add a code block to our site, paste the HTML, and use a little more code to resize it so it will look great on every device.
In this tutorial, I am using Fluid Engine, the new editing experience in Squarespace, but this technique will work for any version of Squarespace, even sites built using version 7.
The Google Icons that I use in the video can be found here: https://fonts.google.com/icons
When you edit this code, make sure you adjust the height and width to a responsive value so it will resize on mobile!
Here are the steps from the video:
1. Open the SVG file in Chrome
2. Copy the HTML
3. Add a code block in Squarespace
4. Use HTML to resize it
I can’t paste angled brackets in a video description on YouTube, so I’ve typed out the code that I added without those. If you want to see the whole thing, head on over to my blog at insidethesquare.co/Squarespace-tutorials/SVG
Here is the code we added to resize the SVG:
height=”25vw” width=”25vw” viewBox=”0 0 50 50″ (right angle here)
To center your icon or change its color, you can use HTML.
This code will center it:
(left angle) center (right angle) your code (left angle) /center (right angle)
To change the color, add the path color before the path info that you copied from Chrome, like this:
path fill=”color”
You can use a web-safe color name or a HEX color code as I do in the tutorial!
To learn more about resizing your SVG icon, check out this excellent article from CSS-tricks.com
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
