Wikipedia Diskussion:WikiProjekt SVG/Probleme des Renderers

Letzter Kommentar: vor 14 Jahren von Cäsium137 in Abschnitt symbol und use

Hier geht es um dsie Probleme des SVG-Renderers, besonders mit CSS.

Allgemein Bearbeiten

Ich habe gerade entdeckt, was hier zur Verwendbarkeit von style-Angaben steht. Irgendwie wiederspricht die Aussage, die Vererbung funktioniere nur begrenzt, meinen Erfahrungen. Ich nutze das in meinen Dateien sehr umfangreich, und bisher habe ich noch keinen Fall gefunden, in denen das nicht von librsvg korrekt wiedergegeben worden wäre. Kann jemand mal Beispiele dafür bringen?

Oder soll die Aussage vielleicht sein, dass auf einen <g>-Tag angewandte CSS-Regeln, die aus einem gesonderten Stylesheet (etwa eine CDATA-Sektion im def-Abschnitt) stammen, nicht vererbt werden? Das stimmt so, aber wenn man <g> direkt mit einem style-Attribut versieht, funktionieren nach meiner Beobachtung die Vererbungen einwandfrei.

Die Angabe, in <tspan>-Tags funktioniere font-style:italic nicht, trifft auch nicht das eigentliche Problem. Der Fehler tritt immer dann auf, wenn der Tag geschachtelt verwendet wird, also davor oder dahinter direkt Text auftaucht. Ob dabei irgendwelche Attribute angegeben werden, ist egal. Werden alle Textabschnitte mit <tspan> umgeben, so dass sie im XML-Baum nebeneinander liegen, funktioniert alles wie erwartet.

fehlerhafte Anzeige
<text style="font-size:18px;font-family:Bitstream Vera Sans">ein 
  <tspan>Stück</tspan> Text</text>
korrekte Anzeige
<text style="font-size:18px;font-family:Bitstream Vera Sans"><tspan>ein </tspan>
  <tspan>Stück</tspan><tspan> Text</tspan></text>

Außerdem halte ich die Aussage, librsvg könne keine CSS-Angaben im Dateikopf verarbeiten, für übertrieben. Es funktioniert nur so unverhersehbar, dass man von der ungetesteten Verwendung abraten muss. --Hk kng 12:46, 11. Jul. 2009 (CEST)Beantworten


transform und rotate Bearbeiten

Im oben genannten Abschnitt steht auch, dass transform zusammen mit rotate nicht von Renderer verarbeitet wird. Bei Datei:Uka work.svg funktioniert es aber gut. Oder irre ich mich? --Marsupilami (Disk|Beiträge) 23:45, 13. Jul. 2009 (CEST)Beantworten

Nur mal so in den Raum geworfen, bezieht sich die Beschreibung vielleicht auf eine ältere librsvg-Version? Welche kommt aktuelle auf den WikiMedia Servern zum Einsatz? LG, Fleshgrinder Diskussion 00:05, 14. Jul. 2009 (CEST)Beantworten
Die Versionsangabe 2.22.2 stimmt schon. Den Fehler bei rotate kann ich auch nicht nachvollziehen. (Der Vollständigkeit halbe habe ich auch mal skewX, skewY und scale durchprobiert und keine Fehler gefunden.) --Hk kng 20:03, 14. Jul. 2009 (CEST)Beantworten
Wer hat es überhaupt verfasst? Ich habe mal ein paar Typos in dem Abschnitt editiert, jedoch nie nachgeprüft ob die Behauptungen so stimmen, immerhin stand das schon auf der Projektseite bevor ich vom SVG-Projekt in der Wikipedia wusste. LG, Fleshgrinder Diskussion 22:14, 14. Jul. 2009 (CEST)Beantworten
http://de.wikipedia.org/w/index.php?title=Wikipedia:WikiProjekt_SVG&diff=prev&oldid=62023367 Ich habe Cäsium137 mal persönlich angefragt. --Hk kng 19:47, 15. Jul. 2009 (CEST)Beantworten
Ach, das ist ja noch gar nicht so lange drinnen. Irgendwie war ich der Meinung das steht schon länger da. Warten wir mal ab was Cäsium137 zu sagen hat. LG, Fleshgrinder Diskussion 22:19, 15. Jul. 2009 (CEST)Beantworten

Kopiert von Benutzer Diskussion:Cäsium137#SVG-Renderer --Hk kng 19:09, 17. Jul. 2009 (CEST)Beantworten

1. Der WP-Renderer überträgt nicht immer alle Angaben im übergeordneten g-tag auf die elemente darin. Wann genau welche Eigenschaft, das habe ich noch nicht getestet. Beispiel

Bei
<g style="Stil1; Stil2;" >
  <element style="Stil3; Stil4;>Inhalt des Elements</element>
</g>

ist nicht gewährleistet, dass für <element> alle vier Stileigenschaften wirken.

2. eine Angabe wie z.B.

<g transform="translate(tx,ty) rotate(cx,cy, arg)">

kann der Renderer auch nicht. hier muss man die Transformationsmatrix berechnen und dann

<g transform="matrix(.. .. .. ..  u.s.w. )">

schreiben.

3. Der renderer ist zu dumm für

<tspan>Normalschrift <tspan>Kursiv</tspan>Normalschrift</tspan>

Cäsium137 (D.) 20:05, 15. Jul. 2009 (CEST)Beantworten

zu 1. Ich frage noch einmal nach konkreten Beispielen, da es bei mir bisher immer funktioniert hat.
zu 2. Kann es daran liegen, dass du rotate(cx,cy,arg) geschrieben hast und nicht rotate(arg,cx,cy)? Beim ersten ist die Reihenfolge von Winkel und Rotationszentrum gegenüber der Definition vertauscht. Bei richtiger Reihenfolge kann ich den Fehler weiterhin nicht reproduzieren, auch bei Angabe von mehreren Transformationen.
zu 3. siehe oben.
--Hk kng 19:25, 17. Jul. 2009 (CEST)Beantworten

Hallo zusammen. Ich habe diese Angaben ergänzt, weil es mir bei Datei:AvHumboldts_Amerikareise_map_de.svg aufgefallen ist. Die Werte habe ich nur hier in der Erwähnung vertauscht. In fraglichem Fall habe ich die optionalen Werte weggelassen, da 0|0 gewünscht war. Evtl. kommt es nur in Kombination mit anderen Bedingungen vor. Die von mir jetzt erstellte Testdatei wird nämlich richtig dargestellt. Cäsium137 (D.) 23:02, 17. Jul. 2009 (CEST)Beantworten

Es muss noch komplizierter sein. Ich habe gerade zwei Dateiversionen heruntergeladen, http://upload.wikimedia.org/wikipedia/commons/archive/f/f5/20090530142245%21AvHumboldts_Amerikareise_map_de.svg und http://upload.wikimedia.org/wikipedia/commons/archive/f/f5/20090530125745%21AvHumboldts_Amerikareise_map_de.svg Zwischen ihnen ersetzt Du translate/rotate-Kombinationen durch matrix. Ich habe auf meinem Rechner librsvg in der gleichen Version wie die auf dem Server eingesetzte. Mit den Befehlen
rsvg -w1024 "20090530125745_AvHumboldts_Amerikareise_map_de.svg" vers1.png
rsvg -w1024 "20090530142245_AvHumboldts_Amerikareise_map_de.svg" vers2.png
was bis zu den Optionen dem entspricht, was auch die WP-Bildserver machen, habe ich zwei PNGs erzeugt. Sie sind bis auf das letzte Pixel identisch. --Hk kng 23:16, 17. Jul. 2009 (CEST)Beantworten

Bei der mit rotate sind aber (gerendert, nicht in der History!) die Objekte (die Pfeile auf der Route) verschwunden. Siehe dazu Datei:AvH Alt 1.svg. Das ist die reaktivierte Version mit "rotate" Cäsium137 (D.) 23:37, 17. Jul. 2009 (CEST)Beantworten

Meine Testdatei:

 
Mit "transform": rot: translate, grün: +rotate, blau: +scale, magenta: +skewX/Y


Das Bild hat 800px x 300px.Cäsium137 (D.) 23:45, 17. Jul. 2009 (CEST)Beantworten

Das transform-Problem habe ich, glaube ich, jetzt gefunden. Ich hatte eine Version zu spät eingesetzt. In [1] stehen die Angaben in folgender Form:
transform="translate(1070,985 ),rotate(-155)"
librsvg kommt mit dem Komma zwischen den beiden Transformationen nicht zurecht (Inkscape übrigens auch nicht). In [2] wurden bei zwei Pfeilen die Verkettungen durch matrix ersetzt, aber bei den sieben anderen Pfeilen steht einfach ein Lerzeichen zwischen den Angaben:
transform="translate(1070, 985) rotate(-155)"
Und diese Pfeile werden auch angezeigt. (Es wird spät, Demonstratonsdateien lade ich jetzt nicht mehr hoch.) --Hk kng 00:22, 18. Jul. 2009 (CEST)Beantworten
Einen kleinen Syntax-Fehler in deiner zweiten Testdatei habe ich noch beseitigt. --Hk kng 00:30, 18. Jul. 2009 (CEST)Beantworten

Danke. Das Komma also. Das ist zwar nach W3C zulässig, aber wenn man es weis, dann kann man es weglassen. Cäsium137 (D.) 03:59, 18. Jul. 2009 (CEST)Beantworten

symbol und use Bearbeiten

 
Vier Symbole, mit "use" verwendet.

Hier geht es um den Gebrauch von Symbolen: Die vier Objekte auf diesem Bild werden wie folgt erstellt:

  • Im Def-Bereich vier Symbole:
  <defs>
     <symbol id="sym1" style="fill:#ff0000; stroke:#000000; stroke-width:10;">
       <rect x="5" y="5" width="100" height="200" />
    </symbol>
     <symbol id="sym2" style="fill:#00ff00;">
       <rect style=" stroke:#000000; stroke-width:10;" x="5" y="5" width="100" height="200" />
    </symbol>
     <symbol id="sym3" style=" stroke:#000000; stroke-width:10;">
       <rect style=" fill:#0000ff;" x="5" y="5" width="100" height="200" />
    </symbol>
     <symbol id="sym4">
       <rect style=" fill:#ff00ff; stroke:#000000; stroke-width:10;" x="5" y="5" width="100" height="200" />
    </symbol>
  </defs>

Also vier Rechtecke, welche sich nur durch die Füllfarbe unterscheiden. Stroke und Fill sind unterschiedlich platziert.

  • Verwendung:
  <use x="100" y="50" xlink:href="#sym1" />
  <use x="250" y="50" xlink:href="#sym2" />
  <use x="400" y="50" xlink:href="#sym3" />
  <use x="550" y="50" xlink:href="#sym4" />

Die Platzierung erfolgt im Use-Tag. Die Style-Angaben im Rect-Tag des Symbols werden offensichtlich nicht gerendert. Cäsium137 (D.) 20:08, 18. Jul. 2009 (CEST)Beantworten