SVG/Längenangaben

SVG/Längenangaben

In SVG gilt für Koordinaten und Längenangaben das einheitenlose Benutzer-Koordinatensystem, das mit der viewBox bestimmt wurde. Fehlt dieses Attribut, dann gilt das Koordinatensystem der Bildfläche in der die Grafik angezeigt wird (Element SVG). Die Bildfläche hat ihren Ursprung (0,0) in der linken, oberen Ecke, die Breite und Höhe kann bei jeder Anzeige anders sein.

Absolute und relative Längenangaben (1mm, 1em, 1vw, 1cqw) wie bei CSS Maßangaben beschrieben, können zwar verwendet werden, aber meistens ist die Verwendung der viewBox die bessere Variante.

Prozentangaben

Prozentangaben (1%) können in SVG überall verwendet werden. Der Bezugswert für 100‍ ‍% ist je nach Eigenschaft immer:

• bei x, x1, x2, cx, dx, rx, refX, width, markerWidth die Breite der viewBox,
• bei y, y1, y2, cy, dy, ry, refY, height, markerHight die Höhe der viewBox,
• bei allen anderen Eigenschaften die Prozentangaben erlauben z. B.: r, stroke-width die normalisierte Diagonale der viewBox.

Wenn keine viewBox angegeben ist, gelten die Maße der Bildfläche in der die Grafik angezeigt wird (Element SVG) als Bezugswert.

Laut Definition ist bei einem quadratischen Bild die normalisierte Diagonale so lang wie die Höhe und Breite des Bildes. Der Bezugswert hat dabei ein Maximum. Er sinkt bei anderen Seitenverhältnissen bis auf 71 % der langen Bildseite. Berechnet wird die normalisierte Diagonale mit folgender Formel:

Das wird auch als Quadratischer Mittelwert bezeichnet.

Ausnahmen

Bei Farbverlaufs-Füllungen, Mustern, Beschneidungen, Masken und Filtern kann das Koordinatensystem umgeschaltet werden zwischen Benutzer-Koordinatensystem und Begrenzungsrahmen des Elementes.

Das betrifft die Elemente linearGradient, radialGradient, pattern, clipPath, mask und filter.