This SVG always shows today's date

by @edent | # # # | 17 comments | Read ~45,470 times.

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:

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

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.

<svg onload="init(evt)" xmlns="http://www.w3.org/2000/svg"
aria-label="Calendar" role="img" viewBox="0 0 512 512">

Next step is to get the various date strings. I'm using the en-GB locale as that's where I'm based.

<script type="text/ecmascript"><![CDATA[
function init(evt) {
  var time = new Date();
  var locale = "en-gb";

I want to display something like "Sunday 25 FEB" - the locale options allow for short and long names. So you could have "SUN 25 February".

  var DD   = time.getDate();
  var DDDD = time.toLocaleString(locale, {weekday: "long"});
  var MMM = time.toLocaleString(locale,  {month:   "short"});

Finally, we need to add the text on to the image.

  var svgDocument = evt.target.ownerDocument;

  var dayNode = svgDocument.createTextNode(DD);
  svgDocument.getElementById("day").appendChild(dayNode);

  var weekdayNode = svgDocument.createTextNode(DDDD);
  svgDocument.getElementById("weekday").appendChild(weekdayNode);

  var monthNode = svgDocument.createTextNode(MMM.toUpperCase());
  svgDocument.getElementById("month").appendChild(monthNode);

}
]]></script>

Text positioning is relatively simplistic. An X & Y position which is anchored to the bottom of the text - remember that letters with descenders like g 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.

<text id="month"
  x="32" 
  y="164" 
  fill="#fff" 
  font-family="monospace"
  font-size="140px"
  style="text-anchor: left"></text>

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.

Enjoy!


Support this blog

Enjoyed this blog post? You can say thanks to the author in the following ways:

Donate to charity
Give to charity.
Buy me a birthday present
Amazon Wishlist
Get me a coffee
Donate on Ko-Fi.

17 thoughts on “This SVG always shows today's date

  1. Ade Thompson says:

    I can confirm works as expected on iPhone 🙂

    Very nice implementation, will be using this at some point for sure.

  2. Chris says:

    And, works on Android with Chrome latest. Looks great.

  3. Pomax says:

    Rather than inserting textnodes, you can use the .textContent property to directly set the text:

    function init(evt) {
    var time = new Date();
    var locale = “en-gb”;
    var date = time.getDate();
    document.getElementById(“day”).textContent = date;

    var weekday = time.toLocaleString(locale, { weekday: “long” });
    document.getElementById(“weekday”).textContent = weekday;

    var month = time.toLocaleString(locale, {month: “short”});
    document.getElementById(“month”).textContent = month.toUpperCase();
    }

  4. What licence is this under, please?

    1. @edent says:

      The original image is CC-BY. I'm happy for this to be licensed in the same way. As code is not typically licensed with CC, you can think of it as MIT - but I'd consider it too trivial to be worth it ☺️

  5. Dean Le says:

    The issue is it uses local phone time. If the phone goes wrong, it's wrongly displaying. Use server time.

    1. Chuck says:

      That’s problematic if the server and client are far away from each other. If the client’s clock is wrong, at least this will be consistent!

    2. That Guy says:

      Unless you happen to be in the same timezone as the server, this is very likely a big fail.

      1. Matt says:

        Server could send the date in UTC, and let the client convert to local time. But then you’re relying on the clients clock again – might as well just get their local time directly.

  6. Bryan says:

    You should probably mention that this will only work if the SVG is embedded directly in the HTML, in an iframe or by using the embed tag. This shouldn’t (and likely won’t based off of Chrome 63) work if the SVG is added to the page using an IMG tag.

    1. My initial thought would be that this could be a security risk. Glad too see that you’re right – it won’t work as an img tag.

  7. Mufid says:

    It even works on Inkscape! Kudos!

    https://imgur.com/a/mz7S5

  8. Eric Andersen says:

    Sorry, I'm still working on the word "skeuomorph." Had to break out the dictionary for that one. Thanks for the new word....

  9. Eric Andersen says:

    Sorry, I'm still working on the word "skeuomorph." Had to break out the dictionary for that one. Thanks for the new word....

    Don't mean to sound like a wise a**. I enjoy reading your posts very much, silent most of the time.

  10. Andrew McGlashan says:

    That's great, but I think it would be even better if it was done totally with CSS if that is possible.

  11. Jonathan Hodgson says:

    Very interesting idea. With JS disabled / not available, it displays an empty calendar. Do you think it would be worth having a fallback to a generic date?

  12. unfa says:

    This is fabulous 😀

    Can you make a web app in SVG?
    Code a game?

Leave a Reply to Mufid Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.