SVG code (reducing length)

Hi Guys - the main logo on the site I maintain is SVG encoded. I want to replace the code/logo with an updated version. I know how to create the SVG using Illustrator but am damned if I can optimised/reduce the number of lines/characters to be accepted by the HTML editor.

Any help/suggestions gratefully received :slight_smile:


Here is my site Read-Only: [LINK][1]
https://preview.webflow.com/preview/gsais-b86d2683127debd62e850ccca2e05442?utm_medium=preview_link&utm_source=designer&utm_content=gsais-b86d2683127debd62e850ccca2e05442&preview=abb11e3805321ab50ab4555b4f4a0106&workflow=preview

Hi Don, I like how you’ve set it up to apply color from a your Departments collection.
You’ve got a couple of options-

  1. Try compressing your SVG using a tool like SVG optimizer or Nano. I’d set your changeable color value to something unique and easy to find, and then replace that after compression with your Collection Field value so you can get your department-specific coloring.

  2. Host your SVG assets somewhere and SCRIPT-embed the contents inline during page load. That circumvents the EMBED however it will slow your page load with the extra file retrieval and processing, similar to an AJAX approach.

  3. Split your SVGs into colored and white parts. If you can get that to work arrange smoothly for your needs, then you have a smaller SVG and you also have added options like storing the SVGs in your assets, and then coloring one part using CSS filter-effects.

@memetican may thanks for taking the time to respond - much appreciated.

I’m afraid I can’t lay claim to the idea of dynamically changing colours - I inherited the project (which is part of the problem). The issue I’m having is the code snippet displayed in Webflow is fairly neat and succinct, but when I create an SVG file from the revised logo it’s MUCH more complex. Not sure how to decipher :frowning:

Ha, yes SVG code is a lot of fun to navigate. I haven’t tried this, but what I’d do is edit the original SVG, and locate where your path color goes. In that location, put, e.g. COLORHERE or something unique. After you compress it. that should hopefully still be easy to locate in the compressed version, and to replace with your embed codes the same way you have in your current site.

I’ll just add a note there that this is only worth it to a point. You only have 5 departments, so it might just be easier to create 5 colored PNG files, and add them to each department record. Very easy to insert that way, and I doubt they’d change often.

SVG’s are great, but no sense in torturing yourself, your users will probably never appreciate it.

1 Like

@memetican - again, many thanks for the response. Really good advice re. effort/benefit payoff re. SVGs, which I have taken on board.

Since you clearly know your Webflow stuff (and I don’t :slight_smile: -any idea why the JPG logo top left here is slipping behind the hero area when scrolling down. Some form of layering issue?

https://preview.webflow.com/preview/gsais-b86d2683127debd62e850ccca2e05442?utm_medium=preview_link&utm_source=designer&utm_content=gsais-b86d2683127debd62e850ccca2e05442&preview=abb11e3805321ab50ab4555b4f4a0106&workflow=preview