Vektorgrafik klein rastern - womit beste Qualität?

[Pinoccio]

Hallo,

der Threadtitel ist nicht ganz, was ich meine.
Ich habe eine SVG mit einer Grafik, die im wesentlichen aus geraden Linien besteht. Für vielerlei Zwecke wir diese nun als Bitmap benötigt. Da ich ich die Grafik in Inkscape gebaut habe ist der dortige png-Export der naheliegenste Schritt.
Nun hätte ich das ganze gerne in 300*200. Dazu habe ich nun mehrer Möglichkeiten:
1. direkter export in Zielgröße aus Inkscape
http://img269.imageshack.us/img269/6333/bspklein.gif
doof: senkrechte Linien ungleichmäßig

2. Export in 10-facher Auflösung und downsampling auf 10%:
als Link: Bild in 3k*2k (http://img217.imageshack.us/img217/5622/bspgro.gif)

2.a Paintshop Pro 5 - Methode intelligent
http://img199.imageshack.us/img199/2873/psp5intelligent.gif

2.b Paintshop Pro 5 - Methode bikubisch
http://img269.imageshack.us/img269/9816/psp5bikubisch.gif

2.c Paintshop Pro 5 - Methode doppellinig (was ist das?)
http://img104.imageshack.us/img104/9986/psp5doppelinig.gif

2. d. Photoshop (CS 1?) - Screenshot
http://img269.imageshack.us/img269/2866/photoshopscreenshot.gif

2. e. Photoshop (CS 1?) - Methode bilinear
http://img199.imageshack.us/img199/5503/photoshopbiliniear.gif

2. f. Photoshop (CS 1?) - Methode bikubisch schärfer
http://img269.imageshack.us/img269/8711/photoshopbikubischschrf.gif

2. g. Photoshop (CS 1?) - Methode bikubisch glatter
http://img15.imageshack.us/img15/9919/photoshopbikubischglatt.gif

2. h. ACDSee - Screenshot
http://img217.imageshack.us/img217/9557/acdseescreenshot.gif



0. Im Anghang: das SVG (umbenannt)

[Pinoccio]

weiterhin alles von 3k*2* auf 10% resized

2. i. Chrome 1 - Screenshot
http://img33.imageshack.us/img33/1885/chrome1screenshot.gif

2. j. IE 6 Screnshot
http://img29.imageshack.us/img29/645/ie6screenshot.gif

2. k. IE 8 - Screenshot
http://img32.imageshack.us/img32/6798/ie8screenshot.gif

2. l. Sfari - Screenshot
http://img223.imageshack.us/img223/7314/safari32screenshot.gif

2. m. Opera 9 - Screenshot
http://img33.imageshack.us/img33/4025/opera9screenshot.gif

2. n. Firefox 2 - Screenshot
http://img29.imageshack.us/img29/6162/firefoxscreenshot.gif

2. p. Irfanview 4 - resize
http://img30.imageshack.us/img30/883/irfanview4resize.gif

Welches gefällt euch am besten?
(ich äußer mich morgen, muß jetzt schlafen :redface:)

mfg

[HeldImZelt]

Ich würde gerade Linien (90°) ohne und Winkel mit Subpixel wählen.
Das Raster ist zur Illustration nur kopiert und ungenau. Man kann's aber erkennen.

http://img515.imageshack.us/img515/4106/vektor.png

[Pinoccio]

Ich würde gerade Linien (90°) ohne und Winkel mit Subpixel wählen.
Das Raster ist zur Illustration nur kopiert und ungenau. Man kann's aber erkennen.Hm. Wie meinst du das vom Weg her? Dein angestrebtes Ergebnis ist klar, nur müsste ich das ja quasi als Bitmap nachzeichen, oder wie?

mfg

[HeldImZelt]

Kann man machen, besonders bei solch kleinen Auflösungen und einfachen Mustern.
Ansonsten erstellst du mehrere Ebenen und exportierst sie separat. In diesem Fall den Hintergrund und den Blitz. Den einen mit und den anderen ohne Subpixel.

[Mr. Lolman]

Genau so würd ichs auch machen. Denn besser als so, bekomm ichs mit einer Ebene auch nicht hin (Bikubisch, und dann Layer dupliziert und mittels Screenmethode überblendet):

[Pinoccio]

Danke euch beiden.

Problematisch ist wohl einfach, daß das Gitter und die Raster-Auflösung nicht zueinander passen. Wenns hart auf hart kommt, werde ich wohl gezielt einzelne Größen von Hand nachbearbeiten müssen.

mfg

[HeldImZelt]

So ein Gitterraster ist mit Photoshop oder Gimp in wenigen Sekunden erstellt. Man füllt ein definiertes Muster als Fläche. Du musst es ja nicht mit Inkscape machen, wenn es zu solchen Moireeffekten kommt.

http://img7.imageshack.us/img7/2537/raster.png

[Gast]

weiterhin alles von 3k*2* auf 10% resized

supersampling ist im allgemeinen imho auf jeden fall der richtige ansatz für sowas.

2. j. IE 6 Screnshot
http://img29.imageshack.us/img29/645/ie6screenshot.gif

2. n. Firefox 2 - Screenshot
http://img29.imageshack.us/img29/6162/firefoxscreenshot.gif

dass der IE6 keine richtige png-alpha-transparenz kann sollte bekannt sein. wenn es auch dort schön aussehen muss, solltest du den weißen hintergrund mit in die grafik rendern.

die fehldarstellung im firefox2 kann ich mir nicht erklären, da musst du was verbockt haben.

[_DrillSarge]I[]

bei dem content und bei der auflösung wirst du da immer ein aliasing-problem haben, gerade an den schnittkanten (wenn man von der möglichkeit einer absolut hässlichen versoftung absieht).

[Pinoccio]

dass der IE6 keine richtige png-alpha-transparenz kann sollte bekannt sein. wenn es auch dort schön aussehen muss, solltest du den weißen hintergrund mit in die grafik rendern.

die fehldarstellung im firefox2 kann ich mir nicht erklären, da musst du was verbockt haben.Hm, ist mir garnicht aufgefallen, daß der Hintergrund nicht wirklich weiß, sondern transparent ist. Sah ja überall weiß aus.
Falls ich die Zeit finde und Lust habe, mach ich das nochmal mit einem BMP, ganz ohne Transparenz.

Was FF2 betrifft: ich binde das Bild mittels <img ... width=300> ein, also dem Zehntel seiner Orginalbreite, kann ich dabei was verbocken?
I[;7400539']bei dem content und bei der auflösung wirst du da immer ein aliasing-problem haben, gerade an den schnittkanten (wenn man von der möglichkeit einer absolut hässlichen versoftung absieht).Ja, das ist wohl nicht zu vermeiden.

mfg

[Gast]

Was FF2 betrifft: ich binde das Bild mittels <img ... width=300> ein, also dem Zehntel seiner Orginalbreite
das ist doch absolut idiotisch.
skalier das 3000px bild einfach in gimp/photoshop/etc mit einem hochwertigen scaler auf 300px runter und binde dann die runterskalierte version in die webseite ein.

[Pinoccio]

das ist doch absolut idiotisch.
skalier das 3000px bild einfach in gimp/photoshop/etc mit einem hochwertigen scaler auf 300px runter und binde dann die runterskalierte version in die webseite ein.Lies doch mal bitte alles: Die FF-Version dient nur dem Vergleich, ebenso wie die Variante im IE6, IE8 und Opera.
Sauberste Variante für eine Webseite wäre natürlich, daß als SVG einzubinden und dann skalieren zu lassen. Macht aber FF2 hier (in einem kurzen Test) nicht, von Browsern ganz ohne SVG-Unterstüzung mal abgesehen. Opera 9 macht es wiederum, sogar miut ansprechendem Ergebnis.

mfg