This SVG always shows today's date
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
<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.
SVG
<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".
JavaScript
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.
JavaScript
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.
SVG
<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!
Ade Thompson says:
Very nice implementation, will be using this at some point for sure.
Chris says:
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();
}
@edent says:
Dean Le says:
Chuck says:
That Guy says:
Matt says:
Bryan says:
https://imgur.com/a/mz7S5
Eric Andersen says:
Eric Andersen says:
Don't mean to sound like a wise a**. I enjoy reading your posts very much, silent most of the time.
Andrew McGlashan says:
Jonathan Hodgson says:
Can you make a web app in SVG?
Code a game?
Johan says:
I works perfect on a PC/Mac but on my iPhone using Safari or Crome it will NOT put out the text in Swedish but in some other language I cant understand.