[mike55]

Hallo zusammen.

Mein pixelgenaues SVG aus Illustrator sieht direkt im Browser geöffnet perfekt scharf aus:
Direkt geöffnet

Sobald ich es in Wordpress oder in einer STandard HTML Seite einbaue, werden einige der vertikalen Linien unscharf.
in HTML

Wie lässt sich das verhindern?

Vielen Dank im Voraus
Mike

[heav]

Ich seh’ keinen Unterschied

[miss-jk]

Ich auch nicht

[hilson]

Dito

[mike55]

Merkwürdig. Ich vermute mal ihr habt ziemlich dpi starke Monitore?
Ich habs an 2 Windows Rechnern getestet: 3O Zoll und 24 Zoll, beide nur um die 90 dpi.
Bei beiden ist z.B. die vertikale Linie rechts außen unterschiedlich scharf.

Also ich hoffe man sieht es im Screenshot (links nur Bild und rechts html):



Ansonsten in Worten:
• Linkes Bild: Rechte Außenlinie genau 1 Pixel.
• Rechtes Bild: REchte AUßenlinie ist 1 Pixel + 1 Halb Transparent Pixel.

[top]

Auf der Arbeit (Win7) hatte ich auch keinen Unterschied gesehen. Hier auf meinem Privatrechner (Win10) kann ich es nachvollziehen.

Klick mal im Firefox mit rechts auf das Element und wähle "Element untersuchen" Wenn ich dort dann rechts auf "Box-Model" klicke wird mir die Größe des Objektes angezeigt. Eingebettet in die HTML-Datei wird mir 160x113 (Pixel) ausgegeben.
Bei dem direkten Aufruf im Browser ist das Objekt 160x113.383 groß!

Beim Aufruf über die HTML-Datei scheint dein SVG also geringfügig verkleinert zu werden, wodurch die Unschärfe entsteht.

Versuch also mal, ob du das Teil auch mit exakten Pixelmaßen erstellt bekommst. Dann müsste das Problem nicht mehr auftreten.

[mike55]

Hallelujah! Das wars.

Ich dachte schon ich bin bekloppt.
Die AI Arbeitsdatei war natürlich pixelgenau, aber im SVG kam plötzlich ein krummer WErt heraus. Wie auch immer.
Hab die Zeichenfläche des SVGs noch mal in Illustrator nachbearbeitet. Jetzt passt es.

Tausend Dank!