SVG ist besser als Canvas
bearbeitet von
@@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
<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
<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](https://forum.selfhtml.org/self/2017/jan/25/firefox-svg-bug/1685256#m1685256) abgesehen.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)