SVG - stroke von Umrandungen

[mark]

Hallo Gunnar,

Du meinst viewBox.

Ja, es müsste natürlich viewBox heißen.

Dann ist der umrandende Stroke sichtbar, aber ich verliere den Vorteil, dass das Icon passgenau ist, weil ja sein viewport nicht mehr bündig ist

?? Wenn du die ViewBox nach allen Seiten um die halbe Strichstärke der Rahmenlinie vergrößerst, sollte es genau passen.

Das geht eben nur, wenn die stroke-width nicht variabel ist. Wenn ich ein icon mit unterschiedlicher stroke-width darstellen möchte ist das ein Problem.

Dies ist beispielsweise dann der Fall, wenn dieses Icon in Unterschiedlichen Größen dargestellt werden soll. Bei kleinen Abmessungen habe ich dann wegen des Antialiasing (Stichwort: Subpixel-Rendering) das Problem dass die Umrandung kaum noch sichtbar ist und ich deshalb die stroke-width verändern muss. Mache ich das aber, schneidet mich die viewBox ab.

Auch müsste ich die stroke-width, schon im voraus kennen, was nicht der Fall ist, da ich das Icon erst per CSS im Browser auf seine eigentliche Größe bringe.

Was wäre daran frickelig?

Mein Workflow, sieht folgendermaßen aus:

• a) erstelle das Icon
• b) optimiere das Icon
• c) binde es in die Webseite ein
• d) setze/korrigiere width, height, stroke-width per CSS
• e) sehe, dass die viewBox nicht ausreichend groß ist und das Icon abgeschnitten wird
• f) korrigiere die viewBox im SVG entsprechend
• g) kontrollere, ob alles passt und komme drauf, dass mein Icon nun zu klein ist, muss also nochmal width und height entsprechend korrigieren.

Das ist frickelig. Schritt e, f und g wären überflüssig, wenn der Stroke außerhalb der viewBox sichtbar wäre. Aber es gibt ja gute Gründe, warum die viewBox beschneidet.

Eine Alternative wäre natürlich, dass ich die viewBox überdimensioniert setze, dass es mit ziemlicher Sicherheit keinen overflow gibt.

lg