Wiki: Safari-Problem bei symbol-Beispiel

[JürgenB]

Hallo,

im Beispiel zu „symbol“, https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:SVG-symbol.html#view_result, werden die Räder im Safari viel zu groß dargestellt. Ich habe mal die viewbox-Angabe entfernt, dann stimmt die Größe, die Räder werden aber nur noch als Viertelkreis gezeigt.

Kann sich das mal jemand mit Safari und mehr Ahnung von SVG, als ich, ansehen?

Gruß
Jürgen

[Matthias Scharwies]

Servus!>

im Beispiel zu „symbol“, https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:SVG-symbol.html#view_result, werden die Räder im Safari viel zu groß dargestellt. Ich habe mal die viewbox-Angabe entfernt, dann stimmt die Größe, die Räder werden aber nur noch als Viertelkreis gezeigt.

Ich hab jetzt lang rumprobiert (ändern, ans iPhone gehen und testen), bis ich auf die Lösung gekommen bin. Die use-Elemente benötigen in Safari eine Angabe von width und height.

Ich schau mal, ob ich da drum rumkomme, indem ich das Rad doch nicht im Ursprung zentriere.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

kurzer Zwischenbericht: Der Validator hatte bei meinem Beispiel die x- und y-Attribute im symbol-Element mokiert. Ohne konnte ich es aber nicht mehr im Ursprung zentrieren und mit CSS rotieren lassen.

Ich hatte 2 Tage rumüberlegt, wie man das löst und auf SO gefragt:

SO: center symbol on origin

Man sollte ab und zu mal Pause machen.

Die Antwort von SO: "stop using the validator perhaps?" brachte mich erst auf die Lösung, dass der Validator bei SVG in HTML wohl fehlerhaft sei!

Jetzt korrigier ich erstmal meine Englisch-Abschlussprüfungen und schreibe dann weiter am Artikel!

Herzliche Grüße

Matthias Scharwies

[ThomasM]

Hallo Matthias,

kurzer Zwischenbericht: Der Validator hatte bei meinem Beispiel die x- und y-Attribute im symbol-Element mokiert. Ohne konnte ich es aber nicht mehr im Ursprung zentrieren und mit CSS rotieren lassen.

Das symbol-Element hat lt. den Specs keine Attribute x, y, width, height. Diese kommen dann über use ins Spiel. SVG 2 definiert für symbol allerdings diese vier Geometrie-Eigenschaften für CSS.

Insofern bemängeln das Validierungstools bzw. validierende Editoren korrekt.

Grüße,
Thomas

[Matthias Scharwies]

Hallo Thomas!

Der SVG-Bereich im Wiki ist von 2015! Mittlerweile weiß ich viel mehr und will bei Gelegenheit die Artikel überarbeiten. Anlass für dieses Thema war diese Diskussion im Wiki.

kurzer Zwischenbericht: Der Validator hatte bei meinem Beispiel die x- und y-Attribute im symbol-Element mokiert. Ohne konnte ich es aber nicht mehr im Ursprung zentrieren und mit CSS rotieren lassen.

Das symbol-Element hat lt. den Specs keine Attribute x, y, width, height. Diese kommen dann über use ins Spiel. SVG 2 definiert für symbol allerdings diese vier Geometrie-Eigenschaften für CSS.

Insofern bemängeln das Validierungstools bzw. validierende Editoren korrekt.

Seit September 2016 hat SVG 2 den Status einer "Candidate Recommendation", kommt die "Recommendation" überhaupt noch?

Viel wurde von den Browser-Herstellern bereits umgesetzt:

• href anstelle von XLink:href
• Styling von Präsentations- und (vielen) Geometrie-Attributen mit CSS
• CSS-Animations für SVG
• CSS-Filter auf SVG-Elemente anwenden (filter: drop-shadow( 0 0 10px yellow); erspart viele Zeilen SVG-Markup)

Mittlerweile haben wir den Luxus, dass alles, selbst SMIL, in allen modernen Browsern läuft.

Letztes Jahr empfahl ich noch, XLink:href zu verwenden, um ältere Safari-Browser zu unterstützen. Wenn ich daran denke, dass die nächste Wiki-Überarbeitung aber erst 2025 ist, würde ich gerne von SVG 2 als aktuellem Standard ausgehen, um Tutorials zu schreibe, die nicht nächstes Jahr wieder obsolet sind.

Herzliche Grüße

Matthias Scharwies

[ThomasM]

Hallo Matthias,

kurzer Zwischenbericht: Der Validator hatte bei meinem Beispiel die x- und y-Attribute im symbol-Element mokiert. Ohne konnte ich es aber nicht mehr im Ursprung zentrieren und mit CSS rotieren lassen.

Ja, weil es diese Attribute auch in SVG 2 nicht gibt. Ansonsten werden Validierer wohl auf SVG 1.1 setzen. Für die 2er Version habe ich zumindest noch kein öffentliches Datenmodell (DTD, XSD, RNG) gesehen.

Seit September 2016 hat SVG 2 den Status einer "Candidate Recommendation", kommt die "Recommendation" überhaupt noch?

Weiß ich nicht, da ist aus meiner Sicht die Kommunikation ungünstig. Es gibt eine Candidate Recommendation von 2018 und den laufend ergänzten Editor's Draft. Es läuft wohl ähnlich zu HTML5 auf einen Living Standard hinaus.

• Styling von Präsentations- und (vielen) Geometrie-Attributen mit CSS

Präsentationsattribute sind von Anfang an separat oder in ihrer CSS-Alternative nutzbar.

Koordinaten sind in CSS bei komplexen Grafiken eher aufwändig zu handhaben.

Gegenüber SVG-Attributen muss man bei Breiten und Höhen auf Einheiten achten, gerade mal mit Firefox und den Chromium-Derivaten Edge und Opera probiert.

<defs>
  <style type="text/css">
    circle { cx: 100; cy: 100; r: 50; fill: red; }
    rect { x: 200; y: 50; width: 200px; height: 100px; fill: blue; }
  </style>
</defs>
<circle/>
<rect/>

Grüße,
Thomas

[ThomasM]

Nachtrag: Firefox braucht auch bei den Koordinaten eine Einheit.

[Matthias Scharwies]

Servus!

Nachtrag: Firefox braucht auch bei den Koordinaten eine Einheit.

Danke! Im SVG-Einsteig schon drin: SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren

In der SVG:Referenz noch nicht. 😟

Herzliche Grüße

Matthias Scharwies