Du hast nach Beiträgen mit diesem Tag gesucht:
SVG

Es sind die kleinen Dinge

Vor ein paar Tagen habe ich meine Tags hier anders gestaltet. Vorher waren sie – wie auf Twitter oder Instagram – im Stil von Hashtags gehalten, per CSS kleingeschrieben und eine Raute vor dem Tag, ohne Leerzeichen. Aber das passte mir irgendwie nicht. Es sieht auf Instagram, in Beiträgen oder so vielleicht ganz gut aus, aber so wie ich es hier darstellen möchte, nein, eher nicht. Zudem ist die Kleinschreibung ein Accessibility-Problem: #themandalorian lässt sich deutlich schlechter lesen als #TheMandalorian. Und am besten ist eben einfach The Mandalorian.

Damit es ein bisschen einheitlicher aussieht, habe ich den neuen Tags auch ein Icon verpasst – und kurzerhand eins aus dem kostenfreien Set Hero Icons genommen (übrigens sehr schöne Icons). So weit, so gut. Aber jedes Mal fiel mir der Unterschied in der Strichstärke des Icons ins Auge. Er war nur minimal, vielleicht 0,2 Pixel. Aber das genügte: Das Icon war zu dünn.

Icons in klein, das Tag-Icon sieht aufgrund geringerer Strichstärke ein wenig anders aus.

Also habe ich mir das Icon selber in Affinity Designer gebaut, mit Rechtecken und Rauten ein Lesezeichen zusammen gesetzt, es mit den Geometrie-Werkzeugen zugeschnitten und dabei auch gleich das Ecken-Werkzeug kennen gelernt, denn es sollte natürlich genauso abgerundet sein wie die anderen Icons. Die Strichstärke habe ich dabei angeglichen an die anderen Icons und es schließlich durch SVGO gejagt, um die Dateigröße möglichst gering zu halten. Hier sieht man das Ganze auf 400% vergrößert:

Starke Vergrößerung der Icons, um den Unterschied hervorzuheben. Die Icons nachher, das Tag-Icon wurde den anderen Icons angeglichen.

Das sieht besser aus, finde ich. Es sind einfach die kleinen Dinge, und manchmal muss man eben selbst Hand anlegen.

Uhr-Icon mit Uhrzeit

Nachdem ich vor einigen Tagen schon von einem Icon-Font zu SVG-Icons gewechselt bin, um das Rendering ein wenig zu beschleunigen, habe ich mir heute morgen noch ein kleines Gimmick zurecht gebastelt.

Das Uhr-Icon gibt nun die Uhrzeit des Posts wieder. Vorher war es lediglich ein statisches Vier-Uhr-Icon:

16:00 Uhr

Dank SVG Transforms lassen sich die Pfade für die Zeiger aber wunderbar drehen, so kann ich z.B. jetzt 18:06 Uhr darstellen:

18:06 Uhr

Den Stundenzeiger rotiere ich dabei jeweils um 30° (360° / 12), den Minutenzeiger jeweils um 6° (360° / 60):

<svg version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  <title>18:06 Uhr</title>
  <circle cx="6" cy="6" r="5.425" stroke="black" stroke-width="1.15" fill="none"/>
  <line x1="6" y1="6" x2="6" y2="4" stroke="black" stroke-linecap="round" stroke-width="1.35" transform="rotate(180 6 6)"/>
  <line x1="6" y1="6" x2="6" y2="2.5" stroke="black" stroke-linecap="round" stroke-width="1.35" transform="rotate(36 6 6)"/>
</svg>