Wie funktioniert Pixel-Hinweis?

In dieser Frage fragt ein Benutzer, wie er ein Vektorbild erstellen kann, das sich nahtlos verkleinern lässt.

Pixelhinting ist die Lösung:

Anti-Aliasing behandelt jede Kante wie einen Nagel und zerschmettert und glättet ohne Einschränkung. Es sei denn, Sie geben Hinweise!

Wie es gemacht wird...

Geben Sie hier die Bildbeschreibung ein

Öffnen Sie zuerst das Dokument, das die Vektorform enthält, die Sie pixelieren möchten. Diese Technik funktioniert hervorragend, wenn Sie mit Vektoren arbeiten. Wenn Sie jedoch mit Rasterformen arbeiten, ist das Pixel-Hinting machbar – aber nur für Fortgeschrittene. Bleiben wir also vorerst bei Vektorformen.

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

Wählen Sie drittens Punkte auf Ihrem Vektorpfad aus und verschieben Sie die Pixel mit den Pfeiltasten in Minutenschritten. Bei einigen Apps müssen Sie eine Taste gedrückt halten, bei anderen nicht. Solange Sie wissen, dass die Pfade nicht nur ein Pixel nach oben verschieben – weil Sie 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 alles weniger verschwommen aussieht, wenn Sie herauszoomen. Wenn Sie fertig sind, können Sie jetzt scharfe, „pixelgenaue“ Stile, Farbverläufe, Schatten usw. anwenden, wie Sie es normalerweise mit einer Vektorform tun würden.

Wenn Sie mit dieser Technik noch einen Schritt weiter gehen möchten, versuchen Sie schließlich, Vektorpunkte auf Symbolen zu verschieben, die „zu“ scharf aussehen. Manchmal sieht eine Kurve leicht verschwommen viel besser aus, als wenn sie knusprig aussieht.

- Quellenartikel von The Industry, mit freundlicher Genehmigung von tareq-a.

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

Aber ich verstehe nicht, wie es funktioniert. Da SVG-Daten in XML gespeichert werden, scheint es nicht so, als würde eine Pixel-"Karte" irgendeiner Art mit diesen Daten gespeichert werden. Mit anderen Worten, es scheint, als würden die Formen allein gespeichert und sicherlich nicht bestimmten Pixeln zugeordnet.

Schließlich liegt der Grund für die so gute Skalierung von Vektorbildern darin, dass Formen und Farbverläufe anstelle von Pixeln verwendet werden, richtig?

Könnte jemand bitte erklären, wie Pixelhinweise funktionieren?

> Beachten Sie jedoch, dass dies nur für eine bestimmte Größe Ihres > SVG oder jedes nachfolgende größere Rendering funktioniert, das ein gerades Vielfaches des > Originals ist. Tatsächlich können Sie mithilfe von Medienabfragen für verschiedene Größen optimieren. Es ist eine etwas fortgeschrittene Technik, aber Sie können separate Versionen in verschiedenen SVG-Gruppen erstellen und sie basierend auf der Größe zum Zeitpunkt des Renderns ausblenden/anzeigen. Ich habe das getestet und es funktioniert sogar, wenn es als Hintergrundbilder in HTML verwendet wird. smashingmagazine.com/2014/03/05/rethinking-responsive-svg

Antworten (2)

„Pixel-Hinweise“ ist ein etwas frei erfundener Begriff des Autors dieses Artikels. Daran ist nichts auszusetzen, aber der Begriff ist normalerweise dem Schriftdesign vorbehalten. Herkömmlicherweise war Font Hinting der Prozess der manuellen Erstellung von Rasterbildern jeder Vektorglyphe für jede bestimmte Bildschirmgröße, die als notwendig erachtet wurde. So sind beispielsweise bei 9 Pixel auf dem Bildschirm die Standardvektoren möglicherweise nicht so scharf wie gewünscht durch die automatische Rasterung, sodass der Schriftdesigner eingreifen und einen benutzerdefinierten Satz von Rasterbildern zur Anzeige mit genau 9 Pixel erstellen würde.

Mit Subpixel-Rendering und besserer Software werden viele Schrifthinweise jetzt automatisch ausgeführt, und man kann argumentieren, wo der im SVG verwendete Begriff einige Parallelen aufweist. (Einige würden jedoch argumentieren, dass, wenn die Rasterung vollständig automatisch erfolgt, keine wirklichen Hinweise - zumindest im manuellen Sinne - stattfinden. Eine semantische Debatte, sicher ...)

Wie es in einem SVG funktioniert, sehen Sie sich die Quelle einer SVG-Datei an und Sie bekommen eine Vorstellung davon, was passiert.

Im öffnenden SVGTag gibt es viele Attribute, von denen zwei die Breite und Höhe definieren. In einem SVG, das ich auf meinem Desktop habe, sind diese wie folgt festgelegt:

<svg width="744.09448819" height="1052.3622047" ...

Wie Sie sehen können, ist mein spezielles SVG nicht auf eine bestimmte Pixelbreite/-höhe eingestellt. Ich könnte mein SVG so anpassen, dass es GENAU so viele Pixel mal so viele Pixel sind, und dann könnte ich in meinem SVG-Editor ein Pixelraster aktivieren, um sicherzustellen, dass alle meine vertikalen und horizontalen Linien genau zwischen zwei Pixeln liegen .

Wenn ich dann das SVG in „tatsächlicher Größe“ rendere, kann ich relativ sicher sein, dass ich scharfe horizontale und vertikale Linien beibehalten werde, da diese bestimmten Linien nicht automatisch mit Hinweisen versehen werden müssen und der Browser das Gesamtbild nicht abrunden muss Breite und Höhe.

Zusammenfassend lässt sich also sagen, dass das, was der Autor dieses Artikels „Pixelhinweis“ nennt, lediglich Ihre SVG-Datei nimmt und sicherstellt, dass jede Zeile an einer bestimmten Pixeleinheit „einrastet“. Dies würde von dem von Ihnen verwendeten SVG-Editor erstellt und über den Browser implementiert, der das Bild basierend auf den Breiten-/Höhenattributen rendert.

Beachten Sie jedoch, dass dies nur für eine bestimmte Größe Ihrer SVG-Datei oder jedes spätere größere Rendering funktioniert, das ein gerades Vielfaches des Originals ist.

Im Gegensatz zu einer Schriftart, bei der benutzerdefinierte Hinweise für alle gewünschten Größen erstellt werden können, können Sie bei einer SVG also sicherstellen, dass die automatischen Hinweise nur bei dieser bestimmten Größe funktionieren.

Zum Beispiel ist Ihr SVG vielleicht 100px x 100px groß. Nur wenn Sie das SVG genau 100x100 oder 200x200 oder 300x200 oder 400x400 usw. darstellen, können Ihre Linien garantiert 'pixelscharf' bleiben.

Ich nehme an, dass "Pixel-Hinting" durch pixelgenaue Ausrichtung der Grafikelemente funktioniert:

Wenn der Rand des Grafikelements auf eine "halbe Pixel"-Koordinate fällt, erzeugt das Antialiasing Farbverläufe (Antialiasing ist eigentlich das Erstellen von Verläufen) mit resultierender Bildunschärfe.

Wenn man "die Pixel angibt", versucht man, die Elemente auf ganze Pixelwerte auszurichten und dadurch das Antialiasing zu minimieren und die Schärfe des Bildes zu verbessern.

(Dies ist mein Verständnis des Pixelhinweises, wahrscheinlich kann es jemand besser oder anders erklären).

Es ist wichtig, dass das OP versteht, dass es kein halbes Pixel gibt. Ein Pixel ist die kleinste Speichereinheit, die zum Speichern von Bilddaten verwendet wird (selbst für Vektoren, da der Vektor in diesem Stadium für die Ausgabe oder Anzeige in ein Pixelraster gerendert wurde).
@horatio Glaubst du, dass jedes virtuelle Pixel perfekt mit dem physischen übereinstimmt?
Nein, aber ich denke, es ist entscheidend, um zu verstehen, was vor sich geht. Pixelhinweise, wie im Beispiel des OP dargestellt, beruhen auf der Annahme, dass das Pixelraster auf zufälligen Clientcomputern gleich ist. Dies ist keine sichere Annahme. (kann aber zu 80% stimmen)
@horatio Wenn der Rendering-Agent die Breite/Höhe des SVG unterstützt und das SVG in dieser Größe gerendert wird, sollte die Standardeinstellung mit dem Pixelraster übereinstimmen. Aber es gibt sicherlich viele, viele Möglichkeiten, wo dies nicht der Fall sein kann (z. B. wenn ein Benutzer seinen Browser-Zoom ändert).
@da01: Ich stimme im Allgemeinen zu, aber SVG-Dateien sind im Wesentlichen einheitslos und die Pixelgitterausrichtung setzt eine bestimmte Bildschirmgröße voraus, siehe zum Beispiel Illustrator-Hilfedatei „Das scharfe Erscheinungsbild von pixelausgerichteten Strichen wird in der Rasterausgabe bei einer Auflösung beibehalten von nur 72 ppi. Bei anderen Auflösungen besteht eine hohe Wahrscheinlichkeit, dass solche Striche zu Anti-Aliasing-Ergebnissen führen.“ Der einzige Grund, warum ich hier pedantisch bin, ist, dass die Frage nach den zugrunde liegenden Gründen fragt, und daher denke ich, dass es eine vernünftige Spitzfindigkeit ist.
@horatio SVG verwendet Einheiten und hat ein Koordinatensystem, das aus Pixeln besteht: w3.org/TR/SVG11/coords.html#InitialCoordinateSystem Da die SVG-Größe dann normalerweise über Pixel in CSS festgelegt wird, sollte die Bildschirmauflösung irrelevant sein, aber nur wenn das SVG in seiner Standardgröße angezeigt wird
Im zweiten Absatz dieses Abschnitts wird vorgeschlagen, „[...]wenn der Benutzeragent die Größe einer px-Einheit aus seiner Umgebung bestimmen kann, sollte er diesen Wert verwenden; andernfalls sollte er eine angemessene Größe für eine px-Einheit wählen „ Es ist kompliziert
Wie funktioniert Pixel-Hinweis?
AntwortenHierDatenschutz-Bestimmungen1y, 1v