Zukunftssichere, interaktive SVG-Logos und Icon-Fonts

Mit der Verbreitung immer höher auflösender Displays, wie z.B. Apples Retina-Displays, werden auch immer höhere Ansprüche an die auf Webseiten verwendeten Grafiken gestellt. Daher werden – wenn möglich – in Zukunft Pixelgrafiken durch Vektorgrafiken oder/und Icon-Fonts ersetzt. Diese werden auf hochauflösenden Displays „sauberer“ dargestellt und auch schneller geladen, so dass das Nutzererlebnis deutlich gesteigert wird.
Ein weiterer Vorteil der Vektorgrafiken und Icon-Fonts liegt in der Skalierbarkeit. Webseiten werden heutzutage auf verschiedensten Geräten mit unterschiedlichsten Displaygrößen aufgerufen. Während der eine Besucher Ihre Webseite auf einem Smartphone mit 320 Pixeln Breite ansieht, nutzt der andere Besucher vielleicht ein Display mit einer Breite von 2560 Pixeln. Das bedeutet, dass Ihr Firmenlogo und Schaltflächen auf dem Smartphone entsprechend klein dargestellt werden müssen, während sie auf einem großen Display proportional größer erscheinen sollten und das bitte, ohne pixelig zu wirken.
Sehr schön ist auch die Möglichkeit, einzelne Teile einer Vektorgrafik (z.B. eines Logos) animiert und anklickbar zu gestalten. Alle modernen Browser (sogar der Internet Explorer) unterstützen (fast) problemlos Icon-Fonts und Vektorgrafiken, so dass man auch bestehende Webseiten auf die aktuellsten Techniken im Webdesign anpassen kann. Sprechen Sie mich bei Bedarf einfach an.

Als Demo dient nachfolgend mal mein Logo. Vergrössern und verkleinern Sie mal ihr Browserfenster. Sie werden sehen, dass das Logo immer knackscharf dargestellt wird – egal bei welcher Größe. Achten Sie nach dem Laden auch auf die oberste runde Fläche, die sich nach zwei Sekunden in eine Ellipse verwandelt um anschliessend kreisrund anzuwachsen. Im übrigen ändern sämtliche Bestandteile des Logos beim Überfahren mit dem Mauszeiger ihre Farbe. Anklickbar ist das Ganze selbstvertändlich auch. Das Logo hat übrigens lediglich eine Größe von sensationellen 5 KB!

Demo