A month back or so I saw Github launched a new feature called Github Readmes which allowed developers to build some amazing looking readmes to add to their profile. After seeing all the amazing Readmes I thought to myself this looks good I should make one too for myself. The initial readme was just a copy-paste from other profiles that I found interesting. After a few days later I thought that this looks too generic, so decided to build an SVG banner, here's what the banner looked like.
As you can see this looks great, but then I started to wonder what if I can make a customizable Github banner with random Avatars, gradients & stuff.
After doing some research I found that I could build an API that will serve the SVG, but as I started to build the API I found that the tags supported by the SVG are a little difficult to work with. So I wondered wouldn't it be good if I could use an HTML tag.
So I went off to google to find a solution and quickly found a post on MDN about foreignObject
which allows the use of HTML tags inside SVG, though it is a little limited in styling.
The
SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
So this is how it works, you just need to add a new tag foreignObject
inside which you need to add XHTML namespace, your SVG file would look something like this:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="20" y="20" width="160" height="160">
<style>
div {
color: red;
bacgroundColor: green;
}
</style>
<div xmlns="http://www.w3.org/1999/xhtml">
Hello world
</div>
</foreignObject>
</svg>
And that's it. I won't talk about how I build the Github Banner, but just by using the method I was able to build something like this:
Check out the project below:
Build custom Github banners for your Github profiles, to add some flair to your Readmes.
Though the styling is limited at the moment for the banner because I just wanted to check the idea, I might add more styling options in the future for this, so stay tuned for more updates.