example shoe

A test of using a lightweight SVG placeholder image.

The idea was that the SVG path information would be within the HTML of a category page on the website, allowing an outline of the shoe to be shown on the page very quickly, while the images were still downloading. The SVG path data is 680 bytes, compared to the image itself which is 7,773 bytes. It's funky, but probably a waste of time, given the support for lazy loading images. But 5 years ago when I wrote it, it might have been useful for below the fold images.

Other placeholder concepts you can use are to take a colour sample of the product and use that to display a solid colour block until the image loads. You can also use an ultra low quality (or low size) version of the image while the higher resolution image is being downloaded.

I never quite figured out how we were going to create these outline SVGs at scale, given that the website had thousands of styles of footwear.

To be honest, I mostly did it for fun as I was optimising a lot of SVGs at the time. It was a chance to try my hand at some SVG animation, which I would like to do a bit more of. I've got a few ideas of how I could do a cool elevation map for a running blog.

How the animation works

To be honest, I borrowed the concept from Cassie Evans, who wrote an amazing how-to guide on animating SVG paths. However, just to briefly summarise how it works, instead of a solid line for the path, you use a dashed line, but with a gap so far between the dashes that only one appears on the screen. You then animate the offset of the dash and you progressively move the space between your dashes off the screen to allow the line to progressively appear. Genius.

As mentioned in my SVG optimisation test page, SVG code often looks really complicated, this is mostly due to the tools used to produce the markup a)not caring about human readability and b) and not being well optimised. In this example, I have tried to make the code as easy to understand as possible. The M cooridinate set determines the x/y starting point, then all subsequent coordinates after the C are the points in the path. The Z indicates the end of the path.