Add visitor count SVG to Git hub readme.md / profile readme.md [Counter is removed from github since heroku is chargin fees :(]

😃👋 Hey guys here I will explain how to show visitor counter on your git hub profile.

🌟My github Profile Page

🔰Yeah, you heard me right you can add dynamic visitor counter on your markdown readme.md!
🔰Github recently introduced profile readme's which can be activated when we use username as repository:

🔰So it all starts when we embed SVG's in readme.md file markdown code, what we don't know is behind the scenes GitHub retains them in their camo server.

saving readme as this: ⬇️

<img height="64px" src="https://cdn.svgporn.com/logos/javascript.svg">

when you inspect, it becomes: ⬇️

<a target="_blank" rel="noopener noreferrer" href="https://camo.githubusercontent.com/1beeb3d21bd0b20daeae02856eaf2b301846fb07/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f6a6176617363726970742e737667">
<img height="64px" src="https://camo.githubusercontent.com/1beeb3d21bd0b20daeae02856eaf2b301846fb07/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f6a6176617363726970742e737667" 
data-canonical-src="https://cdn.svgporn.com/logos/javascript.svg" style="max-width:100%;">
</a>

your SVG URL ➡️ camo server ➡️ your profile page.

It is similar to how dev.to first saves the uploaded image to amazon servers.

---

Part 1 Getting things ready

We can have a counter as SVG in two ways:

1. Using counting API's from WEB : https://countapi.xyz/
2. Using backend for calculating counter and serving svg.

📢 For me depending on public servers for reliability is not a safe choice. so I chose to make a free backend application on Heroku
🆓 The free tier will provide you Postgres DB, node js application hosting, and a public URL: 😃 My Counter

I will save the part of creating the node js application and deploying it for the public URL for future posts.

Just make sure your svg response headers look like this

      res.set('Content-Type', 'image/svg+xml');
      res.header('Cache-Control', 'no-cache,max-age=0,no-store,s-maxage=0,proxy-revalidate');
      res.header('Pragma', 'no-cache');
      res.header('Expires', '-1');

It means no cache-control and expiry which results in fetching from the server every time someone try to accesses the URL.

🚥 If we embed without such headers the cache of your route will be saved forever in camo servers 😣. To avoid this try to change your route path so that it will fetch a new request with a new header.

---

Part 2 Getting things done

Simply paste your SVG URL into your readme markdown like any other SVG. and done!❤️ 😃 👍

![](https://still-brushlands-82734.herokuapp.com/countercheck)

---

❤️ 😃 👍
Note: Hey guys this is my first post, please support and give your views for improvement🔨

Comments

[a]

I'm glad you used my GIF as well! 😃