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.



5 Hacks for Boosting SEO

If you have a website of any kind, SEO (search engine optimization) is a non-negotiable. SEO is a hot topic and also a very widely misunderstood one at that. I’ve comprised a short list of quick SEO boosters.

Keywords + Blogging:

Do you ever go to a blog for a recipe or to learn something and you have to scroll through some soccer moms full life story just to get to that info you’re looking for? Well it’s not all for nothing. That soccer mom is actually boosting her SEO by sneaking keywords in as much as she can. I honestly hate writing so writing this blog is definitely a chore for me but it’s absolutely necessary for ranking higher on Google. 

Replace .jpgs with SVGs:

This is one I’m recently learning more about and still have more to learn. SVG is short for scalable vector graphic. What an svg does is makes sure your no images are not lossy or fuzzy. It renders the images sharply and responds to screen sizes. SVGs use code to create an image in which google uses to index. You can learn more about SVG images here.

Linking Throughout Your Website:

Do you notice that I have buttons sprinkled throughout my site to different pages of my website? Google indexes these links and sees multiple sources to access on page.

Linking to other websites (and vice versa). If you collaborate with another business, a great way to gain more exposure for your business is adding a requirement to your contract that your work be credited on their site. Search engines see your businesses name via multiple sources which ranks higher. Likewise, adding other links to websites will provide better search engine rankings 

Creating consistent + relevant content:

This last one is always a little easier said than done. Take a day once a month for your business and focus on creating content for other users. Creating content that people want to consume to your social media, linking to your website will get you more traffic to your site, ultimately bumping you up on search engines.