Inhalt breiter als der Bildschirm?←▼→Alternativer Taschenrechner

web,tipps&tricks,photoline

Keine SVG-Anzeige auf der Webseite

Erstellt: 07.04.2022 Lesedauer 1 - 2 Min.

SVG-Vektor-Grafiken haben kleine Dateigrößen und sind immer perfekt scharf. Was sie sehr interessant für Webseiten macht. Doch manchmal sind sie dort „unsichtbar“.

Im Gegensatz zu PNG, GIF & Co., die aus Pixeln bestehen, besteht eine SVG-Grafik aus Vektorbefehlen. Im Text-Editor geöffnet, ist die Verwandtschaft zu HTML, XML (& Co.) sofort offensichtlich.

Mit dieser vorangestellten Definition wird die SVG-Grafik einzeln, als Bild, im Browser angezeigt. Innerhalb eines dynamischen Layouts wird sie wahrscheinlich „unsichtbar“ sein:

…
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 126 95.359">
…
</svg>

SVG-Grafiken können „dimensionslos“ sein, sie haben lediglich eine „Proportion“ (viewBox). Werden so definierte SVG-Grafik in einem Layout mit Prozentangaben verwendet, schrumpfen sie auf „kein Pixel“ zusammen.

Das lässt sich mit einigen Zusatzinformationen beheben:

…
<svg xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   version="1.1" 
   width="126" height="95" 
   viewBox="0 0 126 95">
<g transform="matrix⟨1 0 0 0.996235 0 0⟩">
…
</g>

Mithilfe einer Breiten- und Höhenangabe bekommt die Grafik eine „physische Ausdehnung“. Damit kann ein Webseitenlayout arbeiten, wenn anteilige Dimensionen (%, vh, …) der Gesamtseite die Größe bestimmen (sollen).

width und height können nur ganzzahlig angegeben werden. Damit die Grafik ihre ursprüngliche Dimension behält, wird eine Transformationsmatrix als Korrektur über die gesamte Grafik gelegt.

Wem die mathematischen Grundlagen fremd sind, kann verschwindende SVG-Grafik mühelos mit Photoline reparieren:

  • SVG-Grafik laden
  • SVG-Grafik speichern
  • Fertig.

Photoline schreibt einen korrigierten Kopfeintrag in die Datei und fügt erforderliche Transformationsdaten ein (so ist das zweite Beispiel entstanden).