[SVG] Weiße Ränder zwischen path-Elementen



  • Hallo,

    ein Bild sagt mehr als 1000 Worte: http://imageshack.us/photo/my-images/210/edges.png/. Zu sehen ist eine Vektorgrafik im SVG Format. Auffällig sind die weißen Ränder zwischen den einzelnen Regionen. Diese würde ich gerne entfernen, d.h. die einzelnen Regionen sollen direkt ineinander übergehen.

    Ich habe bereits versucht, das Problem mithilfe von Strokes derselben Farbe zu umgehen. Bei kleinen Grafiken führt dies jedoch zu einer zu starken Überlappung der Elemente, was optisch nicht akzeptabel ist. Ebenfalls nützt ein Stroke von z.B. 1 bei sehr großen Bildern nichts mehr, wenn das Bild sehr klein skaliert wird.

    Das Problem liegt ja grundsätzlich gar nicht im SVG selbst, sondern am Renderer. Da allerdings FireFox, Inkscape und der IE die Datei identisch mit den weißen Rändern rendern (haha!), muss es ja letztlich irgendwie eine Einstellung geben, die dafür sorgt, dass das Ganze eben genau so dargestellt wird. Herumspielen mit rendering-styles hat leider nicht geholfen (vielleicht habe ich die aber auch nicht korrekt genutzt?).

    Da eine Konvertierung in *.pdf das Problem behebt und die Regionen ohne den weißen Rand miteinander vereint, sollte dies für SVG-Renderer ja auch möglich sein.

    Ich hoffe, jemand weiß Rat, was ich in der SVG-Datei zu schreiben habe, um die Ränder loszuwerden.

    Beste Grüße
    K. P.



  • lad mal das svg hoch, ich jage es mal durch meinen renderer und schaue woran es liegen koennte 😉

    ich vermute aber es haengt mit dem antialiasing alrogithmus zusammen.



  • Vermute ich auch.

    @Knecht Purpecht
    Ich kenne das SVG-Format nicht. Falls das Format es erlaubt Flächen zu "überzeichnen", dann könnte man das File vermutlich schon so optimieren, dass jeder Renderer es halbwegs hübsch darstellen wird.
    Auf dein Beispielbild bezogen: erst den roten Hintergrund malen, und zwar ohne "Löcher" für die blauen Bereiche. Und dann die blauen Bereiche drübermalen.

    Dann werden vermutlich auch "dumme" Renderer ein "schönes" Bild hinbekommen.

    Wobei es schwierig werden dürfte einen Algorithmus zu (er)finden der ein beliebiges Eingabefile so verbastelt, dass es nachher "gleich" aussieht, nur "richtig" 🙂



  • svg ist ein xml mit vectoren um shapes zu definieren und auf farben/gradiens zu referenzieren, recht einfach an sich.

    das svg ist vermutlich aus einem bild entstanden (InkScape kann auto-vektorisieren).

    das bild an sich duerfte schon "richtig" sein, lediglich die billigen anti-aliasing algorithmen sind mit diesen syndromen versehen.

    http://www.svgopen.org/2002/papers/sorotokin__svg_secrets/ schrieb:

    Imperfect Antialiasing

    This problem is not inherent to SVG, but to implementations (including Adobe SVG Viewer). Perfect antialiasing can be done by rendering complete artwork at a much higher resolution and subsequent downsampling. In most implementations, however, antialiasing is done on a per-shape basis, not for the whole artwork. This can produce unexpected results, which are especially noticeable when two shapes share a common edge. In most cases extending one of the shapes slightly can solve this problem, but no generic method exists.

    Click here to see example. Look for thin white and black lines. See how they are not affected by zooming. Also notice that when antialiasing is turned off, these artifacts disappear.



  • Hallo,

    wenn das Ganze tatsächlich nur ein Problem des Renderers (bzw. des Anti-Alainsing-Algorithmus') ist, kann ich das akzeptieren (bleibt ja nicht viel übrig :P). Mich hatte es nur irritiert, dass sämtliche verwendeten Renderer dasselbe Problem zu haben schienen.

    Kennt denn wer einen "besseren" Renderer, der Anti-Alaising schöner implementiert?

    PS.: Die Aussage über das *.pdf war im übrigen nicht richtig. Ich hatte nur einen Bildausschnitt betrachtet, in dem das Problem nicht wirklich gut sichtbar war.


Anmelden zum Antworten