SVG-Logo verschwommen auf der Webseite

Ich habe ein svgLogo für eine Website erstellt ( http://prionts.com.au/ ). Leider sieht das Logo auf dem Bildschirm verschwommen aus. Besonders deutlich wird dies bei dem Shutter „O“ und dem Text „Photography by Rio Jones“. Bild unten zeigt, was ich meine.

Prionts Homepage-Logo

Einige Informationen zur Hilfe:

  • Ich habe das Logo mit 2520 x 1110 Pixel erstellt. In dieser Größe sieht es schön knusprig aus. Es wird auf der Webseite mit einer Breite von 210 Pixel oder einer Größe von 1/12 angezeigt. Ist das eine zu starke Größenreduzierung?
  • Schreiben ist in Gliederung umgewandelter Text.
  • Assets werden nicht pixelgenau platziert. Ich habe versucht, alle Punkte des Verschlusses auf die perfekte Kante eines Pixels zu verschieben, aber es schien keine Verbesserung zu geben.

Sollte ich:

  • Das Logo in der Auflösung erstellen, in der es angezeigt wird? Ich dachte, bei 210 würde ich wirklich anfangen, die Fähigkeit zu verlieren, Dinge zu verfeinern - das ist nur 8 Pixel breit pro Buchstabe für "Fotografie von Rio Jones".
  • Stellen Sie sicher, dass alle Punkte pixelgenau sind?
  • In PNG umwandeln?
  • SVG-Text statt Gliederung verwenden? Ich habe darüber nachgedacht, aber Cross-Browser-Fähigkeit ist ein Problem.
  • Oder etwas anderes?

Ich würde mich über Ratschläge freuen, wie Sie dieses Logo schön und klar gestalten können.

Die Website sieht auf meinem Bildschirm pixelgenau aus. Sind Sie sicher, dass Sie nicht nur zu stark hineinzoomen oder die Auflösungsgrenze Ihres Monitors erreichen? Denn der Rest Ihres Screenshots scheint auch eine niedrigere Auflösung zu haben.
@ Luciano. Zoom war 100%. Der Bildschirm ist 1680 Pixel breit. Nicht das Neueste und Größte, aber groß genug sollte es allemal sein. Ich habe die Aufnahme auf Chrome gemacht. Das Logo sieht in Firefox besser aus und auf Mobilgeräten nahezu perfekt. Verschiedene Möglichkeiten, SVG zu rendern, denke ich.
Das Logo sieht für mich auch gut aus. Kein nennenswerter Unterschied in Firefox/Chrome, mit 1600 x 900 Monitor, sogar Ihr Screenshot sieht in voller Größe OK aus - vielleicht bin ich blind?!?! Alle Monitore haben Pixel, das ist leider das Leben.
Wie andere schon sagten, für mich sieht es gut aus. Ich weiß nicht , wo es schärfere Linien geben könnte, aber für mich sieht es genauso scharf aus wie andere Logos im Internet und ziemlich normal. Die Vorschläge, die Sie gemacht haben, um das Logo in der beabsichtigten Anzeigegröße und pixelgenau zu erstellen, könnten helfen, aber ich würde wirklich nicht zu viel Zeit investieren, es sei denn, es stört Sie wirklich
@ Manly und andere. Ihr Leute seid zu nett. Da mache ich mir jetzt etwas weniger Sorgen. Am meisten habe ich mich über das Logo oben links geärgert.

Antworten (2)

Oh ja. Ich habe jetzt deine Frage. Ich nehme an, was Sie beunruhigt, sind die gezackten Kreislinien des Logos im linken Bereich . "prionts" Ich kann es sehr gut nachvollziehen, wann immer wir versuchen, etwas Schräges zu schaffen, erscheinen diese gezackten Kanten.

Am besten speichern Sie das "O" separat und exportieren es in PNG 24 und platzieren es dann zwischen den "Drucken" und kombinieren Ihr Logo.

Sie können es auch mit anderen Dateiformaten versuchen, aber PNG 24 bietet Ihnen eine bessere Transparenzoption.

Vergessen Sie nicht, es für das Web zu optimieren.

Das ist viel zu spät und vielleicht nicht Ihr Problem, aber für andere Leute, die hier ankommen könnten:

Wenn Sie SVG-Filter verwenden, ähnelt das Ergebnis einem Bitmap-Bild.

SVG-Filter funktionieren, indem sie das SVG rastern.

SVG-Logo verschwommen auf der Webseite
AntwortenHierDatenschutz-Bestimmungen1y, 1v