Institutslogo im SVG-Format

Konventionen

Speicherort und Dateiname layout01INSTITUTE/Img/inst_logo.svg
Dateiformat Das Institutslogo muss in einem echten SVG-Format (Scalable Vector Graphpics) vorliegen.

Echtes SVG-Format

Findige Webmaster*innen der TUHH haben Folgendes probiert, aber es hat nicht in allen Browser funktioniert:

die Dateinamenserweiterung einer Bilddatei, die in einem anderen webtauglichen Bildformat vorliegt, durch "SVG" austauschen
eine Bilddatei, die in einem anderen webtauglichen Bildformat vorliegt, in eine SVG-Datei einbetten

Das mag vielleicht in Ihrem Browser gut aussehen, aber nicht alle Benutzer*innen surfen mit Ihrem Browser.

Randbedingungen

Wenn ein Bild als Institutslogo verwendet werden soll, müssen folgende Randbedingungen erfüllt sein:

Das Bild im SVG-Format muss mindestens so groß sein, wie die maximale Größe des Logo-Containers (227px * 138px) (sonst funktioniert die Darstellung im IE 10 nicht).
Damit das Logo im Firefox richtig skaliert wird, muss die Datei layout01INSTITUTE/Css/base.css eine instituts-spezifische CSS-Deklaration enthalten. Die genauen Werte sind abhängig vom Format des Logos.

CSS-Deklarationen (Beispiele)

Logo im Hochformat

#page-header h1 img {

      height: 138px;
      width: auto; /* 227px */
    }
    .fold-header #page-header h1 img {
      height: 60px;
      width: auto; /* 99px */
    }
    @media screen and (max-width: 1024px) {
      #page-header h1 img, .fold-header #page-header h1 img {
        height: 60px;
        width: auto; /* 99px */
      }
    }

Logo im Querformat

    #page-header h1 img {
      height: auto;
      width: 227px;
    }
    .fold-header #page-header h1 img {
      height: auto;
      width: 99px;
    }
    @media screen and (max-width: 1024px) {
      #page-header h1 img, .fold-header #page-header h1 img {
        height: auto;
        width: 99px;
      }
    }

Internet Explorer 10

Damit das Logo auch im IE 10 korrekt klein skaliert wird, muss es im SVG beim Tag svg den Parameter viewBox mit den Werten "0 0 $width $height" geben (siehe http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/). Beispiel:

Software

Diese Applikationen erzeugen oder exportieren Vektorgrafiken im Format SVG:

Adobe Illustrator wird auf monatlicher Basis kostenpflichtig in der Cloud zur Verfügung getellt http://www.adobe.com/de/products/illustrator.html
Inkscape ist ein professioneller Editor für Vektorgrafiken für Windows, Mac OS X und Linux. Er ist kostenlos und Open Source http://www.inkscape.org/de/
Open Office Draw, eine Applikation der Open-Office-Suite für Windows, Mac OS X und Linux, exportiert ins SVG-Format https://www.openoffice.org/product/draw.html

(Liste ohne Anspruch auf Vollständigkeit)