Sehen SVG-Bilder besser verkleinert aus als hochauflösende PNG-, JPG- oder GIF-Bilder?

Ich weiß, dass ein SVG eine gute Wahl ist, wenn Sie ein Bild vergrößern möchten.

Meine Situation ist jedoch, dass ich Symbole habe, die Benutzer über ein CMS hochladen können sollen. SVGs sind nur ein bisschen kniffliger zu erstellen, und daher scheinen jpg, gif oder png das ideale Format für Administratoren zu sein.

Können JPGs, GIFs oder PNGs bei gleichem oder größerem Upload im richtigen Verhältnis so hochwertig sein wie eine SVG-Datei, wenn sie verkleinert werden?

Ich gehe davon aus, dass Browser auch eine SVG-Datei unter einer bestimmten Größe als Antialias verwenden müssen, sodass sie wahrscheinlich genauso unscharf sind wie jedes andere Format, obwohl GIFs anscheinend mehr unscharf sind.

(Hinweis: Bitte lesen Sie die eigene Antwort des OP vor dieser, da meine Antwort ein Kommentar zur Untersuchung des OP ist.)

Dies ist ein bekanntes Problem von Android Chrome. Bei einigen ihrer Builds wurde Anti-Aliasing deaktiviert, wodurch die Vektorformen mit scharfen Kanten gerendert wurden. Der Grund dafür war, die durch Anti-Aliasing-Berechnungen verursachte Überlastung zu reduzieren. Aufgrund von Beschwerden veröffentlichten sie ein Update, das Anti-Aliasing wieder aktiviert haben sollte.

In Stack Overflow gibt es mehrere Threads, die dieses Problem behandeln. Hier ist eine davon:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

Ich konnte auf IPod Touch Safari keinen Verweis auf dasselbe Problem finden, aber es ist wahrscheinlich sicher zu extrapolieren und anzunehmen, dass das Problem dasselbe ist.

Es gibt Möglichkeiten, das Anti-Aliasing zu erzwingen, auch wenn es deaktiviert ist, wie z. B. dieser Trick, der das Element im Grunde ein wenig auffüllt und den Browser aus irgendeinem Grund dazu veranlasst, Anti-Aliasing anzuwenden. Sie können auch versuchen, das Shape-Rendering- Attribut des Elements auf etwas anderes als scharfe Kanten festzulegen und zu prüfen, ob der Browser dies berücksichtigt.

Ich habe gerade einen Test durchgeführt und der einzige Unterschied scheint in mobilen Browsern zu liegen.

Ich habe ein 990 x 900 Pixel großes Bild des Twitter-Symbols erstellt (dieses Symbol scheint ein viel zu detailliertes Design für eine gute Skalierung zu sein, also gut für diesen Test). Ich habe dies als SVG, JPG, GIF, Transparent GIF (nur die Vogelform, keine Hintergrundfarbe, stattdessen mit CSS), PNG, transparent PNG gespeichert.

Ich habe diese dann auf 15px, 25px, 50px, 100px und 150px verkleinert.

Hier sind die Ergebnisse in Firefox:

Hier sind die Ergebnisse in Chrome:

Wenn wir in ein Screengrab der kleinsten Ergebnisse zoomen, um zu sehen, welche Pixel generiert werden, verdunkelt Firefox (oben) die Ränder der nicht transparenten Versionen leicht, aber alle anderen Ergebnisse sind sehr ähnlich.

In einem IPod Touch Safari-Browser scheint die SVG-Version jedoch ziemlich verschwommen zu sein, und die anderen sind ziemlich pixelig:

Ein ähnliches Ergebnis wird auch auf Android Chrome angezeigt. Ich habe keinen Screenshot davon gemacht.

Ich frage mich, ob der Grund dafür in der Pixeldichte liegen könnte, die den Hauptunterschied in der Anzeige ausmacht, obwohl das für mich sinnvoller wäre, wenn alle Bilder auf Mobilgeräten anders gehandhabt würden als nur die SVG-Bilder.

Wenn jemand erklären kann, warum dies der Fall ist, werde ich das akzeptierte Antwort-Häkchen übertragen. Ansonsten ist die TL; DR-Antwort, dass es davon abhängt, ob Sie unscharfe oder pixelige Symbole bevorzugen (oder ob Sie viele Symbole in pixelgenauen Größen für Ihre reaktionsschnellen Haltepunkte erstellen).

edit: Ich habe seitdem beobachtet, dass svgs auf Apple-Geräten normalerweise viel deutlicher sind - der Twitter-Vogel ist möglicherweise zu detailliert, als dass er in meinen obigen Tests angezeigt werden könnte. Sie sollten also das richtige Format für Symbole verwenden.

Es gibt einen sehr wichtigen Unterschied zwischen Vektorbildern und Bitmapbildern. Vektorbilder werden, wenn wir es ein wenig vereinfachen, vom Client gerendert, während Bitmap-Bilder von Ihnen gerendert werden.

Dies bedeutet, dass die Anwendung, an die Sie das Bild senden, mehr Einfluss darauf hat, wie es sich verhält. Das Endergebnis ist, dass Sie folgende Nachteile haben :

• Es sind mehr Ressourcen erforderlich, um das Bild präsentabel zu machen
  • In diesem Fall kann es vorkommen, dass das gerenderte Bild die Qualität verliert, weil es nicht über genügend Ressourcen verfügt, um es besser zu machen.
• Jedes Bildgebungssystem hat seine eigenen Macken und Mängel
  • Macht es schwieriger, konsistent zu sein
  • Sie bekommen die Probleme eines Programmierers

Auf der anderen Seite gibt es einige Vorteile :

• Das Bild kann frei skaliert werden und bietet mehr Manipulationsmöglichkeiten.
  • Dies ist einfach ein Ergebnis der Arbeit, die die Kunden erledigt haben, sodass sie mehr Zeit für die Berechnung von Pixeln aufwenden können, um ein größeres Bild zu erhalten, wenn Sie Elemente senden, die skalierbar sind.
• Die Daten sind in vielen Fällen kleiner als das Pixelbild (muss es aber nicht sein)

Es gibt nicht viel, was Sie tun können, wenn ein System einen fehlerhaften Renderer hat. Sie geben der Endanwendung die Wahl, und sie können diese Wahl verwenden, um schlechte Entscheidungen zu treffen.

Welches ist besser

Dies hängt davon ab, wie gut Sie Ihr Bild rendern können und wie viel Bandbreite Ihnen zur Verfügung steht. Es ist sicherlich möglich, ein besseres Rendering als die Browser durchzuführen. Kein Wunder, dass man auch einen besseren Job machen kann als Illustrator. Dann verlieren Sie jedoch alle Vorteile eines verzögerten Renderns.

Es gibt eine dritte Option.

Wenn Sie mit den Ergebnissen nicht zufrieden sind, können Sie jederzeit versuchen, eine eigene Rendering-Engine zu erstellen. Mit Plattformen, die webgl unterstützen, können Sie. Sehen Sie hier ein Beispiel . Aber das ist ziemlich hardcore und spart Ihnen keine Implementierungsdetails.

(Es gibt noch nicht genug Punkte, um die Antwort von Richard B direkt zu kommentieren.)

Zur Beantwortung Ihrer Frage, Richard B, stellen wir diesen Effekt häufig bei Elementen fest, die auf Hardware mit geringerer Leistung ein Anti-Aliasing benötigen. Dies ist sogar bei abgerundeten DOM-Elementen der Fall, wenn Anti-Aliasing in diesen Umgebungen reduziert oder entfernt wird.

In unserem Unternehmen wird in einigen Fällen Hardware mit geringerer Leistung verwendet, und es tritt dieses Problem mit "extrem gezackten, kantigen Formen" auf. Wir haben das Anti-Aliasing deaktiviert / reduziert, um die Leistung zu verbessern. Dies ist wahrscheinlich der gleiche Grund, warum Ihre Tests auf Mobilgeräten die Ergebnisse erbrachten, die sie erbracht haben.