Paul Hammant's Blog: Embedded Tweets as SVGs
Embedding tweets using Twitter’s own “embed this” HTML is easy enough. One might obseve that’s a lot of JavaScript though. If you’re willing to do some copy/paste, you can make an SVG approximation of the same. An example tweet based on https://twitter.com/laurelchor/status/1260784481159442434:
Code:
<a href="https://twitter.com/laurelchor/status/1260784481159442434">
<svg xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg" viewBox="-53.5 -93.5 548 602" width="548" height="602">
<defs>
<font-face font-family="Helvetica Neue" font-size="19" panose-1="2 0 5 3 0 0 0 2 0 4" units-per-em="1000"
underline-position="-100" underline-thickness="50" slope="0" x-height="517" cap-height="714"
ascent="951.9958" descent="-212.99744" font-weight="400">
<font-face-src>
<font-face-name name="HelveticaNeue"/>
</font-face-src>
</font-face>
<font-face font-family="Helvetica Neue" font-size="18" panose-1="2 0 5 3 0 0 0 2 0 4" units-per-em="1000"
underline-position="-100" underline-thickness="50" slope="0" x-height="517" cap-height="714"
ascent="951.9958" descent="-212.99744" font-weight="400">
<font-face-src>
<font-face-name name="HelveticaNeue"/>
</font-face-src>
</font-face>
<font-face font-family="Helvetica Neue" font-size="16" panose-1="2 0 5 3 0 0 0 2 0 4" units-per-em="1000"
underline-position="-100" underline-thickness="50" slope="0" x-height="517" cap-height="714"
ascent="951.9958" descent="-212.99744" font-weight="400">
<font-face-src>
<font-face-name name="HelveticaNeue"/>
</font-face-src>
</font-face>
<font-face font-family="Helvetica Neue" font-size="15" panose-1="2 0 5 3 0 0 0 2 0 4" units-per-em="1000"
underline-position="-100" underline-thickness="50" slope="0" x-height="517" cap-height="714"
ascent="951.9958" descent="-212.99744" font-weight="400">
<font-face-src>
<font-face-name name="HelveticaNeue"/>
</font-face-src>
</font-face>
</defs>
<metadata> Produced by OmniGraffle 7.18.1\n2021-01-24 21:50:14 +0000</metadata>
<g id="Canvas_1" stroke-dasharray="none" fill="none" fill-opacity="1" stroke="none" stroke-opacity="1"><title>
Canvas 1</title>
<g id="Canvas_1_Layer_1"><title>Layer 1</title>
<g id="Graphic_4">
<path d="M 482 -93 L -41 -93 C -47.627417 -93 -53 -87.62742 -53 -81 L -53 496 C -53 502.6274 -47.627417 508 -41 508 L 482 508 C 488.6274 508 494 502.6274 494 496 L 494 -81 C 494 -87.62742 488.6274 -93 482 -93 Z"
fill="#ededff"/>
<path d="M 482 -93 L -41 -93 C -47.627417 -93 -53 -87.62742 -53 -81 L -53 496 C -53 502.6274 -47.627417 508 -41 508 L 482 508 C 488.6274 508 494 502.6274 494 496 L 494 -81 C 494 -87.62742 488.6274 -93 482 -93 Z"
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
<g id="Graphic_6">
<text transform="translate(-33 -25)" fill="black">
<tspan font-family="Helvetica Neue" font-size="19" font-weight="400" fill="black" x="0" y="18">
I’ve landed in Hong Kong after flying from Paris CDG, via
</tspan>
<tspan font-family="Helvetica Neue" font-size="19" font-weight="400" fill="black" x="0"
y="40.532">London Heathrow. I now have to wait ~8 hours before I get
</tspan>
<tspan font-family="Helvetica Neue" font-size="19" font-weight="400" fill="black" x="0"
y="63.063995">my #COVID19 test results and thus have ample time to
</tspan>
<tspan font-family="Helvetica Neue" font-size="19" font-weight="400" fill="black" x="0"
y="85.59599">tweet about my experience
</tspan>
</text>
</g>
<g id="Graphic_7">
<text transform="translate(17 -80)" fill="black">
<tspan font-family="Helvetica Neue" font-size="18" font-weight="400" fill="black" x="0" y="17">
Laurel Chor
</tspan>
</text>
</g>
<g id="Graphic_8" transform="translate(462.816 -78.472)">
<svg width='27' height='27' x='-13' y='5' viewBox='328 355 335 276'
xmlns='http://www.w3.org/2000/svg'> " + "
<path d='M 630, 425 A 195, 195 0 0 1 331, 600 A 142, 142 0 0 0 428, 570 A 70, 70 0 0 1 370, 523 A 70, 70 0 0 0 401, 521 A 70, 70 0 0 1 344, 455 A 70, 70 0 0 0 372, 460 A 70, 70 0 0 1 354, 370 A 195, 195 0 0 0 495, 442 A 67, 67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363 A 65, 65 0 0 1 623, 401 A 117, 117 0 0 0 662, 390 A 65, 65 0 0 1 630, 425 Z'
style='fill:#3BA9EE;'/>
</svg>
</g>
<g id="Graphic_10">
<text transform="translate(15 -58)" fill="black">
<tspan font-family="Helvetica Neue" font-size="15" font-weight="400" fill="black" x="0" y="14">
@laurelchor
</tspan>
</text>
</g>
<g id="Graphic_11">
<text transform="translate(-33 478)" fill="black">
<tspan font-family="Helvetica Neue" font-size="15" font-weight="400" fill="black" x="0" y="14">
5:10 AM · May 14, 2020
</tspan>
</text>
</g>
<g id="Graphic_12">
<path d="M -23 83 L 462 83 C 470.28427 83 477 89.71573 477 98 L 477 454.25 C 477 462.53427 470.28427 469.25 462 469.25 L -23 469.25 C -31.28427 469.25 -38 462.53427 -38 454.25 L -38 98 C -38 89.71573 -31.28427 83 -23 83 Z"
id="path"/>
<clipPath id="clip_path">
<use href="#path"/>
</clipPath>
<g clip-path="url(#clip_path)">
<image href="https://pbs.twimg.com/media/EX80zAIVcAEGHyQ?format=jpg&name=small" width="680"
height="510" transform="translate(-38 83) scale(.7573529)"/>
</g>
</g>
<g id="Graphic_13">
<path d="M -18 -78.132 L -15.447998 -78.132 C -4.402303 -78.132 4.552002 -69.1777 4.552002 -58.132004 L 4.552002 -55.58 C 4.552002 -44.534307 -4.402303 -35.58 -15.447998 -35.58 L -18 -35.58 C -29.045695 -35.58 -38 -44.534307 -38 -55.58 L -38 -58.132004 C -38 -69.1777 -29.045695 -78.132 -18 -78.132 Z"
id="path_2"/>
<clipPath id="clip_path_2">
<use href="#path_2"/>
</clipPath>
<g clip-path="url(#clip_path_2)">
<image href="https://pbs.twimg.com/profile_images/849959562153050112/r31mV3mt_bigger.jpg"
width="400" height="400" transform="translate(-38 -78.132) scale(.10638)"/>
</g>
</g>
</g>
</g>
</svg>
</a>
I traced the outline of an embedded tweet in OmniGraffle using regular shapes, then exported to SVG. I removed whitespace for the sake of embedding into this Jekyll blog, though the whitespace is still there in the code representation below the inline SVG. It would be great to have a Chrome/Firefox extension for making the same :) The final version could end up with more inline JavaScript as timezones and local language are things that I am ignoring in proof of concept above.
I will not be tweeting this blog entry as I would not want have my twitter account disabled for breaking terms of service - an absolute worst case scenario if Twitter Inc were extremely punitive.
Published
February 16th, 2021