This SVG always shows today's date.

For your contact page you needed a standard calendar icon for people to view my diary. Such icons almost always do like a paper calendar. But I wondered if it was possible to make the calendar a bit more useful if I added a dynamic icon.

And here it is, the SVG calendar, which always shows today's date :


The background image is made based on the Twitter icon. TweMoji Calendar - CC-BY
')
SVG text support is a bit uncomfortable, so let me explain how I did it.

SVG supports javascript. This starts immediately after 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"> 

The next step is to get different strings with dates. I use the British en-GB locale because I am in the UK.

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

I need something like “Sunday 25 FEB”. The locale settings support short and long names, so you can select “SUN 25 February”.

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

Finally, add text 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> 

Positioning text is relatively simple. The coordinates of X and Y are attached to the lower border of the text - remember that letters with lower portable elements, such as g , will go beyond the coordinates of Y. Immediately we set the text color, size and font.

Layout is easiest with monospaced fonts.

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

About alignment. To center the text, specify style="text-anchor: middle" .

Preliminary tests have shown that this SVG works in all desktop browsers and browsers under Android. We did not test on the iPhone or more exotic devices.

Enjoy!