Minimum Viable Tweet to Semantic SVG

One of the problems with OEmbeds of Tweets is that they're heavy. Lots of JavaScript, tracking cookies, and other detritus. See this excellent post by Matt Hobbs looking at how to make your website faster by removing Twitter embeds and replacing them with images.

Here's my attempt to turn a Tweet into a semantic SVG!

This doesn't attempt to faithfully recreate the exact look and feel of an authentic Tweet. But it is designed to be a small, fast, and semantic representation. Here's what it looks like:

And this is the underlying code - as you can see, it has semantic HTML embedded via a <foreignObject>.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20em" height="687px">
<foreignObject x="0" y="0" width="20em" height="100%" fill="#eade52">
    <style>
        .tweetsvg{clear:none;}
        a.tweetsvg{color: rgb(27, 149, 224); text-decoration:none;}
        blockquote.tweetsvg{margin:0; background-color:#fefefe; border-radius:2%; border-style:solid; border-width:.1em; border-color:#ddd; padding:1em; font-family:sans; width:19rem}
        .avatar-tweetsvg{float:left; width:4rem; height:4rem; border-radius:50%;margin-right:.5rem;;margin-bottom:.5rem;border-style: solid; border-width:.1em; border-color:#ddd;}
        h1.tweetsvg{margin:0;font-size:1rem;text-decoration:none;color:#000;}
        h2.tweetsvg{margin:0;font-size:1rem;font-weight:normal;text-decoration:none;color:rgb(101, 119, 134);}
        p.tweetsvg{font-size:1.25rem; clear:both;}
        hr.tweetsvg{color:#ddd;}
        .media-tweetsvg{border-radius:2%; max-width:100%;border-radius: 2%; border-style: solid; border-width: .1em; border-color: #ddd;}
        time.tweetsvg{font-size:.9rem; font-family:sans; margin:0; padding-bottom:1rem;color:rgb(101, 119, 134);text-decoration:none;}
    </style>
    <blockquote class="tweetsvg" xmlns="http://www.w3.org/1999/xhtml">
        <img class="avatar-tweetsvg" alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/" />
 
        <a class="tweetsvg" href="https://twitter.com/edent/status/1092852483033055232"><h1 class="tweetsvg" >Terence Eden</h1></a>
 
        <a class="tweetsvg" href="https://twitter.com/edent/status/1092852483033055232"><h2 class="tweetsvg" >@edent</h2></a>
 
        <p class="tweetsvg">BRB. Replacing all our whiteboard coding interviews with one of these. </p>
 
        <a class="tweetsvg" href="https://twitter.com/edent/status/1092852483033055232"><img
            class="media-tweetsvg"
            width="606"
            src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/"
            alt="One of those games from the 1990s where you have to match shapes to holes. "/></a>
 
        <a class="tweetsvg" href="https://twitter.com/edent/status/1092852483033055232">
            <time class="tweetsvg" datetime="2019-02-05T18:28:30+00:00">Tue Feb 05 18:28:30 +0000 2019</time>
        </a>
    </blockquote>
</foreignObject>
</svg>

It is a bit gnarly, but works for a short document. It isn't a perfect representation of a Tweet - it doesn't show how many replies, retweets, or likes a post got - but it is lightweight. Only a couple of KB plus inlined images. No bloated JavaScript, and more accessible than a plain screenshot.

You can play with the images at https://twistory.ml/svg.php?id=1092852483033055232 - just stick a Tweet ID after the id=.

The horrible hacky code is on my GitLab.

What do you think? Worth continuing work on?