Minimum Viable Tweet to Semantic SVG

by @edent | # # # # | 3 comments | Read ~219 times.

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:

Terence Eden

@edent

BRB. Replacing all our whiteboard coding interviews with one of these.

One of those games from the 1990s where you have to match shapes to holes.

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?

3 thoughts on “Minimum Viable Tweet to Semantic SVG

  1. Love the concept. Needs to be made responsive though as currently overflows on mobile.


  2. Matt Hobbs says:

    Great write-up @edent! Thanks for the shout-out too 😁


  3. I took this amazing project by @edent and re-wrote it in Go (because why not?)

    github.com/averagemarcus/…

    I’m still adding some more tweaks to it (such as displaying URLs without the t.co redirect).

Leave a Reply

Your email address will not be published. Required fields are marked *