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

[Matthias Scharwies]

Servus!

Insgesamt ist es für mich immer noch ein ungelöstes Rätsel, wozu man im svg-Tag width und height braucht und was die viewBox ist, die in den Beispielen oft völlig andere Zahlen hat als width und height (auch das Seitenverhältnis ist oft anders). Wozu brauche ich zwei unterschiedliche Koordinatensysteme?

Dann hattest Du im SELF-Wiki auf der Seite SVG/Elemente/svg bei ViewBox einen Link auf „Viewport“ gesetzt?

Damit ist aber nicht der Viewport des Anzeigegeräts gemeint. Ich habe den Link umgebogen. Wohin, kommt später!

Wann verwendet man width und height? Probier es aus!

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

… nimmt im Browserfenster eben nur 100 x 100 Einheiten ein. Du kannst aufgrund der viewBox-Angabe aber auch noch in x="200" und y="200" zeichnen, es wird entsprechend skaliert.

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

Diese Grafik wird ebenfalls auf einem Zeichenbrett von 200x 200 Einheiten gezeichnet, vom Browser auf die gesamte Größe skaliert.

Heutzutage gibt es eben fast keinen Anwendungsfall für SVG ohne Browser, deshalb lässt man die width und height-Angaben im Allgemeinen weg. Das wird dann im HTML-Dokument über CSS erledigt.

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.

Um die Sache aber nicht zu einfach zu machen, kann man etliche Maße für SVG Elemente auch über CSS definieren.

Das wird im SVG-Einstieg so gehandhabt:

1. Kapitel Grundformen mit XML-Attributen, da die Elemente alle anders gefärbt werden.

2. Kapitel SVG mit CSS stylen Hier wird eben die Möglichkeit mit CSS erklärt. Für jemanden, der sich als IT-affin bezeichnet, sollte der Sprung zum schon bekannten CSS nicht zu schwierig sein.

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.

Ja, aber im SELF-Wiki verwendet man auch im CSS nur dimensionslose Einheiten, mit einer Ausnahme:

Das wird im Abschnitt Geometrie-Attribute beschrieben:

Beachten Sie: Als XML-Attribut benötigt r keine Einheit; innerhalb des style-Elements ist eine Angabe von px erforderlich, da Firefox dies sonst nicht rendert.

---

Ich habe das Tutorial so aufgebaut, dass in jedem Kapitel Schritt für Schritt etwas neues erklärt wird - von Einfachen hin zum Komplexeren.

Die von Dir angesprochene „Problematik“ von viewBox wird im 5. Kapitel SVG in responsiven Webseiten angesprochen, besonders im Abschnitt „SVG als Leinwand“.

Im Normalfall willst du mit SVG ein Icon oder ein Diagramm zeichnen; eine animierte Kamerafahrt kommt eben erst später.

Stell Dir einmal vor, wenn ich damit angefangen hätte und jemand nach 30min Lektüre fragen würde, wann denn endlich die erste Grafik käme?

Herzliche Grüße

Matthias Scharwies