SVG/SVG-Grafiken responsiv darstellen

Aus SELFHTML-Wiki
< SVG(Weitergeleitet von ViewBox)
Wechseln zu: Navigation, Suche

Eines der Hauptmerkmale responsiver Webseiten ist die flexible Anpassung von Bildgrößen an die Abmessungen des Viewports. Gerade hier haben skalierbare Vektorgrafiken den Vorteil immer gestochen scharfe Grafiken darzustellen.

externe Vektorgrafiken responsiv darstellen[Bearbeiten]

In img- und object-Elementen können Sie SVG-Grafiken ganz einfach mit prozentualen Breitenangaben an die Größe des Elterncontainers anpassen.

Beispiel: responsive Bilder ansehen …
img {
  width: 100%; 
  height: auto;
}
<img src="ubongo.svg" alt="ubongo">
Die Breite passt sich durch den Wert 100% an die Breite des Elternelements an.
Die Höhe wird durch den Wert auto entsprechend angepasst.

inline-SVG responsiv darstellen[Bearbeiten]

Dies funktioniert auch beim HTML-Element SVG. Allerdings verwendet SVG zum Zeichnen der Objekte ein pixelorientiertes Koordinatensystem. Bei kleineren Auflösungen kann es passieren, dass die Grafik nicht mehr vollständig im verkleinerten Raum für das Bild dargestellt wird.

svg { 
  background: white;
  border: 1px dotted #3983ab;
  width: 96%;
  height: 450px;
  }
Verkleinern Sie die Abmessungen der Seite oder benutzen Sie den Viewport-Emulator.
Sie sehen, dass die Breite des SVG-Elements flexibel ist, die Grafik aber nicht skaliert wird.
Beachten Sie: Bei height: auto; wird die SVG-Grafik nicht vollständig angezeigt.

SVG bietet hier schnelle Abhilfe:

viewBox[Bearbeiten]

Oft ist es nötig eine vorhandene Grafik so zu skalieren, dass sie in ein bestimmtes Elternelement passt. Mit dem viewBox-Attribut können Sie ein neues Rechteck mit fester Pixelbreite bestimmen, das innerhalb des verfügbaren Viewports des Elternelements beliebig skaliert, verschoben und auch beschnitten werden kann.[1] (Im XML-Kontext wird das Attribut in CamelCase geschrieben, HTML5 ist case-insensitiv.)

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

<svg viewBox="0 0 650 450">

Folgende Angaben sind nötig:

  • min-x: x-Koordinate des neuen Koordinatensystems (obere linke Ecke)
  • min-y: y-Koordinate des neuen Koordinatensystems (obere linke Ecke)
  • width: Breite
  • height: Höhe

Die Angaben können durch Komma oder Leerzeichen getrennt werden. Negative Angaben oder ein Wert 0 bei der Breite oder Höhe verhindern ein Rendern des svg-Elements.

Das viewBox-Attribut erstellt ein neues Rechteck mit einem neuen Koordinatensystem.

Sie haben nun zwei Koordinatensysteme in der SVG-Grafik:

  • das "eigentliche" Koordinatensystem des svg-Elements mit den Attributen width und height
  • das "neue" Koordinatensystem, bestimmt durch das mit dem viewBox-Attribut definierte Rechteck.
Beachten Sie: Sie müssen für die weitere Gestaltung der SVG-Grafik dieses neue Koordinatensystem verwenden!

Mittels einer automatic transformation rechnet der Browser beim Rendern das "neue" Koordinatensystem automatisch auf die im svg-Element wirklich benötigten Werte um.



svg { 
  width: 96%;
  height: auto;
  }
<svg viewBox="0 0 650 450">
    <defs>
      <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
        <desc>Raster</desc>
        <path d="M0,0 v10 h10" />
      </pattern>
    </defs>

    <rect x="0" y="0" width="650" height="450" fill="url(#grid)"></rect>
    <path fill="#5a9900" d="M20,20 h300 v100 h-100 v100 h-200 z" />
    <path fill="#c32e04" d="M320,20 h200 v200 h-200 z" />
    <path fill="#dfac20" d="M220,120 h100 v100 h100 v100 h-100 v100 h-100 z" />
    <path fill="#3983ab" d="M420,220 h200 v100 h-100 v100 h-200 v-100 h100 z" />
</svg>
Durch die relativen Werte im CSS wird die Grafik entsprechend der verfügbaren Breite passend skaliert. Das width-Attribut erhält hier einen Wert von 96%, damit die SVG-Grafik passend in das Elternelement eingefügt wird und nicht rechts übersteht.
Die viewBox erstellt ein Rechteck, das bei "0,0" beginnt und eine Breite von 650px sowie eine Höhe von 450px hat. Dieses wird in das eigentliche Koordinatenystem, dessen Werte vom Browser berechnet werden, transformiert.


Beachten Sie: Ältere Versionen des Internet Explorers (IE9 -IE11) füllen nicht die gewünschte Breite, sondern rendern die SVG-Grafik in den Standardmaßen 300x150px.


Folgende Elemente können das viewBox-Attribut verwenden:

preserveAspectRatio[Bearbeiten]

Mit dem preserveAspectRatio-Attribut können Sie das gewünschte Seitenverhältnis festlegen. Bei allen Elementen außer bei image wird preserveAspectRatio ohne ein zuvor gesetztes viewBox-Attribut ignoriert.

Folgende Angaben sind möglich:

  • align:
    • none - keine gleichmäßige Skalierung. Die viewBox wird in X- und Y-Richtung ohne Rücksicht auf das Seitenverhältnis gestreckt, so dass sie das svg-Element ausfüllt.
    • xMinYMin - erzwinge gleichmäßiges Skalieren.
      Richte <min-x> der viewBox mit dem kleinsten X-Wert des Viewports aus.
      Richte <min-y> der viewBox am kleinsten Y-Wert des Viewports aus.
    • xMidYMin - erzwinge gleichmäßiges Skalieren.
      Richte den mittleren X-Wert der viewBox am mittleren X-Wert des Viewports aus.
      Richte <min-y> der viewBox am kleinsten Y-Wert des Viewports aus.
    • xMaxYMin - erzwinge gleichmäßiges Skalieren.
      Richte <min-x>+<width> der viewBox am maximum X-Wert des Viewports aus.
      Richte <min-y> der viewBox am kleinsten Y-Wert des Viewports aus.
    • xMinYMid - erzwinge gleichmäßiges Skalieren.
      Richte <min-x> der viewBox am kleinsten X-Wert des Viewports aus.
      Richte den mittleren Y-Wert der viewBox am mittleren Y-Wert des Viewports aus.
    • xMidYMid (Standardwert) - erzwinge gleichmäßiges Skalieren.
      Richte den mittleren X-Wert der viewBox am mittleren X-Wert des Viewports aus.
      Richte den mittleren Y-Wert der viewBox am mittleren Y-Wert des Viewports aus.
    • xMaxYMid - erzwinge gleichmäßiges Skalieren.
      Richte <min-x>+<width> der viewBox am maximum X-Wert des Viewports aus.
      Richte den mittleren Y-Wert der viewBox am mittleren Y-Wert des Viewports aus.
    • xMinYMax - erzwinge gleichmäßiges Skalieren.
      Richte <min-x> der viewBox mit dem kleinsten X-Wert des Viewports aus.
      Richte <min-y>+<height> der viewBox am maximum Y-Wert des Viewports aus.
    • xMidYMax - erzwinge gleichmäßiges Skalieren.
      Richte den mittleren X-Wert der viewBox am mittleren X-Wert des Viewports aus.
      Richte <min-y>+<height> der viewBox am maximum Y-Wert des Viewports aus.
    • xMaxYMax - erzwinge gleichmäßiges Skalieren.
      Richte <min-x>+<width> der viewBox am maximum X-Wert des Viewports aus.
      Richte <min-y>+<height> der viewBox am maximum Y-Wert des Viewports aus.
  • meetOrSlice - diese Zusatzangabe ist nur sinnvoll, wenn der Wert für align nicht none ist:
    • meet - verkleinere die viewBox so weit, dass sie vollständig im svg-Element sichtbar ist. Ist sie vom Seitenverhältnis her zu breit, entsteht über oder unter ihr Leerraum. Ist sie zu hoch, entsteht der Leerraum neben ihr.
    • slice - skaliere die Viewbox so, dass kein Leerraum entsteht. Ist sie vom Seitenverhältnis her zu breit, wird links bzw. rechts abgeschnitten. Ist sie zu hoch, wird unten bzw. oben abgeschnitten.

Insbesondere falls Sie bereits mit CSS-Hintergrundbildern gearbeitet haben, können Sie sich die Funktion dieses Attributs anhand der Eigenschaften background-position und background-size vorstellen:

preserveAspectRatio-Schlüsselwort vergleichbar mit Hintergrundbild-Eigenschaft
none background-size: 100% 100%;
xMinYMin background-position: top left;
xMidYMin background-position: top;
xMaxYMin background-position: top right;
xMinYMid background-position: left;
xMidYMid background-position: center;
xMaxYMid background-position: right;
xMinYMax background-position: bottom left;
xMidYMax background-position: bottom;
xMaxYMax background-position: bottom right;
meet background-size: contain;
slice background-size: cover;
Beispiel
<svg viewBox="0 0 650 450" preserveAspectRatio="xMinYMin meet">
    <defs>
      <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
        <desc>Raster</desc>
        <path d="M0,0 v10 h10" />
      </pattern>
    </defs>

    <rect x="0" y="0" width="650" height="450" fill="url(#grid)"></rect>
    <path fill="#5a9900" d="M20,20 h300 v100 h-100 v100 h-200 z" />
    <path fill="#c32e04" d="M320,20 h200 v200 h-200 z" />
    <path fill="#dfac20" d="M220,120 h100 v100 h100 v100 h-100 v100 h-100 z" />
    <path fill="#3983ab" d="M420,220 h200 v100 h-100 v100 h-200 v-100 h100 z" />
</svg>
Erklärung folgt

padding-bottom height fix[Bearbeiten]

Um inline-SVG auch im Internet Explorer responsiv zu skalieren, können Sie ein Container-Element um das svg-Element legen.


.skalierender-svg-container {
 position: relative; 
 height: 0; 
 width: 100%; 
 padding: 0;
 padding-bottom: 100%; /* override this inline for aspect ratio other than square */
}
.skalierendes-svg {
 position: absolute; 
 height: 100%; 
 width: 100%; 
 left: 0; 
 top: 0;
}
</svg>
<div class="skalierender-svg-container" 
   style="padding-bottom: 71.5% /* 100% * 500/700 */">
  <svg class="skalierendes-svg" 
       viewBox="0 0 700 500" >
    <!-- SVG Inhalt -->
  </svg>
</div>
Das div wird von allen Browsern genau quadratisch dargestellt, da sich der Wert für padding-bottom von der Breite des Elements ableitet. Wenn es skaliert wird, behält es seine Proportionen.
Beachten Sie: Dieser Hack hat mehrere Nachteile. Zum einen benötigt man ein zusätzliches Element, zum Anderen muss der padding-bottom bei einer Änderung der Seitenproportionen neu angepasst werden.
Wenn das Elternelement display: flex gesetzt hat, ist das berechnete padding-bottom = 0, sodass der Hack unwirksam bleibt.


Fazit[Bearbeiten]

Es gibt leider noch keine einfache Lösung SVG-Grafiken inline und responsiv einzusetzen.

Empfehlung:

Binden Sie SVG-Grafiken extern mittels eines img oder object-Elements ein.
Verwenden Sie den padding-bottom height Fix!

Verwenden Sie trotz allem feste (Breiten- und ) Höhenangaben und versuchen Sie diese in Ihre responsiven Seiten zu integrieren.

Weblinks[Bearbeiten]

deutsch

Quellen[Bearbeiten]

  1. W3C: ViewBoxAttribute