How to add an SVG to Squarespace // Squarespace SVG Tutorial
HTML-код
- Опубликовано: 26 янв 2025
- 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 insidethesquar...
-
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: fonts.google.c...
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 RUclips, 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
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 → insidethesquar...
- -
🤩 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 👉 insidethesquar...
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
🥰 SUPPORT MY CHANNEL → paypal.me/insi...
💻 WEBSITE → insidethesquar...
📧 NEWSLETTER → insidethesquar...
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
---
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
This was extremly useful. I have been studying web dev for 2 years and I am still terrible with SVG's, but this made me a little less terrible, thank you.
Yay! So happy I could help! 🙌🏻
One of the best channels on squarespace
Your comment just made my day - thank you so much!!!
Thanks
You’re welcome!
Thank you for your tutorials! One questions regarding SVGs -- what is your favorite method for having an SVG as the main logo on the nav bar?
Hey Dustin! That's a great question! I'll have to brainstorm on this one to create a code and I'm sure it will make a great tutorial so stay tuned!
Great question, had the same!
@@InsideTheSquare It has been 6 months. Is it possible to add SVG's in the header?
awesome video! question: is there a way to update the mobile view of a SVG? for instance; make it be '2vw' on desktop but '20vw' on mobile? otherwise the Mobile SVG is very very small.
Great question! I would recommend adding a media query code to change the size for devices. This tutorial covers the concept, but instead of hiding a hiding, you'll just change it: ruclips.net/video/NpimAaix93o/видео.html
Hi there - is there a way to use this method for the site logo in fluid engine?
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
@@InsideTheSquare Brilliant Becca Girl, your Circle friend here! It would be really great to get an SVG site logo! I came close with this tutorial: ruclips.net/video/q7kPg3kF0g0/видео.html by Adlytic Marketing. It showed up perfectly in the Squarespace browser preview, but when I published you couldn't see it in Chrome or Safari. Would love to learn how to do this because it's so much better vector. Thanks again for all you do!
@@InsideTheSquare was a solution found for the site logo?
Great tutorials! I am learning so much, so huge thanks to you Becca!!
Yay! So happy I could help! 🙌🏻
Think you could do one on SVGs as background images? I don't know if it's allowed but would be super useful.
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
@@InsideTheSquare just stumbled upon this comment - that's a great idea! I don't suppose you made a tutorial covering it.... that escaped my attention?
So for some reason the SVG looks good on the website but then on mobile it's very small. Any idea what's up or how I could fix it?
Interesting! It's hard to say without seeing your site, but if you are using a fluid engine section, make sure the content block the SVG is in is stretched to the right size on mobile view.
Great tutorial, thanks for sharing. One thing I've noticed is that SVGs (and maybe other content?) are not centered vertically within the content box (you can even see it in your video, it's close to the top of the box than the bottom). I have situation that requires precise placement of the SVG in the vertical plane but it's impossible without the icon itself being in the center of the container. So far I cant find out why offset exists and what's causing it, any ideas?
That’s pretty strange - if your site isn’t working the way it’s supposed to, you should definitely contact the Squarespace support team: support.squarespace.com/
Hey thank you for your tutorials. One Question, why use SVG and not JPG? you could have a picture with transparent background.
SVGs are scalable vector graphics that some designers prefer to use so they can resize an object without risking quality. JPG formats can work great for most images, especially backgrounds, and PNGs are the ones that can have a transparent background. Both JPG and PNG image types can be added to an image block, but not SVGs.
How do you add images into figma into Squarespace without them looking pixelated or distorted? As a jpeg?
Hey Eric! If you aren’t using an SVG, then it all depends on the resolution of the image. I would reach out to the Figma support team to see if they can help.
Great video.
1) If I want to add my own svg file such as a logo to Squarespace, for example is this code correct:
// I read that center tag is not used in HTML5.
/
2) Could I use CSS to make it center?
.center {
display: block;
margin: 0 auto;
}
SVG’s are tricky with Squarespace and not compatible with all content blocks. I would definitely recommend converting it to a PNG. For most images, unless you are building for visitors with super advanced graphic displays, a PNG should still look decent.
@@InsideTheSquare Thank you for letting me know.
Thank you - so useful.
Yay! Happy I could help!🙂
Thanks, I would have had no idea how to do this but you summed it up simply, thanks! I exported my svg from illustrator and it had loads of individual shapes (all exported in "wrong" colour). I edited the exported code as follows to change the colour (in case it helps someone else! :
.st0{fill:#010202;}
Glad you got it to work for you - and thanks for sharing your code update! :)
Awesome. Thanks again.
You’re so welcome - happy I could help! 😁
Seriously, they can’t just make a GUI for this in Squarespace? They need to up their game.
Agreed - most of my tutorial ideas are from "why they heck can't it do THAT?!" kinda situations 😅