SVG-Bilder, die in Safari in einer Größe von weniger als 20 Pixel verschwommen sind

7

Ich mache eine mobile Demo für das iPad, das wir in Safari testen. Ich verwende Symbole, um meine Bilder nicht dreimal skalieren zu müssen. Das Problem ist, dass alle von mir verwendeten Symbole, die kleiner als 20 Pixel sind, auf dem Bildschirm verschwommen sind, bis Sie hineinzoomen. Hat jemand anderes dieses Problem und weiß, wie das Problem behoben wird? Zu Ihrer Information Ich habe diese Bilder in Illustrator gespeichert

svg css John Dangerous
quelle
2
Kleine Bilder sind wahrscheinlich genauso antialiasiert wie große, aber das Verhältnis von "unscharfen" Pixeln zu gefüllten Pixeln ist logisch größer. Stellen Sie sich Ihr Bild mit 4 x 4 Pixel vor. Dann sind keine vollständig gefüllten Pixel mehr vorhanden. Ohne das Ausschalten von Antialiasing (von dem ich nicht weiß, ob es möglich ist und das ich sowieso nicht empfehlen würde) gibt es nicht viel zu beheben.
usr2564301
Ich habe den ganzen Tag Dinge ausprobiert. Das 20px-Problem funktionierte nur mit einigen .svg-Bildern. Das Material, das ich in Illustrator erstellt und als SVG gespeichert habe, sah nicht so gut aus wie einige der SVG-Grafiken, die ich in Illustrator gespeichert habe. Vielleicht waren einige der Einstellungen, die ich ausgewählt habe, nicht optimal. Ich habe in Chrome und Ffox eingecheckt und alles sah sehr scharf aus, so dass dieses Antialiasing-Problem nur in Safari auftritt. Ich werde sehen müssen, ob Safari auf dem PC genauso und vor allem auf dem Tablet gerendert wird.
John Dangerous

Antworten:

1

Ich bin mir nicht sicher, was Sie alle versucht haben. Aber haben Sie mit Shape-Rendering gespielt: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering .

Ähnliche Fragen: /programming/11895813/svg-shape-rendering-on-ios

/programming/16889078/turn-off-anti-aliasing-on-svg-when-applying-css3zoom-on-the-element

Kukka
quelle
Danke für das Teilen. Ich werde nachlesen. In Safari auf dem Ipad sah alles gut für mich aus, also ist alles in Ordnung, aber Safari auf dem Desktop sah meiner Meinung nach nicht so gut aus, spielte aber für diese Demo keine Rolle
John Dangerous
1
Wir haben diesen Artikel darüber gefunden, wie verschiedene Browser SVG anzeigen. optische cortex.com/svg-rendering-in-browsers
John Dangerous