anthony morris

HTML/CSS In SVG

learned July 21st, 2020
Web Development
HTML
CSS
SVG

GitHub added the ability to make your profile fancy with a README file under a repo that is the same as your username. So what can you put in it? Well, mostly just Markdown. But sometimes you can use HTML in your Markdown. It's pretty barebones. You can't use CSS.

Or can you? 🤔

You can place SVGs in your Markdown. With SVGs you can include XHTML elements with foreignObject. So what we can do is build out some HTML and CSS inside our foreignObject. Now we have the ability to make thinks look pretty and even use CSS animations!

Admittedly, I probably spent more time on this than I should have but this is what I came up with:

A screenshot of my fancy new GitHub profile