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!
