Qualitätsverlust beim Verkleinern von SVGs

Es fällt mir schwer, den besten Weg zu finden, um ein SVG zu erstellen, das durch Skalierung seine Qualität beibehält. Die tatsächliche Größe des Bildes ist die mittlere, die in Illustrator pixelgenau ist. Sobald ich es jedoch als SVG speichere, wird die am weitesten rechts liegende vertikale Linie unscharf. Was kann ich tun, um eine qualitativ bessere / skalierungsfreundliche SVG zu erstellen?

klein

tatsächlich

groß

SVG Erhält 100% Quellqualität

Daten einer SVG - Datei wird als XML anstelle von Pixeln gespeichert und besteht aus Komponenten , die ohne Verlust auf jeder Ebene skaliert werden kann Quelle Qualität.

Bildschirmauflösung

Wenn die Grafik auf Ihrem Bildschirm kleiner wird, hat sie immer weniger Pixel, um die Quelle darzustellen (die immer noch in perfekter Qualität ist), wodurch das Bild weniger scharf erscheint.

Kantenglättung

Das große Bild (links) und das kleine (rechts) sind beide anti-aliasiert (siehe die leichte, subtile Farbe an den Rändern?).

Anti-Aliasing ist eine Technik zum Rendern von Bildern, bei der die Schärfe geopfert wird, um hässliche, gezackte Kanten zu vermeiden. Diese Technik, mit der Kanten glatt gehalten werden, ist der Grund für die schlechte Qualität des kleinsten Bilds. Aufgrund der geringen Auflösung ist das Anti-Aliasing hier viel offensichtlicher und wird sogar an den vertikalen Kanten verwendet.

Ich vermute, dass dies beim Anti-Aliasing-Prozess passiert, entweder weil es schwierig ist, es anders zu machen, oder weil das Bild einheitlich ist. Wenn die diagonalen Kanten durch Anti-Aliasing leicht verschwommen wären und die vertikalen nicht, wäre dies kein sehr ausgewogener Effekt.

Antialiasing ist so etwas wie ein unbesungener Held in Webgrafiken. Aus diesem Grund haben wir klaren Text und glatte Vektorformen auf unseren Bildschirmen. Es gibt tatsächlich einige Ansätze für Antialiasing, die heutzutage in Browsern verwendet werden und die beim Rendern von Text am offensichtlichsten sind. Wenn der Algorithmus zum Antialisieren von Schaltern verwendet wird, kann dies zu unerwarteten visuellen Ergebnissen führen. In diesem Artikel werfen wir einen Blick auf die Ansätze zum Antialiasing und sehen, wie die Pixel gezeichnet werden.

Wie wir alle wissen, bestehen alle unsere Bildschirme aus Pixeln. Es ist ein riesiges Blockraster, und jeder enthält rote, grüne und blaue (RGB) Komponenten. In einiger Entfernung sehen wir Bilder, Text und Symbole, aber aus der Nähe können wir tatsächlich das Raster der RGB-Komponenten sehen und wie alles zusammengesetzt ist.

Was passiert also, wenn wir eine Vektorform zeichnen und diese durch einen „Teil“ eines Pixels verläuft? Nehmen wir an, dass die Form, die wir zeichnen, schwarz und der Hintergrund weiß ist. Sollten wir dieses Pixel überhaupt färben? Wenn wir es färben, welche Farbe sollte es sein? Schwarz, Grau, noch etwas?

- Quellartikel von HTML5 Rocks

Die Lösung

Pixel-Hinweis. Wie vom neuen Benutzer unten verlinkt, ist Pixelhinweis genau das, was Sie brauchen, und die richtige Antwort auf Ihre Frage. Anti-Aliasing behandelt jede Kante wie einen Nagel, zerschmettert und glättet ohne Einschränkung. Es sei denn, Sie geben Hinweise!

Wie es gemacht wird...

Öffnen Sie zunächst das Dokument mit der Vektorform, die Sie als Pixel-Hinweis verwenden möchten. Diese Technik funktioniert hervorragend, wenn Sie mit Vektoren arbeiten. Wenn Sie jedoch mit Rasterformen arbeiten, ist die Pixelhinweise überschaubar - jedoch nur für Fortgeschrittene. Bleiben wir also vorerst bei den Vektorformen.

Zweitens zoomen Sie so weit wie möglich hinein, bis Sie ein Pixelraster sehen. Wenn Sie der Meinung sind, dass Sie weit genug hineingezoomt haben, das Pixelraster jedoch immer noch nicht angezeigt werden, sollten Sie einige Einstellungen und Einstellungen ändern, um es zu aktivieren. Wenn es eingeschaltet ist und Sie es sehen können, wählen Sie Ihren Vektorpfad / Ihre Vektorform aus.

Drittens wählen Sie Punkte auf Ihrem Vektorpfad aus und verschieben Sie die Pixel mit Ihren Pfeiltasten in kleinen Schritten. Bei einigen Apps müssen Sie eine Taste gedrückt halten, bei anderen nicht. Solange Sie wissen, verschieben sich die Pfade nicht nur um ein Pixel nach oben, sondern möchten, dass sie sich höchstens um ein halbes Pixel nach oben verschieben.

Viertens machen Sie dasselbe für die restlichen Punkte Ihres Vektors, bis beim Herauszoomen alles weniger verschwommen aussieht. Wenn Sie fertig sind, können Sie jetzt scharfe, „pixelgenaue“ Stile, Verläufe, Schatten usw. anwenden, wie Sie es normalerweise bei einer Vektorform tun würden.

Wenn Sie mit dieser Technik noch einen Schritt weiter gehen möchten, versuchen Sie, Vektorpunkte auf Symbole zu verschieben, die „zu“ scharf aussehen. Manchmal sieht eine Kurve viel besser aus, wenn sie knusprig ist.

- Quellartikel von The Industry mit freundlicher Genehmigung von tareq-a.

Pixelhinweise mit Vektorformen teilen dem Rendering-System die Absicht der Kante mit, sodass Anti-Aliasing weiß, ob es den Glättungshammer schwingen soll oder nicht!

Wie andere angemerkt haben, wird die Unschärfe durch Anti-Aliasing verursacht, wenn die vertikale Linie in Ihrem Skalierungsbild nicht genau auf eine Pixelgrenze fällt.

Sie können dies manuell in einem SVG-Editor korrigieren, indem Sie zuerst Ihr Bild auf die gewünschte Größe skalieren und dann die Linien vergrößern und manuell so anpassen, dass sie genau auf die Pixelgrenzen fallen. (Wenn Sie dies in Inkscape tun, empfehle ich, ein 0,5-Pixel-Raster einzurichten, wobei jede zweite Zeile in den Dokumenteinstellungen hervorgehoben wird.)

Alternativ kann das PixelSnap Inkscape-Plug-In hilfreich sein. Es automatisiert den mühsamen Teil dieses Jobs und verschiebt Linien automatisch so, dass sie genau auf Pixelgrenzen fallen. Obwohl es nicht immer einen perfekten Job macht, ist es normalerweise viel einfacher, es seine Sache machen zu lassen und dann alle suboptimalen Ergebnisse zu bereinigen, als den Pixel-Hinweis immer vollständig manuell zu machen.

Ich denke, @Jonathan Todd hat eine gute theoretische Erklärung und eine allgemeine Methode gegeben, um Unschärfe zu vermeiden. Ich möchte ein Übungsvideo zur Erstellung von Pixelhinweisen in Adobe Illustrator ergänzen, das ich in diesem Artikel gefunden habe .

Ich werde die Methode dieses Videos wie folgt beschreiben:

1. Wissen Sie, wie groß das Symbol ist, das Sie anzeigen möchten. Wenn Sie möchten, dass es in 16 x 16 Pixel angezeigt wird, sollten Sie das gleiche Größensymbol erstellen, um einen optimalen Effekt zu erzielen. Denken Sie daran, dass Sie benutzerdefinierte Symbole besser auf die gewünschte Größe entwerfen sollten.

2. Verwenden Sie Adobe Illustrator, um die SVG-Symboldatei zu öffnen und zu bearbeiten. Zwei Dreiecke haben beide das SVG-Format, aber eines ist gut auf ein virtuelles Raster ausgerichtet. Es wird nicht unscharf, wenn es auf Ihrem Bildschirm angezeigt wird.

3. Um Ihr Unschärfesymbol zu bearbeiten, stellen Sie zuerst Ihre Bildeinheit in Pixel ein. Ich denke, dass dies unter Windows und Mac OS anders ist, also sollten Sie es besser googeln.

4. Design mit aktivierter Pixelhinweise. ( alt+ ⌘+ Yunter Mac oder alt+ ctrl+ Yunter Windows) Sie können sehen, dass die horizontalen und vertikalen Randpixel des linken Dreiecks das Raster perfekt ausrichten, während die horizontalen Randpixel des rechten Dreiecks dies nicht sind.
   
   

5. Ändern Sie zuerst Breite und Höhe und dann X und Y, um den Dezimalteil zu entfernen. Ich würde vorschlagen, dass Sie zuerst Breite und Höhe bearbeiten und dann die x- und y-Koordinaten ändern.

Dezimalwerte ändern

Zahlen runden (keine Dezimalbrüche)

6. Voila. Speichern Sie Ihr Bild zur Verwendung!

Vielleicht ist dieser Link hilfreich, um Ihr Problem zu lösen: http://theindustry.cc/2012/10/17/designed-pixel-hinting/