Need help with Dynamic-SVG-Calendar-Icon?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

151 Stars 28 Forks MIT License 10 Commits 1 Opened issues


Here it is, an SVG calendar which always display's today's date.

Services available


Need anything else?

Contributors list

# 7,237
9 commits

This SVG always shows today's date

Originally posted on my blog.

For my contact page, I wanted a generic calendar icon to let people view my diary. Calendar icons are almost always a skeuomorph of a paper calendar, but I wondered if I could make it slightly more useful by creating a dynamic icon.

Here it is, an SVG calendar which always display's today's date.

(Note - GitHub doesn't allow data URIs or iFrames - so you'll need to click the link to see it)

The background image is derived from the Twitter TweMoji Calendar icon - CC-BY.

Buy me a coffee


SVG supports JavaScript. Browsers will only run the JavaScript if the SVG is included...

  • in an iframe
  • as inline

It will not run JavaScript in an



Text support in SVG is a little awkward, so let me explain how I did this.

SVG supports JavaScript. This will run as soon as the image is loaded.

Next step is to get the various date strings. I'm using the

locale as that's where I'm based.

Text positioning is relatively simplistic. An X & Y position which is anchored to the bottom of the text - remember that letters with descenders like

will extend beyond the bottom of the Y co-ordinate. This is also where we set the colour of the text, its size, and a font.

A monospace font makes it easier to predict the layout.

A word on anchoring. To centre the anchor, use

style="text-anchor: middle"

A quick test shows that this works on all desktop browsers and Android browsers. I've not tested on iPhones or anything more exotic.


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.