SVG ist besser als Canvas

[Gunnar Bittersmann]

@@Matthias Scharwies

So nach kurzem experimentieren hab ich eine Frage. Welche Einheit hat das Koordinatensystem?

Keine.

Das hatten wir vor ein paar Wochen schon im Forum. Ich hab's für mich so verstanden, dass es Pixel sind die dann entsprechend skaliert werden.

„Pixel“ und „skalierbare Vektorgrafik“ sind zwei völlig verschiedene Welten.

@Gunnar Bittersmann hat gemeint, dass es einheitenlose Längeneinheiten des Koordinatensystems sind.

Dem ist so.

Da man z.B für stroke-with als Attribut keine Einheit setzt, als CSS aber dann doch eine Einheit zum Wert hinzufügen muss

Dem ist nicht so.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.1 -1.1 2.2 2.2">
  <style>circle { stroke: rebeccapurple; stroke-width: 0.1; fill: transparent }</style>
  <circle r="1"/>
</svg>

liefert exakt dasselbe Ergebnis wie

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1100 -1100 2200 2200">
  <style>circle { stroke: rebeccapurple; stroke-width: 100; fill: transparent }</style>
  <circle r="1000"/>
</svg>

Es gibt ein inneres Koordinatensystem, auf das sich alle einheitslosen Angaben (hier r, stroke-width und viewBox) beziehen.

viewBox legt fest, welcher Ausschnitt der xy-Ebene zu sehen ist.

Wenn man also alles wie bspw. oben mit 1000 multipliziert, ergibt sich dasselbe Bild.

Das gilt prinzipiell immer – von Browserbugs abgesehen.

LLAP 🖖

Nachtrag: Pixel kommen dann ins Spiel, wenn überhaupt keine Angabe gemacht wurde, wie groß der Browser ein SVG darstellen soll. Dann interpretiert er die viewBox-Ausmaße als Pixel.