XML-Technologien / SVG / Hyperlinks und externe Dateien einbinden / Externe Dateien einbinden / Komplette externe Grafiken verwenden

Komplette externe Grafiken verwenden

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Externe Grafiken aller unterstützten Formate können Sie mit dem <image>-Tag in die Seite einbinden. Die Datei wird dabei über das Attribut xlink:href eingebunden. Im folgenden Beispiel wird eine PNG-Grafik auf diese Weise in ein Füllmuster integriert und so als Füllung für eine Schrift und ein Rechteck verwendet.

Wichtig ist, dass Sie neben dem Namen der externen Grafik auch die Breite und Höhe mit den Attributen width und height angeben. Lassen Sie diese Attribute weg, wird die Grafik nicht angezeigt, weil dann Breite und Höhe auf 0 gesetzt werden.

<?xml version="1.0" standalone="no"?>
...
<svg width="1000" height="800">
  <defs>
    <pattern id="hintergrund" patternUnits="userSpaceOnUse" x="0" y="0" width="600" height="434">
      <image xlink:href="feuer.png" width="600" height="434"/> 
    </pattern>
  </defs>
  <text x="10" y="150" style="fill:url(#hintergrund);stroke:none;font-family:'Arial Black';font-size:150;font-weight:bold">Feuer</text>
  <rect x="0" y="0" width="450" height="215" style="fill:url(#hintergrund);fill-opacity:0.4;stroke:orange"/>
</svg>

Das Ergebnis sieht dann wie folgt aus:

Das Ergebnis des Füllmusters mit PNG-Grafik

Abbildung: Das Ergebnis des Füllmusters mit PNG-Grafik.

Sie können mit dem <image>-Tag aber nicht nur Grafiken in Füllmustern definieren, sondern auch direkt Grafiken einfügen. Dies zeigt das folgende Beispiel, das eine Liste mit grafischen Aufzählungszeichen erstellt.

<?xml version="1.0" standalone="no"?>
...
<svg width="1000" height="800">
  <g transform="translate(0,0)">
    <image  x="10" y="10" xlink:href="mk.png" width="32" height="24" /> 
    <text x="40" y="30" style="font-size:12px;font-family:Arial;font-weight:bold">Browser-Bugs.de</text>
  </g>
  <g transform="translate(0,30)">
    <image  x="10" y="10" xlink:href="mk.png" width="32" height="24" /> 
    <text x="40" y="30" style="font-size:12px;font-family:Arial;font-weight:bold">vmi-buch AG</text>
  </g>
  <g transform="translate(0,60)">
    <image  x="10" y="10" xlink:href="mk.png" width="32" height="24" /> 
    <text x="40" y="30" style="font-size:12px;font-family:Arial;font-weight:bold">Die Webseite zum Buch</text>
  </g>
  <g transform="translate(0,90)">
    <image  x="10" y="10" xlink:href="mk.png" width="32" height="24" /> 
    <text x="40" y="30" style="font-size:12px;font-family:Arial;font-weight:bold">Meine Webseite</text>
  </g>
</svg>

Das Ergebnis ist diese Liste.

Externe Grafiken als Listenzeichen

Abbildung: Externe Grafiken als Listenzeichen.

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

XSLT

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de