Using HTML in SVG (Wait, What?) banner photo

Using HTML in SVG (Wait, What?)

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:

fayeed/github-banner

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.