Definierte Objekte innerhalb einer SVG-Datei mehrfach verwenden?

[Murphy]

Hallo,
ich weiß nicht genau, inwieweit das hier das passende Forum ist; heißt schließlich SelfHTML und nicht SelfSVG. ;)
Was SVG betrifft bin ich eigentlich ziemlicher Anfänger. Bisher habe ich mich auf eher simple Formen beschränkt.

Meine Frage ist nun: Angenommen ich habe ein komplexeres Objekt als Gruppe, kann ich dann irgendwie auf einfache Art und Weise dieses Objekt mehrfach im Bild darstellen? (Also entsprechend an unterschiedlichen Positionen und ggfl. mit verschiedenen Transformationen)
Oder muss ich das Objekt jedes Mal neu definieren und die Datei so aufblähen?

[ThomasM]

Hallo Murphy,

Meine Frage ist nun: Angenommen ich habe ein komplexeres Objekt als Gruppe, kann ich dann irgendwie auf einfache Art und Weise dieses Objekt mehrfach im Bild darstellen? (Also entsprechend an unterschiedlichen Positionen und ggfl. mit verschiedenen Transformationen)
Oder muss ich das Objekt jedes Mal neu definieren und die Datei so aufblähen?

Objekt definieren mit ID (g, symbol) und mit use referenzieren (Beispiel):

Siehe dazu auch diesen aktuellen Artikel.

Grüße,
Thomas

[Murphy]

Klasse, genau so habe ich mir das vorgestellt.

Hab' da noch eine andere SVG-Frage, will aber keinen neuen Thread aufmachen:

Ich habe gelesen, dass es (wohl aus Gründen der Sicherheit) nicht möglich ist einer SVG-Datei, die mit IMG-Tag in ein HTML-Dokument eingebunden wird, ein externes Stylesheet zuzuweisen.
Lässt sich das irgendwie trotzdem realisieren, oder bleibt nur die Wahl zwischen „<object> verwenden“ und „Inline-Stylesheet”?

[ThomasM]

Hallo Murphy,

Ich habe gelesen, dass es (wohl aus Gründen der Sicherheit) nicht möglich ist einer SVG-Datei, die mit IMG-Tag in ein HTML-Dokument eingebunden wird, ein externes Stylesheet zuzuweisen.
Lässt sich das irgendwie trotzdem realisieren, oder bleibt nur die Wahl zwischen „<object> verwenden“ und „Inline-Stylesheet”?

Zumindest IE 10 und Opera 12.17 können das, mit Firefox, Chrome und Safari geht es offenbar nicht.

Grüße,
Thomas

[Murphy]

Hi Thomas,

Zumindest IE 10 und Opera 12.17 können das, mit Firefox, Chrome und Safari geht es offenbar nicht.

Das der IE sich da anders verhält als der FF ist mir auch schon aufgefallen. Aber ein einheitliches Verhalten wäre da schon wünschenswert.
Ich hatte gehofft es gäbe da irgendwelche „Tricks”, wie z.B. eine Option für das IMG-Tag oder den HEAD-Bereich des einbindenden HTML-Dokuments.
Naja, muss ich meine Stylesheets halt vorerst inline verwenden.

Mir sind da noch ein paar weitere Fragen gekommen; die Antworten dürften wahrscheinlich eher subjektiv sein:
A) Gibt es sowas wie eine Empfehlung, welche Präzision für SVG-Dateien sinnvoll ist? Ich habe hier zum Beispiel eine automatisch generierte Datei (Corel Draw), in der alles mit bis zu sechs Nachkommastellen definiert war. Ich hab' dann ein Skript drüberlaufen lassen und alles auf zwei Nachkommestellen gerundet. Die Datei wurde dadurch signifikant kleiner, ohne dass die Grafik meiner Ansicht nach (wortwörtlich gemeint) irgendwie Detailreichtum eingebüsst hätte.

B) Was ist die ‚sinnvollste‘ Möglichkeit um einen Pfeil darzustellen? Also eine Linie von Punkt A nach Punkt B, mit einem kleinen Dreieck an mindestens einem der Enden? Im Moment schwanke ich da zwischen drei Möglichkeiten:
  1. Gruppierung aus einer gewöhnliche Linie und einem kleinen Dreieck.
  2. Wie 1, mit dem Unterschied, dass das Dreieck als Objekt definiert und mit use verwendet wird.
  3. Ein einzelner Pfad, der vom Start zum Endpunkt geht und von dort dann das Dreieck formt.

Irgendwie tendiere ich am ehesten zu Variante 1 oder 2, wobei die zweite Variante ja den Vorteil hat, dass man sämtliche Dreiecke ggf. einfach durch etwas anderes (Pfeil o.ä.) ersetzen kann.

[ThomasM]

Hallo Murphy,

A) Gibt es sowas wie eine Empfehlung, welche Präzision für SVG-Dateien sinnvoll ist? Ich habe hier zum Beispiel eine automatisch generierte Datei (Corel Draw), in der alles mit bis zu sechs Nachkommastellen definiert war. Ich hab' dann ein Skript drüberlaufen lassen und alles auf zwei Nachkommestellen gerundet. Die Datei wurde dadurch signifikant kleiner, ohne dass die Grafik meiner Ansicht nach (wortwörtlich gemeint) irgendwie Detailreichtum eingebüsst hätte.

1 bis 2 Nachkommastellen sind für Webanwendungen nach meiner Erfahrung völlig ausreichend. Ich verwende dazu eine XSL-Transformation, eigentlich für die Säuberung von Inkscape-Code gedacht.

B) Was ist die ‚sinnvollste‘ Möglichkeit um einen Pfeil darzustellen?

Das marker-Element und die zugehörigen Steuerattribute wie marker-start, marker-end und marker-mid bieten sich an.

Grüße,
Thomas