Testing schuh logo svg optimisation

Typically, SVG path information exported from a program like Photoshop or Illustrator is not well optimised for reduced byte count. I wanted to test the theory that rounding coordinate values would have no visual impact on the resulting image, but could significantly reduce byte count.

An example of a poorly optimised SVG icon was a magnifying glass shape, for the site search. Illustrator had output a path containing many points. I changed this to a circle and a line. Visually, they were identical (not just close, but exactly the same) and the byte count went down by a factor of 10. It also made the SVG much more understandable, I think SVG code is often very opaque due to the overly complex markup outup from tools like photoshop. Unlike say, JPEG, there is the opportunity to make SVG code human readable.

Can you tell the difference between the logo with the values rounded and the original?

The first logo below is the optimised one, which uses 1253 bytes. The original is below, it uses 1773 bytes. That is a 30% saving, it may just be 520 bytes in this case, but multiply that up across all the SVGs on your site and it becomes meaningful. It is particularily meaningful if you are trying to decide whether to add the SVG code directly on the HTML page, as you wouldn't want to bloat the HTML unnecessarily.

SVGs are great but,like most code which is auto-generated, they need to be treated with caution and sense-checked.

Why do I like SVGs? Well, you can represent some fairly large, complex shapes with not much code. They are visually very sharp and don' suffer from comprssion issues. You can also generate and minipulate them using code, see my animated outline image placeholder as an example. It reminds me of my very first computing experience, using Turtle Graphics on a BBC computer in primary school 35 years ago.