Calendar icon looks wildly different in different browsers/contexts

[MalloryA]

Problem

https://github.com/edent/SuperTinyIcons in Chrome:

https://github.com/edent/SuperTinyIcons in Firefox:

Right-click, open image in new tab (looks similar in Firefox and Chrome):

Solution

Convert the text to paths so it looks the same regardless of what fonts are available.

[kuubeu]

The idea behind this icon is to dynamically display the current date where supported, using JavaScript. We could have a separate static icon with path-based text.

For now I've refactored the old icon to fix the issue with CSS not being applied (+some other fixes):

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Calendar" role="img"
viewBox="0 0 512 512"
fill="#fff"><mask id="m"><rect
width="512" height="512"
rx="15%"/></mask><g mask="url(#m)" font-family="monospace"><path d="m0 0V512h512V0" fill="#dee"/><path d="m0 0V180h512V0" fill="#d34"/><path fill="#eab" d="m383.5 86a14 14 0 101 0h42a14 14 0 101 0h42a14 14 0 101 0zm0 43a14 14 0 101 0h42a14 14 0 101 0h42a14 14 0 101 0"/><text x="24.5" y="164" style="text-transform:uppercase" font-size="140">FEB</text><g fill="#677" text-anchor="middle"><text font-size="256" x="256" y="400">29</text><text font-size="64" x="256" y="480">Sunday</text></g></g><script><![CDATA[c=0;for(i in e={month:"short",day:"numeric",weekday:"long"})document.querySelectorAll("text")[c++].innerHTML=(new Date).toLocaleString(0,{[i]:e[i]})]]></script></svg>

If someone could check compatibility in Safari and on Linux, I'll create a pull request

[edent]

It works on Linux - tried FF, Chrome, and Epiphany (which has the same rendering engine as Safari).

[kuubeu]

Converted text to paths using the Consolas typeface (used by default in Windows 10) as a reference:

original (744 bytes)	using Consolas	static (931 bytes)

I saved some bytes on the weekday, so it doesn't look very good up close, but should work as an icon :P

Code:

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Calendar" role="img"
viewBox="0 0 512 512"
fill="none"><path
d="m0 0V512h512V0"
fill="#dee"/><path d="m0 0V180h512V0" fill="#d34"/><path fill="#eab" d="m383.5 86a14 14 0 101 0h42a14 14 0 101 0h42a14 14 0 101 0zm0 43a14 14 0 101 0h42a14 14 0 101 0h42a14 14 0 101 0"/><path stroke="#fff" stroke-width="12" d="M89 80H45v84-45h40m34 0h35m4-39h-44v78h44m26 0h26a1 1 0 000-40h-26zV80h23a1 1 0 010 38"/><path stroke="#677" stroke-width="5" d="m154 476q21 5 24-4t-10-13-10-12 21-4m14 6v19q0 18 20 3v-22 31m15-31v31-22q20-15 20 2v20m35 0v-10c-27 29-29-33 0-16v-18zm35 0v-19q1-15-20-8m20 11c-14-2-20 1-20 8s10 9 20 0m26 9-12-32zl12-32zq-4 11-16 9"/><path fill="#677" d="m134 256c27-30 77-28 92 0s4 57-23 83l-41 40h79v21H134v-20l55-55c23-23 24-45 15-60s-37-17-58 5m213 39c-1-42-13-57-35-57s-35 18-32 42 26 36 67 15m0 18c-43 22-96 10-90-46s100-70 110 3-15 121-100 116v-19q78 5 80-54"/></svg>

Should I add it as calendar_static.svg? Also if anyone has a different font recommendation I'm open to suggestions