SVG image-Tag: Fotos und Grafiken einbetten

Bitmap einbinden oder einbetten?

SVG ist ein hybrides Format: Vektor + Raster-Bild + Layout + Filter. SVG bietet prozedurale (mathematische) Muster- oder Pattern-Füllungen: Holzstruktur im Text, Stofftextur in einer Fläche, geometrische Muster aus Bildern. Aber Marmor- oder Holzmuster können sehr groß werden, so dass ein kleines Rasterbild nachhaltiger ist.

SVG bringt einen Stapel von Effekten und Filtern für Bitmaps mit, die auch in CSS schon verfügbar sind, aber dort noch nicht zuverlässig von allen Browsern unterstützt werden, etwa Maskieren, Freistellpfade und Effekte. Das image-Element ist das SVG-Pendant zum HTML-img-Element.

<image x="20" y="-5" width="600" height="600" href="einblick.jpg"/>

Wenn die SVG-Datei extern gespeicherte Bitmap-Bilder enthält oder eine andere SVG-Datei lädt, kann sie nicht mit einem HTML-img-Tag geladen werden, denn die meisten Browser verweigern sowohl die Anzeige des externen Bitmap-Bildes als auch einer geladenen SVG-Datei, gleich ob sie in derselben Domaine oder auf einer anderen Adresse gespeichert ist. Externe Medien in SVG-Dateien werden als mögliches Sicherheitsrisiko behandelt.

Die Alternativen sind also:

1. iframe oder object anstelle eines HTML-img-Tags,
2. Bitmap als Data-Url einbetten,
3. SVG inline ins HTML-Markup setzen.

Bitmap-Bilder als data URL einbetten

Bilder und Schriften lassen sich wie bei PDFs und bei Schriften in HTML-Seiten als dataURL per base64 in SVG einbetten. Während das Umwandeln von Schriften eher ungemütlich ist, bieten Illustrationsprogramme wie Inkscape, Adobe Illustrator und CorelDraw die Option, Bitmap-Bilder als Datei einzubinden oder direkt als Data-Uri einzubetten.

<image x="10" y="10" width="400" height="400" href="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAG … "/>

Die dataURL-kodierte Version von JPEG oder PNG ist immer rund 20 bis 30% größer als das Original. Dafür erspart sie den Verweise und das Hantieren mit zwei Dateien.

Externe Datei: 12KB

Eingebettet als Data-URL: 16KB

Das Einbetten als Data-URL bringt mehr Flexibilität, verringert den Aufwand des Datei-Managements und verhindert, das Bilder versehentlich gelöscht werden. Insofern benutzen viele Anwendungen dieses Verfahren, und auch PDF und Textverarbeitungsprogramme bieten diese Option. Muss man abwägen …

Schrift und Webfonts für SVG

Font per base64 in CSS einbetten

Data URL erzeugen

Wenn keine grafische Benutzeroberfläche wie in Illustrator oder Inkscape zur Verfügung steht, erzeugt ein kleines JavaScript eine DataURL ohne viel Federlesens. Das kleine Skript beschränkt sich auf die Umwandlung von Webp-Bildern, die zu deutlich kleineren Data-Urls führen als PNG oder JPEG.

<input type="file" id="f" accept=".webp">
<output></output>
<button class="btn" id="copytext">copy</button>
<div class="msg"></div>
<script>
document.getElementById("f").addEventListener("change", async e => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    //console.log(reader.result); // → data:image/webp;base64,…
    
    const dataUrl = reader.result;
	const parts = dataUrl.match(/.{1,80}/g); // alle 80 Zeichen ein Stück

    document.querySelector("output").textContent = reader.result;
    
    document.querySelector("#copytext").addEventListener ("click", function () {
    	const text = document.querySelector("output").value;
    	console.log (text)
    	//document.querySelector("output").select();
    	
    	navigator.clipboard.writeText(text)
			.then(() => {
			  document.querySelector(".msg").innerHTML = "Text wurde kopiert";
			})
			.catch(err => {
			  console.error("Fehler beim Kopieren:", err);
			});
	
    })
  };

  reader.readAsDataURL(file);
});
</script>

SVG clipPath und Filter

SVG steuert attraktive Animationen mit einer langen Liste von wenig bekannten Funktionen – so z.B. clipPath, mask und filter. SVG clipPath verwandelt SVG-Formen wie path, circle oder rect in Masken für ein darunter liegendes Bild.

In diesem einfachen Beispiel bewegt sich ein einfacher SVG-Kreis als Maske über das Bild.

<clipPath id="clipPath">
	<circle cx="40.5" cy="40.5" r="40.5" fill="#e3e2db"/>
</clipPath>

<style>
image { clip-path: url("#clipPath")}
circle {
    animation-name: move;                 /** Name der Animation **/
    animation-duration: 10s;              /** Dauer der Animation **/
    animation-iteration-count: infinite;  /** Anzahl der Wiederholungen **/
}

@keyframes move {
    0% {  transform: translateX(0px)    }
    40%  {  transform: translateX(150px) }
}
</style>
<image class="image" x="0" y="0" width="345" height="190" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUk …" />

Die SVG-Form kann mit SVG SMIL oder CSS Keyframes animiert werden.

SVG preserveAspectRatio

SVG akzeptiert neben den üblicherweise absoluten Werten auch relative Angaben, insbesondere Prozentangaben für width und height. So lassen sich auch Bitmaps an die Maße des SVG-Containers anpassen, z.B. um den SVG-Container vollständig mit einem Rasterbild zu füllen. Das elegante cover und contain aus CSS weicht dem hölzernen preserveAspectRatio.

preserveAspectRatio zeigt keine Wirkung, wenn kein viewBox-Attribut das Seitenverhältnis der Grafik vorgibt. Hat das umfassende Element ein anderes Seitenverhältnis als das Bild, bestimmt preserveAspectRatio mit zwei Werten Lage und Skalierung der Grafik.

preserveAspectRatio="xMidYMid meet"

Ist die Vorgabe und zentriert die die Bitmap je nach Querformat oder Hochformat vertikal bzw. horizontal.

preserveAspectRatio="none"

streckt und quetscht das Rasterbild auf das Seitenverhältnis des umfassenden Elements.

slice

anstelle von meet wirkt wie CSS background-size: cover, passt das Bild in beiden Dimsionen an und schneidet den Überstand ab.

SVG-Attribute für image

x, y

Die Koordinaten x und y bestimmen die Position innerhalb des SVG-Elements. Mit x="0" und y="0" würde das Rasterbild wie jedes SVG-Element in der Ecke oben links sitzen.

width und height

des Bildes müssen gesetzt werden. Ohne width und height oder width="0" / height="0" würde das Bild nicht geladen. Anstelle von absolute Werten können auch Prozentwerte eingesetzt werden – damit werden width und height relativ zum SVG-Element.

href

Pfad zur Mediendatei

xlink:href

alte Notation der Pfadangabe – gilt heute als veraltet und soll durch href ersetzt werden.

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:xlink ist veraltet und sollte nicht mehr verwendet werden. xlink:href wurde vollständig durch href ersetzt.

kein alt-Attribut

Das SVG-image-Element kennt kein alt-Attribut!

SVG inline in HTML

Wenn die SVG-Datei nur wenige Elemente enthält, kann sie auch direkt ins HTML gesetzt werden. Dann unterscheidet sich das image-Tag von SVG kaum vom HTML-img-Tag.

SVG ist responsive

Das viewBox-Attribut zusammen mit width="100%" und height="100%" reicht schon aus, damit sich die SVG-Grafik am verfügbaren Platz ausrichtet. In diesem Sinne passen sich auch eingebettete Bitmap- oder Rasterbilder innerhalb der SVG-Grafik problemlos an.

Was dem SVG allerdings fehlt, sind Techniken wie srcset und sizes, mit denen verschiedene Auflösungen einer Bitmap entsprechend der Größe des Viewports eingebunden oder eingebettet werden, um die mobilen Geräte von einer zu hohen Pageload zu entlasten.

Bei einigen SVG-Anwendungen hilft aber ein kleiner Trick, um ein Bitmap-Bild mit Größenvariationen in SVG einzusetzen: Das Bild wird mit CSS als background-image eingebunden. Hilft aber nur, wenn das SVG inline im HTML-Quelltext setzt, denn externes SVG kann keine externen Ressourcen einbinden.

.svgbg {
	background-image: url('paris-300.jpg'); 
	background-position: center center ; 
	background-repeat: no-repeat; 
	background-size: 60%;
}

@media (min-width: 680px) {
	.svgbg { background-image: url('paris-600.jpg'); }
}

Das Rasterbild wird als Hintergrund in das SVG-Element gesetzt.

<svg class="svgbg" viewBox="0 0 900 600" width="100%" height="100%">