Playing around with really hero-ing the svgs for thoughts, I wanted to try and overlay the content on the generated image.

Having just sorted inline SVGs which are my general preference as they are highly flexible with CSS I started to play with absolute positioning as a means to to put the content on the image.

This started to work but as at least one of the els needed removing from the flow it mean more magic numbers and hacks were needed to get the content to reflow at different viewport sizes.

With all the recent learning and hacking on eleventy config it was not hard (today) to adjust a custom shortcode to output the inline SVG as base64 and use this as a background-image data uri.

Once I had the SVG as a background it was much simpler to set the desired spacing on the content and defer the flow to the browser.

Hat tip to this 2015 CSS tricks article: 09: SVG with Data URIs.