Creating the clone Blogger homepage, it became apparent to me that, despite the large number of images in the original site, it's probably best to avoid using source images for copyright reasons. I considered my options: should I substitute them all with lookalike royalty-free clipart, no matter how long it took? Should I condense/truncate my version to reduce the number of substitutions needed?

After careful consideration, I made the call to substitute all images — not with clipart, but with illustrative geometric shapes. The shape colours would be representative of every image they replaced, and have similar drop shadow effects where applicable. As the original site used the srcset attribute for responsive img elements, I figured I would do the same as good practice in learning how srcset works and in creating optimised images for the web. The process of creating these raster images was tedious but simple. 

Eventually, the time came to tackle substituting SVG elements, which consisted of the logo and some UI. Admittedly, I had to refresh myself on the ins and outs of the format, including which software to use for it. Soon enough I got the hang of creating and editing vector graphics and could finally embed them into the clone site.

That wasn't the end of the story, however, as I'd noticed the original site's SVG markup appeared to be far less verbose than that of the graphics I had exported. Somewhat expectedly, the difference came down to me using a "plain SVG" export option, where an "optimised SVG" was also available and much more akin to the source SVG.