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:

    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       width="144.49692"
       height="138"
       id="svg2"
       version="1.1"
       inkscape:version="0.48.4 r9939"
       sodipodi:docname="logo_rz.svg"
       inkscape:export-filename="/home/psvkv/Pictures/logos/logo_rz.png"
       inkscape:export-xdpi="486.62219"
       inkscape:export-ydpi="486.62219"
       viewBox="0 0 145 138">

Software

Diese Applikationen erzeugen oder exportieren Vektorgrafiken im Format SVG:

(Liste ohne Anspruch auf Vollständigkeit)