Frage zum Wiki-Artikel „SVG/Tutorials/Einstieg“

[Rolf B]

Hallo ReiPar,

Gunnar ist gerne mal mit weißer Soutane und roten Schuhen unterwegs.

Prinzipiell hat er recht: SVG arbeitet in einem eigenen Koordinatensystem, das über die Viewbox definiert ist. Alle Angaben, die man in den Attributen von SVG Elementen macht, beziehen sich auf dieses Koordinatensystem und werden einheitenlos notiert.

<svg viewBox="0 0 200 200">
   <circle cx="50" cy="50" r="20" />
</svg>

Dieses Koordinatensystem wird dann an Hand der Breite und Höhe der SVG Elementbox auf Browserkoordinaten übertragen. Ob dabei das "aspect ratio" (Verhältnis Breite zu Höhe) erhalten bleibt, wird durch das SVG Attribut preserveAspectRatio bestimmt.

Um die Sache aber nicht zu einfach zu machen, kann man etliche Maße für SVG Elemente auch über CSS definieren. Breiten, Höhen, etc. Und an der Stelle kann ich eben auch px schreiben (muss man nicht, tatsächlich akzeptiert SVG CSS auch Zahlenwerte), was aber das Koordinatensystem der Viewbox meint

<svg viewBox="0 0 200 200">
   <style>
      circle {
         stroke: black;  
         stroke-width: 5;       /* geht beides! */
         stroke-width: 5px;
      }
   </stype>
   <circle cx="50" cy="50" r="20" />
</svg>

Ich bin aber gar nicht mehr sicher, ob das schon immer so war oder ob das eine Neuerung ist. Bislang war ich der Überzeugung, dass die Werte in den SVG Attributen immer Zahlenangaben (ohne Einheit) und die Werte in den CSS Eigenschaften immer Längenangaben (mit Einheit) sein müssten.

Rolf