Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 7

7.4 Einbinden von externen Grafiken - das image-Element

Mit dem image-Element wird eine externe Grafik referenziert, d.h. in die SVG Grafik eingebunden. Dabei sind nur die Grafikformate png, jpg und svg möglich.

Das image-Element erzeugt einen Bereich innerhalb der SVG-Grafik, in dem dann die externe Grafik dargestellt wird.

Das Attribut xlink:href wird benötigt, um die URI der externen Grafik festzulegen.
Mit den Attributen x und y legen Sie die die x,y-Koordinate der linken, oberen Ecke des Bereichs fest, in dem die exteren Grafik angezeigt werden soll.
Mittels der Attribute width und height bestimmen Sie die Ausmaße des Bereichs, in dem die Grafik angezeigt wird.

Das image-Element beinhaltet ein Child-Element (Kind-Element): das title-Element.
Hiermit wird dem Bild ein Titel zugewiesen.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="100px" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das image-Element</title>
<desc>Referenzen - Ein Bild im Bild</desc>

  <!-- hier wird eine png-Grafik in die SVG-Grafik eingebunden -->
  <image x="10" y="3.5" width="180px" height="93px"
    xlink:href="../grafik/aptilogo.jpg">
    <title>only jpg,png,svg</title>
  </image>
</svg>
      



index  |  Kapitel 7  |  7.3  <<  | 7.4 |  >>  7.5   Allgemeine Attribute - stdAttrs, langSpaceAttrs, testAttrs