As a graphic designer, I was disappointed that vector graphics weren't consistent on the web. But once the format SVG started to play well with browsers, I took interest. When I looked into how to add SVGs as a background image, I saw you could add it as Data URI or in simple language, as image code without the need for a file.
It takes technical knowledge to create Data URIs, but at the time there weren't many resources, so I decided to make my own. After initial experimentation, I started building a website to manipulate backgrounds visually. Six weeks later I launched SVGBackgrounds.com in February of 2018.
First Version
In the first version, I experimented with common SVG attributes including opacity, colors, and stroke width. I coded a system to convert between inline SVG and DataURI and target specific attributes to update.
Built in JavaScript, I used a few libraries to handle specific coding tasks. For instance, I used Chroma JS to handle color logic, such as blending colors, and JS Picker to allow users to pick a color via an interface.
Adding eCommerce Functionality
A week after launching, the website went viral and I decided to create a monetized version which launched months later. Sales started to trickle in and I kept building the collection out, with the aim to reach 200 backgrounds. I used the plugin MemberPress on WordPress to handle the eCommerce transactions.
Expirimenting with SVG
As I built up the collection, I played with new attributes such as the path (d) and tags like <patterns> and <use> which allowed reuse of complex shapes to keep code minimal.
A great example is the yellow cube background, which has a tiny filesize of 1.11kb. You can scale it up considerably before noticing pixelation and blur, which despite being vector, the browser renders before scaling. It is scaled at 1x top, 2x middle, and 10x bottom.
Collection Complete
I reached my goal of creating 200 backgrounds and learned a lot about the limits and capabilities of SVG. I break down some of the lessons below...
In the beginning I designed everything in Illustrator and exported it as an SVG. While I still reached for Illustrator at the end to create complex shapes, I would also hand-code, as that is often the best way to fully optimize SVG code.
A tool like SVG OMG is helpful to optimize SVG code, but the way vectors are designed affects the filesize. Knowing how to design with reduced anchor points, curves, etc... is just as critical.
Originally I programmed scaling manually by targeting the width and height attributes. I learned the <pattern> and <use> tags have a scale attribute that handles this logic and more, and now use these tags to do the heavy lifting.
The <use> tag can reduce code substantially through usage of repetitive shapes. You can embed them in each other, inception style.