[SVG] Frage zu einbindung von svg-Grafik in html

[Crys]

Seit einigen Tage beschäftige ich mich mit svg Grafiken, also Grafiken auf Vektorbasis in xml geschrieben

Wie kann man eine svg-Grafik in xhtml einbinden, sodass Aktionen auch noch funktionieren?
Mit Aktionen meine ich als Beispiel Links in der Grafik, Tooltips oder einen MouseOver Effekt.
Hier ein Beispiel (auf meiner Seite hochgeladen, da ich keine Seite gefunden habe, auf der mal svg's hochladen kann):

Wenn man die Grafik alleine betrachtet, dann kann man das erste Rechteck anklicken und man wird weitergeleitet, den zweiten Kasten kann man mit der Maus berühren und dann ändert er die Farbe und beide Kästen haben ToolTips.
>>> das ist ein Link: test.svg <<<

Wenn man die Grafik z.B. hier einbindet, dann hat man keinen Link, kein MouseOver und keine ToolTips:

Wie muss ich die svg-Grafik in xhtml einbinden, sodass die Effekt auch funktionierten?
(Ich möchte die Grafik auf meine eigene Homepage einbinden)


Ein weiteres Problem ist, wenn man die Grafik wieder alleinstehend betrachtet und mit der Maus über den Text fährt, dann hat man weder Link noch MouseOver vom Element, obwohl der Text auch ein Kind, von der Anweisung ist.
Wie bekomme ich es hin, dass der Link/MouseOver auch auf den Text angewendet wird?


Den Quelltext vom Bild kann sich jeder selbst anschauen, ist ja frei einsehbar.


Wenn mir jemand wirklich bei meinen beiden Problemen helfen kann, dann bin ich dankbar!

 

[Daaron]

Wenn du nur auf moderne Browser abzielst: einfach den SVG-Code in den HTML-Code schreiben

 

[Crys]

Danke, mit xhtml ist das nicht möglich. Mit html5 scheint das aber valide zu sein und mein zweites Problem verschwindet beim Link auch, nicht aber beim MouseOver.

 

[Daaron]

In XHMTL dürfte es spätestens dann valide sein, wenn du den Namespace entsprechend erweiterst. Außerdem fällt mir eh grad kein Grund ein, warum man noch XHTML nutzen sollte.
Ich seh grad nicht, wie du den Mouseover gelöst hast. Wenn du SVG-Code direkt in HTML einbettest, dann ist jeder Knoten der SVG ein Teil des DOM und lässt sich darüber ansprechen. MAnche Sachen klappen wohl sogar per CSS, für den Löwenanteil kannst du aber auf dieselben JavaScript - Techniken zurückgreifen, die du auch für HTML nutzen würdest.

 

[Crys]

Außerdem fällt mir eh grad kein Grund ein, warum man noch XHTML nutzen sollte.

Stimmt, hab halt mal vor 4 Jahren mit xhtml angefangen, weil es damals wirklich mehr sinn machte, als html4

Ich seh grad nicht, wie du den Mouseover gelöst hast.

<set xlink:href="#rect" attributeName="fill" begin="mouseover" to="green" />
<set xlink:href="#rect" attributeName="fill" begin="mouseout" to="red" />

Zeile 48/49 in der SVG.

für den Löwenanteil kannst du aber auf dieselben JavaScript - Techniken zurückgreifen, die du auch für HTML nutzen würdest.

Mit JS kenne ich mich leider nicht so gut aus. Aber wenn man programmieren kann, sollte skripten nicht so schwer sein

 

[carom]

Danke, mit xhtml ist das nicht möglich. Mit html5 scheint das aber valide zu sein und mein zweites Problem verschwindet beim Link auch, nicht aber beim MouseOver.

Darf ich fragen, warum das nicht möglich sein sollte?
Wenn du magst, kannst du HTML5 übrigens nach wie vor als XML ausliefern.

 

[Crys]

Darf ich fragen, warum das nicht möglich sein sollte?

Was nicht Möglich?
Das Problem, mit dem MouseOver besteht auch bei html5.
Auf html5 umsteigen ist kein Problem, bzw. mit wenig Änderungen möglich.

Wenn du magst, kannst du HTML5 übrigens nach wie vor als XML ausliefern.

Was meinst du damit?
html5 ist doch eine Form von xml!?

 

[carom]

Was nicht Möglich?
Das Problem, mit dem MouseOver besteht auch bei html5.
Auf html5 umsteigen ist kein Problem, bzw. mit wenig Änderungen möglich.

Es klang bei dir oben so, als wäre es nicht möglich, SVGs direkt in XHTML einzubetten.
Das mit dem Mouseover kannst du mit CSS umschiffen. Versuche mal folgendes:

text { pointer-events:none }

Kannst es natürlich auch direkt in das text-tag als Attribut einbauen.

Was meinst du damit?
html5 ist doch eine Form von xml!?

html5 ist einfach html5. Das kannst du als HTML oder als XML ausliefern. Im letzteren Fall redet selbst das W3C von "XHTML5", wohlgemerkt in Anführungsstrichen. Da es sich aber kaum lohnt, deine Website XML-konform zu schreiben, wenn sie hinterher nicht auch als " application/xhtml+xml" ausgeliefert wird, kannst du das getrost ignorieren.

 

[Crys]

Es klang bei dir oben so, als wäre es nicht möglich, SVGs direkt in XHTML einzubetten.

Gehen ja, aber eben nicht valide

Danke, mit "pointer-events:none;" klappt es

html5 ist einfach html5. Das kannst du als HTML oder als XML ausliefern. Im letzteren Fall redet selbst das W3 von "XHTML5", wohlgemerkt in Anführungsstrichen. Da es sich aber kaum lohnt, deine Website XML-konform zu schreiben, wenn sie hinterher nicht auch als " application/xhtml+xml" ausgeliefert wird, kannst du das getrost ignorieren.

Sprich alle Tags müssen mit /> geschlossen werden und so, dass ist dann xml!?
Wenn ja, dann werde ich das natürlich weiter so durchziehen.
Irgendwie hat da jeder seine eigene Definition

 

[carom]

Gehen ja, aber eben nicht valide

Wie Daaron sagte, mit angegebenem Namespace (und den sollte man so oder so immer angeben) dürfte es eigentlich keine Probleme geben. Damit gibst du quasi bekannt, dass deine Elemente im HTML-Doc, welche die Grafik betreffen, eben nicht aus HTML stammen.

Sprich alle Tags müssen mit /> geschlossen werden und so, dass ist dann xml!?

Zum Beispiel, falls dein Element kein schließendes Tag hat. Dein Dokument muss betreffend XML wohlgeformt sein, da gehören noch ein paar andere Dinge dazu. http://de.selfhtml.org/xml/regeln/begriffe.htm

 

[Crys]

Danke, das mit dem Namespace habe ich noch nicht ganz kapiert.
Ich muss "xmlns:svg="http://www.w3.org/2000/svg"" deklarieren und dann bei allen Elementen der SVG den Präfix "svg:" (z.B: svg:rx) hin setzten!?


Btw.: svg's sind so geil. Einfach zu programmieren, super klein (in der kB Größe) und perfekte Qualität.
Alle meine Graphen und Diagramme lass ich nun als svg's erzeugen.
Vorher alles per imagepng, imagejpeg usw. erstellen lassen. Was für ein Aufwand für eine Pixelgrafik, wenn das mit Vektoren doch so viel schöner und einfacher ist.
Hätte ich das gewusst, dann hätte ich mich im Abi viel leicher für Vektor-Geometrie interessieren lassen ... was soll's

 

[Daaron]

Wenn du so von SVGs begeistert bist, dann hast du sicher auch schon einen Blick auf Inkscape geworfen. So ziemlich alles, was du in Inkscape entwirfst, ist in den richtig modernen Browsern auch darstellbar.
Für mich als praktisch arbeitenden Webentwickler ist SVG leider noch nur eine Spielerei. Ich würde gern viel mehr mit SVG arbeiten, z.B. SVG-Hintergründe oder als Masken.. is aber nicht drin. Solange der IE8 noch locker 10-15% Marktanteil hat ist sowas einfach keine Option.

 

[carom]

Danke, das mit dem Namespace habe ich noch nicht ganz kapiert.
Ich muss "xmlns:svg="http://www.w3.org/2000/svg"" deklarieren und dann bei allen Elementen der SVG den Präfix "svg:" (z.B: svg:rx) hin setzten!?

Das ist eine Möglichkeit. Du kannst den Namespace auch direkt im startenden SVG-Tag festlegen und brauchst für die Kindelemente dann keinen Präfix.

https://developer.mozilla.org/en-US/docs/SVG/Namespaces_Crash_Course

... super klein (in der kB Größe) ...

Bei einfachen Grafiken mit geometrischen primitiven stimmt das, aber bei hohem Detaillierungsgrad explodiert die Dateigröße sofort. Schau dir beispielsweise mal die SVG-Karten auf Wikipedia zu Ländern an. Jede einzelne Krümmung in Flussverlaufen oder an Landesgrenzen muss modelliert werden, und da ist XML als textbasierte "human-readable" Sprache eben sehr ineffizient. Wenn man hier den Vorteil der Vektorskalierung nicht braucht und mit fixen Bildgrößen auskommt, dann sind da Rastergrafiken doch sehr viel kleiner.

 

[Daaron]

JPEGs sind oftmals wirklich kleiner. Sobald man aber Transparenzen braucht hörts ganz schnell auf. Ich hab letztens ein einfaches "Play" - Symbol gebraucht, so grob 30x30px, n Kreis mit Glas-Optik. Die PNG war 20-30% größer als die SVG.

 

[Crys]

Inkscape kenne ich, aber ich habe mich gerade schon etwas in Illustator eingearbeitet.
Für die Webseite liegt mein Augenmerk aber nicht auf statische Grafiken, sondern auf dynamische Graphen und Diagramme, die ich in php berechne.
Meist habe ich 5 bis 1k Datenpunkte und bisher war jede Grafik kleiner als eine vergleichbare png und im nach hinein auch einfacher zu berechnen.
Und da ich das alles nur privat für ne Hand voll Leute programmiere, weiß ich, dass niemand den IE verwendet und kann denn getrost vernachlässigen


Das mit dem Namespace bekomme ich mit xhtml noch immer nicht gebacken: w3c der svg-Grafik in xhtml
Aber mit html5 geht das ohne weiteres.

 

[Daaron]

Das mit den Namespaces ist so eine Sache. Unter XHTML gibts ja den Facebook-Namespace FBXML für die Like-Buttons etc. Egal, ob man den Namespace jetzt deklariert oder nicht, Validatoren regen sich jedes Mal über <fb:like> auf.