How to add an SVG to Squarespace // Squarespace SVG Tutorial

[@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: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@Human_Evolution-]

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.

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@DirectionPos]

One of the best channels on squarespace

[@InsideTheSquare]

Your comment just made my day - thank you so much!!!

[@BC_CreativeYT]

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.

[@InsideTheSquare]

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: kzbin.info/www/bejne/hKHMnnSXnt1sadE

[@dustinschaefer8408]

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?

[@InsideTheSquare]

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!

[@williammaanders]

Great question, had the same!

[@Human_Evolution-]

@@InsideTheSquare It has been 6 months. Is it possible to add SVG's in the header?

[@williammaanders]

Great tutorials! I am learning so much, so huge thanks to you Becca!!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@mjleyrer]

Think you could do one on SVGs as background images? I don't know if it's allowed but would be super useful.

[@InsideTheSquare]

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

[@wearequbit]

@@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?

[@mavenhouse]

Hi there - is there a way to use this method for the site logo in fluid engine?

[@InsideTheSquare]

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!

[@lorendepalma2113]

@@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: kzbin.info/www/bejne/p2jOgZppoKtjnZI 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!

[@monicacook7306]

@@InsideTheSquare was a solution found for the site logo?

[@lloydvprice]

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?

[@InsideTheSquare]

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/

[@AsSyrIan29]

Hey thank you for your tutorials. One Question, why use SVG and not JPG? you could have a picture with transparent background.

[@InsideTheSquare]

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.

[@carphead7335]

Thanks

[@InsideTheSquare]

You’re welcome!

[@kayleyedwards7738]

Thank you - so useful.

[@InsideTheSquare]

Yay! Happy I could help!🙂

[@MountainTopHomestead316]

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?

[@InsideTheSquare]

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.

[@davekorns]

Awesome. Thanks again.

[@InsideTheSquare]

You’re so welcome - happy I could help! 😁

[@RE-mb7ny]

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; }

[@InsideTheSquare]

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.

[@RE-mb7ny]

@@InsideTheSquare Thank you for letting me know.

[@dshott]

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;}

[@InsideTheSquare]

Glad you got it to work for you - and thanks for sharing your code update! :)

[@ericmccrorey3735]

How do you add images into figma into Squarespace without them looking pixelated or distorted? As a jpeg?

[@InsideTheSquare]

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.

[@frithalewin]

Seriously, they can’t just make a GUI for this in Squarespace? They need to up their game.

[@InsideTheSquare]

Agreed - most of my tutorial ideas are from "why they heck can't it do THAT?!" kinda situations 😅