SVG im Wiki

[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