Best Practices for SVG images

Design help General
1

Not sure this is the right category for this question

I have been reading about the best files to use for images in websites (actually from the eBook Websites 101), and from my initial understanding, it seems that SVG’s are best for both responsive sites as well as SEO, especially when there is text for example in a logo; since the crawlers will actually be able to capture the text for the store name in the logo (as long as I am understanding this correctly).

Anyway, I have no clue how to use an SVG file for our logo, since it seems to entail importing code as a representation of our vector logo.

What I am interested to know is, with the use of SVG filters as part of our logo (for drop shadows) will this slow down the load time of the site (especially on handheld devices) or would it be better to go with just a PNG file instead?

I have done a search on the Webflow site, but haven’t found much in terms of using and working with SVG files.

Thanks,

Steve

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

To my understanding when it comes to load times, it goes by the file size. If I were you this is what I’d do. Export out your logo in SVG format and PNG and compare file sizes. Whichever one is smaller, stick with that one. I’d always try to stick with SVG files though as they look cleaner on all devices. Hope this helps.

3

I believe that drop shadows in an SVG filter are exported out from illustrator as PNG anyway which will increase your file size. My advice would be to ditch the drop shadows from the logo if possible. If they are integral to the design than you could represent them creatively in a different way, but logo’s as a rule are better when they are simpler.

1 Like