Letztens flog mal wieder ein Link durchs Netz, der vielversprechend klang – http://www.responsivelogos.co.uk/ (via @gisugosu) – ein Showcase wie sich Logos ebenfalls „responsive” verhalten können und dabei aber ihre Wiedererkennbarkeit erhalten bleibt.
Ich hatte mich auch gefreut, als ich ein SVG als Quelldatei sah, was dann geschah, glaubt ihr nicht… böses heftig.co – geh weg!
Das SVG-Logo ist als Background-SVG-Sprite eingebunden, welches mehrere Zustände hatte und wurde, wie man es von CSS-Sprites kennt, über background-position je Breakpoint verschoben.
Das ist nicht unbedingt das, was ich unter einem Responsive Logo verstehe, da man in SVG viel mehr Möglichkeiten hat. SVG ist eine Textdatei und besteht ebenfalls aus einzelnen Elementen oder Gruppen, vergleichbar mit einem HTML-Dokument, die ebenfalls mit CSS und JavaScript angesprochen werden können. Man könnte also die „Responsiveness” auch im SVG behandeln, was bei einem Logo Sinn ergeben würde. Media Queries sind auch hier möglich, so dass man Breakpoints festlegen und dementsprechend Logo-Teile sinnvoll ausblenden kann. Zu beachten ist, dass sich die angegebenen Werte (z.B. min-width/max-width) der Breakpoints auf die SVG-Ausmaße selbst beziehen, also nicht auf den Viewport der einbindenden Seite. Quasi so etwas wie Element Querys – ha!
Bei der Clown-Car-Technik für Responsive Images kommt die Media Query Technik zum Einsatz (Pssst: aber nicht verwenden, gibt jetzt einen offiziellen Standard – war ne wilde Zeit damals).
Ein fantastisches „Responsive Logo” Beispiel hat Andreas Bovens bereits 2009 veröffentlicht. So verstehe ich ein Responsive Logo.
Ein einfaches Beispiel wäre, eine Logo Textzeile auf kleinen Displays auszublenden.
Was auch denkbar ist, dass man für den Druckmodus – @media print – das Logo einfarbig (schwarz) gestaltet. Das funktioniert allerdings nur, wenn man das SVG-Logo direkt ins HTML einbindet und nicht über eine <img src=“*.svg“>.
Diese Technik, innerhalb von SVG je Breakpoint Veränderungen vorzunehmen, nutzen mittlerweile auch einige Icon-Libraries. Iconic wirbt damit und auf Smashing Magazine gab es Anfang des Jahres ein Tutorial dazu.
Es ist also einiges möglich in dem Bereich. Für Icons bevorzuge ich mittlerweile SVG-Sprites, da dies im Gegensatz zu Icon-Fonts viele Vorteile hat.
Ok steht auf meiner ToDo Liste „SVG-Logo responsive erstellen“.
; )