Comment by djxfade
Very cool! How does this work from a technical standpoint? Do you have to implement a full HTML/CSS renderer in JS, or is there an official browser API to capture the elements as image data?
Very cool! How does this work from a technical standpoint? Do you have to implement a full HTML/CSS renderer in JS, or is there an official browser API to capture the elements as image data?
I'm using several functions to clone the DOM and insert it into an SVG <foreignObject>. This approach is now well supported across modern browsers, although <foreignObject> is still a rather primitive way to handle HTML and styles within SVG, which can sometimes lead to results that aren't fully precise in certain cases. To reduce the size, I created internal CSS classes to avoid repeating CSS properties, and I'm also using several caches to prevent re-cloning styles that have already been processed. There's still a long journey ahead, but I hope a plugin system will allow for more fine-grained control over all capture stages