Embedded HTML within SVG inside an Image in a README

Recently, I set out to update my GitHub profile with a visually appealing README that would showcase my work and skills. A big part of this was trying to add an animated graph showing my GitHub contributions—something that would give visitors a quick look at my activity.

Checkout my Github

The Challenges I Faced

At first, I tried using SVG graphics made in Figma. I spent time making them look good and adding cool animations, like making the graph move horizontally. But when I tried putting them into my README, things didn't work smoothly. The animations didn't look right on different screens or with GitHub's light and dark themes. It was frustrating, but I didn't give up.

Switching to a New Approach

I decided to go back to basics and use HTML to build the graph myself. This gave me more control over how it looked and moved. I put this HTML graph into an SVG format and then inserted it into my README using an image tag. This way, I could make sure the animation worked well and looked good on any device or theme.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <style>
        body {
          font-family: Arial, sans-serif;
          margin: 0;
        }
        .content {
          font-size: 20px;
          color: rgba(137, 43, 226, 0.656);
        }
        .content p {
          margin: 10px 0;
        }
      </style>
      <div class="content">
        <p>Hello, this is HTML inside SVG!</p>
        <p>Enjoy styling and scripting here.</p>
      </div>
    </body>
  </foreignObject>
</svg>

The above code snippet demonstrates how to embed HTML within an SVG using the <foreignObject> element. Here's a breakdown of the code:

<svg>: Defines the SVG container with a specified width and height.
<foreignObject>: Allows embedding foreign content (like HTML) inside the SVG. It takes up the full width and height of the SVG.
<body>: Defines the HTML content within the <foreignObject>. It uses the XHTML namespace.
<style>: Contains CSS styles for the embedded HTML content. It styles the body and elements inside the content div.
<div>: Contains the HTML content to be displayed. It includes the regular html with div and p and other tags.

Bandi, Om Preetham, a software developer originally from India, later moved to the USA for his master's degree. He specializes in web x app development. Apart from developing apps, Om has a keen interest in design.

Shades of Blue

I chose blue shades for my Contribution Graph because they represent trust and familiarity, which aligns with common usage on GitHub's web interface that predominantly features blue text. This color choice enhances readability and professionalism while ensuring that my GitHub profile remains visually cohesive and engaging.

Improving and Polishing

I kept tweaking the animation until it flowed smoothly. Making sure it worked with both light and dark themes was important for making my profile easy to read for everyone who visits.

Finally, Success

After a few tries, I finally got the animated graph working perfectly in my GitHub README. It not only made my profile look better but also showed off my skills in web design and problem-solving.