joerghuelsermann.de Das id Attribut in SVG

Das id Attribut in SVG

Für mehrere Funktionen in SVG nimmt man Bezug auf das id Attribut. Durch diese Referenzierung von Objekten kann man andere Objekte beeinflussen. Und dieses Themengebiet möchte ich mit Hilfe mehrerer Beispiele verdeutlichen.

Referenzierung

Falls man SVG Bereiche innerhalb einer Webseite verwendet und dann eine Referenzierung vornimmt kann es vorkommen das durch ein base Element die im Grunde relativen Angaben missverstanden werden. Die Angabe für den Bezeichner url(#id) kann man zur Vermeidung dieses Fehlers um die Angabe des absoluten Pfades erweitern, was dann url(/pfad#id) entsprechen würde. Falls mehrere Referenzierungen vorgenommen werden kann man theorethisch auch den gesamten SVG Bereich mit einer Basis xml:base="/pfad" versehen. Nur leider wird diese Methodik nicht in jedem Fall unterstützt. Das xml:id Attribut wird als Alternative für das id Attribut in der SVG 1.1 Spezifikation erwähnt. In Wirklichkeit scheint diese Alternative nur in der SVG Tiny 1.2 Spezifikation enthalten zu sein.

Definition von Objekten

Das Definitionen innerhalb von SVG Bereichen in XHTML Dokumenten für das ganze Dokument verfügbar sind wirkt sich dann auch auf CSS Spezifikationen aus. Nutzen wir diese Gegebenheit aus um sämtliche Definitionen in einem Bereich zu deklarieren um Redunanzen zu vermeiden.

Bewusst verwende ich diese Aufteilung welche sich negativ auf das Verständnis für die Beispiele auswirken könnte aber im Gegenzug dazu aufzeigt, wie diese Technik anwendbar ist.

Definitionen für die Beispiele
<defs>
<filter id="sat" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
<feColorMatrix values="0" in="SourceGraphic" type="saturate" />
</filter>
<image id="bild_joerg" width="180" height="240" xlink:href="/bild/ich.jpg" />
<clipPath id="bild_ausschnitt">
<circle id="clip-kreis" cx="90" cy="90" r="70" />
<animate xlink:href="/pfad#clip-kreis" attributeType="XML" attributeName="r" begin="0s" dur="5s" from="90" to="75" repeatDur="indefinite" />
</clipPath>
<radialGradient id="maske_verlauf" cx=".5" cy=".5" r=".9">
<stop offset="0" stop-color="white" />
<stop offset="1" stop-color="black" />
</radialGradient>
<animate xlink:href="/pfad#maske_verlauf" attributeType="XML" attributeName="r" begin="0s" dur="12s" calcMode="discrete" values=".9;.7;.5;.3;.1;.3;.5;.7;.9" repeatDur="indefinite" />	
<mask id="bild_maske">
<path d="m0,90 l45,-78 l90,0 l45,78 l-45,78 l-90,0 z" fill="url(/pfad#maske_verlauf)">
</mask>
<pattern id="muster" width="20" height="20" x="0" y="0" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="gray" />
<rect x="0" y="0" width="10" height="10" fill="white" />
<rect x="10" y="10" width="10" height="10" fill="black" />
</pattern>
<marker id="marker_anfang" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" orient="auto">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
<marker id="marker_mitte" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" orient="auto">
<path d="M0,0 L10,10 M0,10 L10,0" stroke-width="3" stroke="blue" />
</marker>	
<marker id="marker_ende" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="5" orient="auto">
<path d="m0,0 l10,5 l-10,5 z" fill="green" />
</marker>
</defs>

Animationen

In den Definitionen zuvor habe ich teilweise eine Animation zusätzlich referenziert. Es existiert noch eine Möglichkeit innerhalb der betreffenden Elemente diese Verknüpfung zu realisieren.

Zuweisung von Animationen
<circle id="clip-kreis" cx="90" cy="90" r="70" />
<animate xlink:href="/pfad#clip-kreis" attributeType="XML" attributeName="r" begin="0s" dur="5s" from="90" to="75" repeatDur="indefinite" />
<circle cx="90" cy="90" r="70">
<animate attributeType="XML" attributeName="r" begin="0s" dur="5s" from="90" to="75" repeatDur="indefinite" />
</circle>

Filter

In unseren Defifinitionen haben wir einen Filter und ein Bild definiert. Auf diese Angaben kann man nun zugreifen.

Sättigung beeinflussen
<use x="0" y="0" xlink:href="/pfad#bild_joerg" />
<use x="180" y="0" xlink:href="/pfad#bild_joerg" filter="url(/pfad#sat)" />

Eine Anwendung dieser Filter möchte ich hier noch erwähnen.

Ausschneiden

Möchten wir nun einen Bereich ausschneiden benötigen wir nur noch eine Form die wir verwenden wollen.

Sättigung beeinflussen
<use x="0" y="0" xlink:href="/pfad#bild_joerg" clip-path="url(/pfad#bild_ausschnitt)" />

An dieser Stelle dann noch einige Beispiele für Ausschnitte.

Maskierung

Für das Beispiel der Maskierung habe ich einen radialen Farbverlauf animiert um damit auch deutlich zu zeigen wie diese Methode funktioniert. Die Stufe der Helligkeit der Maske im Vordergrund bewirkt den sichtbaren Anteil des Hintergrundbildes. Zum besseren Vergleich habe ich die verwendete Maske zusätzlich dargestellt.

Maskierung
<use x="0" y="0" xlink:href="/pfad#bild_joerg" mask="url(/pfad#bild_maske)" />

Mit dieser SVG Datei weise ich nochmal darauf hin, wie sich verschiedene Helligkeiten der Maske auswirken.

CSS Eigenschaften

Die Eigenschaften filter, clip-path und mask sind mittlerweile auch in CSS übernommen worden. Da speziell in diesen Fällen es möglich ist auch einen Verweis auf SVG zu verwenden, möchte ich diese CSS Eigenschaften auch in der Praxis anwenden. Die Unterstützung dieser Eigenschaften ist momentan nicht immer gegeben. Für weitere Informationen verweise ich auf die Spezifikationen für Filter und Ausschnitte und Masken.

JörgJörgJörg
CSS Eigenschaften
img{filter:url(/pfad#sat);}
img{clip-path: url(/pfad#bild_ausschnitt);}
img{mask:url(/pfad#bild_maske);}

Muster

Die Referenzierung auf ein Muster wird auch durch das id Attribut vorgenommen.

Muster verwenden
<circle cx="100" cy="100" r="100" fill="url(/pfad#muster)" />

Marker

Für den Einsatz von Markern habe ich einen Pfad gewählt und diesen dann auf zwei unterschiedliche Weisen unterteilt. Je nach Interpretation der Unterteilung erreicht man unterschiedliche Ergebnisse.

Marker bei Pfaden
<path d="M10,10 h30 v50 l-30,-20 v30 a30,30 0 0,1 30,30" stroke-width="3" stroke="black" fill="none" marker-start="url(/pfad#marker_anfang)" marker-mid="url(/pfad#marker_mitte)" marker-end="url(/pfad#marker_ende)" />
<path d="M60,10 h30 v50 l-30,-20 m0,30 a30,30 0 0,1 30,30" stroke-width="3" stroke="black" fill="none" marker-start="url(/pfad#marker_anfang)" marker-mid="url(/pfad#marker_mitte)" marker-end="url(/pfad#marker_ende)" />
<path d="M110,10 h30 v50 l-30,-20" stroke-width="3" stroke="black" fill="none" marker-start="url(/pfad#marker_anfang)" marker-mid="url(/pfad#marker_mitte)" marker-end="url(/pfad#marker_ende)" />
<path d="M110,70 a30,30 0 0,1 30,30" stroke-width="3" stroke="black" fill="none" marker-start="url(/pfad#marker_anfang)" marker-mid="url(/pfad#marker_mitte)" marker-end="url(/pfad#marker_ende)" />

Verschiedene Ansichten

Es ist möglich über das view Element zusätzliche Ansichten in SVG Dateien zu definieren.

Mein Beispiel besteht aus insgesamt drei Aktionskarten, die alle in einer SVG Datei abgebildet werden. Durch die verwendete Verlinkung innerhalb der SVG Datei musste ich die Aktionskarten zweimal positionieren. Ohne diese interne Verlinkung wäre eine Position ausreichend gewesen. Jetzt bin ich in der Lage diese Sichten auch einzeln zu verwenden.

Mehrere Ansichten mit Verlinkung
<defs>
<image id="ak1" width="347" height="250" xlink:href="/svg/aktionskarte1.jpg" x="0" y="0" />
<image id="ak2" width="347" height="250" xlink:href="/svg/aktionskarte2.jpg" x="0" y="0" />
<image id="ak3" width="347" height="250" xlink:href="/svg/aktionskarte3.jpg" x="0" y="0" />
<view id="aktionskarte1" viewBox="0 1000 347 250" />
<view id="aktionskarte2" viewBox="0 1250 347 250" />
<view id="aktionskarte3" viewBox="0 1500 347 250" />
</defs>
<a xlink:href="/svg/prsks-aktionskarten.php#aktionskarte1" xlink:title="Aktionskarte 1">
<use x="0" y="0" xlink:href="#ak1" />
</a>
<a xlink:href="/svg/prsks-aktionskarten.php#aktionskarte2" xlink:title="Aktionskarte 2">
<use x="0" y="250" xlink:href="#ak2" />
</a>
<a xlink:href="/svg/prsks-aktionskarten.php#aktionskarte3" xlink:title="Aktionskarte 3">
<use x="0" y="500" xlink:href="#ak3" />
</a>
<a xlink:href="/svg/prsks-aktionskarten.php" xlink:title="Aktionskarten">
<use x="0" y="1000" xlink:href="#ak1" />
<use x="0" y="1250" xlink:href="#ak2" />
<use x="0" y="1500" xlink:href="#ak3" />
</a>

Die vier vorhandenen Darstellungen kann man nun auch einzeln aufrufen.

Technik Test

Wenn diese Technik nun unterstützt wird sollte dieser Test zumindest zeigen ob einfache Formen unterstützt werden. Zum Zeitpunkt der Erstellung dieser Seite konnte ich in keinem Fall Bilder in SVG Dateien in dieser Form ansprechen ausser diese lagen als dataurl vor. Dieser Test bindet den Teilbereich der SVG Datei als Bild und als Hintergrundbild ein.

Test für die Unterstützung dieser Technik

Bildergalerie

Mit einem leicht modifizierten Aufbau ist es mir gelungen eine Galerie mit dieser Technik aufzubauen.