Image for post
Image for post

Rich HTML in GitHub README

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

TL;DR

Readme frenzy

Image for post
Image for post
This could be live HTML

Enter foreignObject

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

Put it together

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
isbot readme banner
The banner from isbot repo. It even blinks

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