SVG sieht in kleiner Auflösung schlecht aus?

Ich habe ein SVG-Bild erstellt, um das Qualitätsproblem beim Ändern der Größe des Elements oder beim Skalieren über CSS zu lösen.

Zu meiner Überraschung sieht mein SVG-Bild noch schlimmer aus als das verkleinerte GIF- oder JPG-Bild.

Hier ist ein Bild, das zeigt, was ich meine:

Geben Sie hier die Bildbeschreibung ein

Ich dachte, SVG würde eine bessere Qualität zeigen, weil es die Größe ohne Qualitätsverlust ändert. Warum passiert das dann?

Antworten (2)

Dies ist ein weit verbreiteter Irrtum. Skalierbar bedeutet nicht unendlich skalierbar. Nicht alle SVG-Renderer und -Dateien sind gleich

Was Vektorgrafiken auf den Tisch bringen, ist das Rastern nach Bedarf. Dies bedeutet, dass die Anwendung, die sie zeigt, die Grafik wiederholen kann. Dies ist wunderbar bei großen Größen, erfordert aber besondere Aufmerksamkeit, wenn Bilder klein sind. Aus diesem Grund werden Schriftarten "angedeutet", im Wesentlichen hat die Schriftart Bitmap-Versionen für kleine Größen. Die Wahrheit ist, dass Ihr Bild in kleinen Maßstäben so gestaltet sein muss, dass es die Pixel trifft.

Zweitens gibt es keine besondere Garantie dafür, dass der Renderer, der die Vektordaten nimmt und Bitmaps erstellt, gute Arbeit leistet. Jede App macht ein anderes Ergebnis, aber hier ist ganz klar, dass die AA-Engine Antialiasing auf Schwarz macht, was falsch ist. Dies ist ziemlich typisch für Engines, die die Grafik nicht supersampeln.

Aber warum gibt es dann diese Tendenz, SVGs für kleine Symbole zu verwenden?
Weil Sie Komponenten der Logodesigns für verschiedene Größen einfach austauschen können. Benötigen Sie zum Beispiel für die kleinste Größe wirklich alle Leitungen oder den LKW und den Unterbau der Ladefläche? Würden ein vereinfachtes LKW-Modell und Ladung in derselben Farbe, aber weniger Unterteilungen nicht gut ausreichen? Es gilt nicht „ein Design für alle Größen“, sondern „ein Design lässt sich leicht an alle Größen anpassen“. Unter tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css finden Sie ein Beispiel dafür, wie CSS verwendet werden kann, um ein Logo einfach zu gestalten, wenn weniger Platz zur Verfügung steht. (Vielleicht sollte dies eine Antwort sein ...)
Ich liebe das Konzept "Rasterung nach Bedarf". (+1)

Völlig falsche Idee, da stimme ich dir nicht zu. SVG-Bild besser als PNG viel. Es verliert nie an Qualität, während Sie die Größe reduzieren. Und eine einfachere Möglichkeit, das Design zu ändern, gut zu komprimieren und alle Geräte gut zu unterstützen.

"Einfacherer Weg zum Ändern der Designkontrolle" ist der entscheidende Punkt, der Rest Ihrer Antworten ist nicht so hilfreich. Beispielsweise sieht ein sorgfältig gestaltetes PNG-Icon in einem kleinen Zustand viel besser aus als ein beliebiges SVG-Icon, das nur verkleinert wurde. Der Vorteil von SVG ist, dass es auch sorgfältig gestaltet werden kann, den zusätzlichen Charme hat, dass es zB über SVG gesteuert werden kann und die Quelle für diese sorgfältig gestalteten PNG-Icons sein kann - die Sie möglicherweise noch benötigen, nur weil SVG von nicht unterstützt wird das Gerät, das Sie verwenden.
Mr.Michael verwende ein SVG-Bild für meinen Kunden. Ich kann alle Arten von Arbeiten erledigen (Größenänderung, Designkontrolle und alle Geräte). Wenn Sie weitere Zweifel haben, können Sie bitte den unten angegebenen Link css-tricks.com/using-svg überprüfen
Habe es angeschaut. Ich behaupte immer noch, dass Sie den wichtigsten Teil von SVG in Ihrer Antwort erhalten haben, aber der Rest ist weniger hilfreich (beachten Sie, dass ich nicht "schlecht" oder "falsch" geschrieben habe). Die Frage hier ist effektiv "Warum sieht die verkleinerte SVG-Datei (subjektiv) schlechter aus als eine verkleinerte PNG-Datei; jemand hat mir gesagt, dass SVG-Dateien perfekt skalieren?".
Haben Sie es versucht, bevor das SVG-Bild nicht perfekt skaliert ist?
Ich habe Ihnen bereits gesagt: "Ich verwende ein SVG-Bild für meinen Kunden. Ich kann alle Arten von Arbeiten erledigen (Größenänderung, Designsteuerung und alle Geräte)."
Ja, das hast du mir gesagt. Aber schauen Sie sich das Beispielbild der Ausgangsfrage an. Vergleichen Sie zum Beispiel den Unterbau der Ladefläche des Lastwagens – die verkleinerte PNG-Version sieht der größeren PNG-Datei viel näher als die verkleinerte SVG-Version. Die SVG- und PNG-Bilder sind zunächst nicht identisch - aber dieses Ergebnis würde man für SVG wirklich nicht erwarten.
@Senthilkumar: Ich glaube nicht, dass allgemeine Aussagen wie "SVG-Bild besser als PNG" jemals wahr sein können. Ich stimme zu, dass SVG "flexibler" ist als PNG, da die Größe geändert und einfach aus dem Code manipuliert werden kann. Aber das SVG-Format kann in einigen Anwendungen nicht verwendet werden, wie Michael erwähnt hat. Gmail-HTML-E-Mails unterstützen beispielsweise kein SVG. Zeitraum. Sie geben sie nicht wieder. Jedes Format hat seine eigene Verwendung. Lasst uns nicht "formatistisch" sein (mein gescheiterter Versuch, lustig zu sein und "Rassisten" mit "Format" zu vermischen).
SVG sieht in kleiner Auflösung schlecht aus?
AntwortenHierDatenschutz-Bestimmungen1y, 0v