How to Replace Images on Your Website with SVG's (and why you need to!)

My life has been changed recently!

I used to spend my days trying to design things with HTML/CSS code and it wasn’t until I recently learned that I can design an image in illustrator, export it as a code + copy the code into my website and it would appear sharp and be responsive.

First off, what is an SVG?

SVG is an acronym for Scalable Vector Graphic.

It’s an image that is written in code so when it shows up on the web it doesn’t appear lossy. It renders sharply. If you have certain design elements that for your website that are difficult to code, an SVG is an excellent option.

I will say there is a huge learning curve with SVGs. To be very transparent, it’s an area I’m very much still in the learning phase. So all this to say, if you don’t do any HTML or CSS this maybe something you pass off to a developer to do.

Let’s just get down to it, here’s how to create an SVG file + add to your website:

Step 1. Create a Design in Adobe Illustrator 

I’m personally still learning how to embed images in SVGs so if you don’t have images in your design, it will be much simpler.

Step 2 - Convert all text to outlines — very important step!

Step 3. Export > Export As…> SVG

Under “Styling” select “Presentation Attributes”. Make sure the box “minify” is checked and box “responsive” is unchecked.

Step 3. Open in the SVG file in TextEdit 

Step 4. Copy the code

Step 5. Log into your Squarespace website and paste the code into code block.

Your image should appear right away and render sharply!

Like I mentioned before, SVGs are kind of a monster to learn about. If you’re not a coder, you may be better off hiring a developer to take care of this for you.