Grafiken in der Webseite positionieren

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

Die Inhalte der <EMBED>- und <OBJECT>-Tags können Sie über <DIV>-Tags oder <SPAN>-Tags absolut positionieren. Sie können dazu alternativ auch ein style-Attribut in den <EMBED>- oder <OBJECT>-Tag einfügen. Zudem können Sie über die Attribute width und height des Tags die Anzeigegröße für die Grafik festlegen und so nur Ausschnitte aus der Grafik anzeigen. Die folgende Abbildung zeigt drei absolut positionierte SVG-Grafiken in einer Webseite. Dabei wurden die ersten beiden durch das style-Attribut positioniert, das dritte über einen <DIV>-Tag mit rotem Hintergrund.

Drei absolut positionierte SVG-Grafiken

Abbildung: Drei absolut positionierte SVG-Grafiken.

Der für diese Anzeige notwendige Quellcode sieht wie folgt aus:

<HTML>
  <HEAD>
    <TITLE>Einbinden von SVG-Grafiken in Webseiten</TITLE>
  </HEAD>
  <BODY>
    <OBJECT type="image/svg+xml" data="Bsp01.svg" height="100px" style="position:absolute;top:10px;left:100px">
      <img src="Bsp01.gif" align="left" valign="absmiddle" alt="Sie haben keinen SVG-Viewer installiert"/>
    </OBJECT>
    <OBJECT type="image/svg+xml" data="Bsp01.svg" width="200px" height="20px" style="position:absolute;top:250px;left:200px"></OBJECT>
    <DIV style="position:absolute;top:300px;left:50px;background-color:red">
      <EMBED src="Bsp01.svg" type="image/svg-xml" width="200px" height="20px"/>
    </DIV>
  </BODY>
</HTML>

   

<< zurück vor >>

 

 

 

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

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