SVG im Wiki

[Rolf B]

Hallo alle,

https://wiki-test.selfhtml.org/wiki/Datei:NeueResponsivitaet2.svg

warum funktioniert diese Datei nicht im Wiki? Ich habe sie jetzt ins Testwiki gestellt, um das Normalwiki nicht weiter zu vermüllen.

Ruft man die Originaldatei ab, sieht sie (in Chrome und auch IE) wie erwartet aus (bis auf die Hilfspfade, die müssen noch weg, und die Textschatten, die kann der IE nicht). Aber der Wiki-Rasterizer funktioniert nicht.

Die Datei validiert beim W3 mit SVG 1.0 und auch SVG 1.1. Die Datei von Matthias, von der ich ausgegangen bin, hat auch im Wiki funktioniert. Was mache ich, das das Wiki austicken lässt?

• erster Versuch: text-shadow weglassen. Das hat es nicht verbessert.
• Fremdversuch: Verwende cloudconvert.com statt den Konvertierer des Wiki. Der kennt diverse Engines, und NUR die namens "Chrome" macht es richtig.

Das Wiki verwendet eine Library, librsvg, und die ist scheinbar nicht so dolle, wenn es über Basics hinaus geht. Cloudconvert hat auch Macken, für ihn ist font-family:sans-serif deutlich breiter als für meinen Windows PC. Und er schmeißt mich nach 10 Konvertierungen raus.

Oh Mann. Jetzt schreib ich halt mit JS einen canvas-basierenden svg-to-png Konvertierer 😟. Quick'n'dirty und für genau einen Zweck - falls es jemand mal braucht. In Chrome und FF probiert.

<canvas id="malkiste" width="800" height="600"></canvas>
<a id="downloadhere" download="bild.png" href="#">click me to save</a>
<script>
let malkiste = document.getElementById("malkiste");
let bild = new Image(800,600);
bild.src = "neueResponsivitaet2.svg";

bild.onload = function() {
  malkiste.getContext("2d").drawImage(bild,0,0);
  let blob = malkiste.toBlob(function(blob) {
    document.getElementById("downloadhere").href = URL.createObjectURL(blob);
  });
}
</script>

Rolf

[Matthias Scharwies]

Servus!

Hallo alle,

https://wiki-test.selfhtml.org/wiki/Datei:NeueResponsivitaet2.svg

warum funktioniert diese Datei nicht im Wiki? Ich habe sie jetzt ins Testwiki gestellt, um das Normalwiki nicht weiter zu vermüllen.

Ruft man die Originaldatei ab, sieht sie (in Chrome und auch IE) wie erwartet aus (bis auf die Hilfspfade, die müssen noch weg, und die Textschatten, die kann der IE nicht). Aber der Wiki-Rasterizer funktioniert nicht.

Die Datei validiert beim W3 mit SVG 1.0 und auch SVG 1.1. Die Datei von Matthias, von der ich ausgegangen bin, hat auch im Wiki funktioniert. Was mache ich, das das Wiki austicken lässt?

Das obsolete <style type="text/css"> type-Attribut, das für den png-Converter benötigt wird, hast du schon gefunden.

• erster Versuch: text-shadow weglassen. Das hat es nicht verbessert.
• Fremdversuch: Verwende cloudconvert.com statt den Konvertierer des Wiki. Der kennt diverse Engines, und NUR die namens "Chrome" macht es richtig.

Das Wiki verwendet eine Library, librsvg, und die ist scheinbar nicht so dolle, wenn es über Basics hinaus geht. Cloudconvert hat auch Macken, für ihn ist font-family:sans-serif deutlich breiter als für meinen Windows PC. Und er schmeißt mich nach 10 Konvertierungen raus.

Oh Mann. Jetzt schreib ich halt mit JS einen canvas-basierenden svg-to-png Konvertierer 😟. Quick'n'dirty und für genau einen Zweck - falls es jemand mal braucht. In Chrome und FF probiert.

<canvas id="malkiste" width="800" height="600"></canvas>
<a id="downloadhere" download="bild.png" href="#">click me to save</a>
<script>
let malkiste = document.getElementById("malkiste");
let bild = new Image(800,600);
bild.src = "neueResponsivitaet2.svg";

bild.onload = function() {
  malkiste.getContext("2d").drawImage(bild,0,0);
  let blob = malkiste.toBlob(function(blob) {
    document.getElementById("downloadhere").href = URL.createObjectURL(blob);
  });
}
</script>

Super! Aber wie können wir das nutzen? AM einfachsten wäre es, wenn Mediawiki, bzw die Wikipedia und wir auf den png-Converter verzichten.

Mittlerweile können alle Browser, selbst IE11 SVG und die Vorteile, komplizierte Filter vorher zu rendern und platzsparend abzulegen, trifft für unsere Infografiken nicht zu.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Aber wie können wir das nutzen?

Nur im Handbetrieb. Dieser Wikimedia-Artikel – gerade erst genauer gelesen – führt Probleme mit der und Gründe für die Konvertierung auf.

https://commons.wikimedia.org/wiki/Help:SVG#librsvg

librsvg leidet an FLOSS-Fäule: der Entwickler tut nix mehr dran. Die Arbeit wurde wohl von anderen wieder aufgenommen, aber die wollten modern sein und haben erstmal einen Teil des Codes nach Rust portiert und damit den Einsatz verkompliziert. Wikimedia ist zur Zeit nicht imstande, eine neuere Version einzubinden, die zumindest einen Teil der bekannten Defekte behebt.

Jetzt weiß ich: Textpfade sind einer davon, was ein Grund für das Scheitern meines SVGs ist.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Aber wie können wir das nutzen?

Nur im Handbetrieb. Dieser Wikimedia-Artikel – gerade erst genauer gelesen – führt Probleme mit der und Gründe für die Konvertierung auf.

https://commons.wikimedia.org/wiki/Help:SVG#librsvg

librsvg leidet an FLOSS-Fäule: der Entwickler tut nix mehr dran. Die Arbeit wurde wohl von anderen wieder aufgenommen, aber die wollten modern sein und haben erstmal einen Teil des Codes nach Rust portiert und damit den Einsatz verkompliziert. Wikimedia ist zur Zeit nicht imstande, eine neuere Version einzubinden, die zumindest einen Teil der bekannten Defekte behebt.

Jetzt weiß ich: Textpfade sind einer davon, was ein Grund für das Scheitern meines SVGs ist.

Ok.

Wie gesagt, SVGs einfach so rendern. Wo wäre denn das Problem? Beim Hochladen müsste man eben nur schauen, dass kein JS drin ist.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

das Problem könnte zwischen den Ohren einiger Mediawiki-Betonköpfe liegen. Sie führen dann Ausnahme-SVGs an, bei denen das PNG deutlich kleiner ist (gerade bei Thumbnail-Bildern relevant) oder das Browserverhalten pathologisch langsam ist. (Quelle)

Das Bilder-Feature von Mediawiki ermöglicht, wenn ich das richtig verstehe, das direkte Einbinden von SVGs nicht. Es sei denn, du hast da was entdeckt, wovon ich nichts weiß.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

das Problem könnte zwischen den Ohren einiger Mediawiki-Betonköpfe liegen. Sie führen dann Ausnahme-SVGs an, bei denen das PNG deutlich kleiner ist (gerade bei Thumbnail-Bildern relevant) oder das Browserverhalten pathologisch langsam ist. (Quelle)

Das Bilder-Feature von Mediawiki ermöglicht, wenn ich das richtig verstehe, das direkte Einbinden von SVGs nicht. Es sei denn, du hast da was entdeckt, wovon ich nichts weiß.

Ne, eben nicht. Aber die von dir oben aufgeführten (und wsl. nicht geteilten) Bedenken sind imho nicht schlüssig.

Herzliche Grüße

Matthias Scharwies