Bitte warten...

SVG: Rastergrafiken

► W3C-Empfehlung: <image>

Mit dem <image>-Element lassen sich Rastergrafiken im PNG- und JPEG-Format (aber auch SVG) in ein SVG-Dokument integrieren. Dies funktioniert in lokalen eigenständigen Dateien und als Inline-SVG. Wenn man aber eigenständige SVG-Dateien mit Rastergrafik-Referenzen in einem HTML-Dokument referenziert, werden die Bilder nicht nachgeladen, zumindest ist mir das nicht gelungen.

Code kopieren
<svg width='350px' height='180px'>
  <defs>
    <image id='taj' width='180' height='135' xlink:href='img/taj.jpg' />
  </defs>
  <use x='10' y='10' transform='scale(1)' xlink:href='#taj' />
  <use x='160' y='120' transform='scale(.6)' xlink:href='#taj' />
  <circle cx='150' cy='115' r='60' stroke='red' stroke-width='4' fill='none' />
</svg>

Es ist aber auch möglich, ein Bild direkt in das SVG-Dokument einzubetten, indem man es unter Angabe des MIME-Type (image/png bzw. image/jpeg) in Base64-Kodierung referenziert. Zwar bläht das das Dokument ziemlich auf, dafür benötigt man dann keine separate Bilddatei mehr und man kann diese Dateien auch als eigenständige SVG-Datei in HTML einbinden.

Unter Linux kann man diese Kodierung sehr einfach mit folgendem Befehl durchführen:

base64 /pfad/zur/datei

Code kopieren
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='350px' height='180px'>
  <defs>
    <image id='taj' width='180' height='135' xlink:href='data:image/jpeg;base64,
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' />
  </defs>
  <use x='10' y='10' transform='scale(1)' xlink:href='#taj' />
  <use x='160' y='120' transform='scale(.6)' xlink:href='#taj' />
  <circle cx='150' cy='115' r='60' stroke='red' stroke-width='4' fill='none' />
</svg>
Beispiel für SVG-Rastergrafik Beispiel für SVG-Rastergrafik