Rich HTML in GitHub README

Embed rich HTML in any Markdown document, even a GitHub readme, using SVG and foreignObject.

TL;DR

Jump to the example below to create a rich HTML document enveloped in an SVG file.

Readme frenzy

With the new GitHub profile readme feature, rich readme files with personal banners and customised messaging have become real popular. But Markdown, especially GitHub markdown is limited, and us snowflakes want to display our uniqueness in code! We don’t want animated GIFs, what is this, GeoCities? We want a way to incorporate rich, styled HTML in your readme files.

This could be live HTML

Enter foreignObject

<foreignObject> is an SVG element which can include elements from different XML namespaces. So, if our main XML namespace is SVG (http://www.w3.org/2000/svg), it can contain XHTML (http://www.w3.org/1999/xhtml), and all the features it supports, including a style tag.

Following is an example of an SVG file with embedded HTML document featuring CSS styles

Put it together

Then, all that’s left is to include this an as image in your readme repo.

Folder structure

username/ (repo)
├── README.md
└── image.svg

README content:

# Welcome, I've been expecting you.
![](./image.svg)

Go nuts, create amazing things with HTML and CSS to enrich your readme and show off your wicked skills.
This technique works for both normal repositories and profile README repos.

isbot readme banner
The banner from isbot repo. It even blinks

 by the author.

--

--

--

omrilotan.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Make a Magic: The Gathering card in CSS

Tail Recursion in Python

DeGacha Post-launch update

InterviewBit: #1 Reverse Integer

Reduce Cost and Increase Productivity with Value Added IT Services from buzinessware — {link} -

How to pass AWS Certified Solutions Architect — Associate exam in 2022?

How to pass AWS Certified Solutions Architect — Associate exam in 2022?

5 Great Coding YouTube Channels You May Not Know

Reduce Cost and Increase Productivity with Value Added IT Services from buzinessware — {link} -

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
omrilotan

omrilotan

omrilotan.com

More from Medium

Contribute to open source project using GitHub

Count all pages from section in Hugo

Top 6 IoT Applications in 2022

How to extract a single agency from a GTFS file and use that to run OTP with Docker