Frage zum Wiki-Artikel „SVG/Tutorials/Einstieg“
bearbeitet von Matthias ScharwiesServus!
>>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](https://wiki.selfhtml.org/wiki/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!
> ~~~xml
> <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.
> ~~~xml
> <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.
>
> 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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Grundformen) mit XML-Attributen, da die Elemente alle anders gefärbt werden.
[2. Kapitel **SVG mit CSS stylen**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 schwiereig 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
>
> ~~~xml
> <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.
>
Das wird im Abschnitt [Geometrie-Attribute](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 sagen würde und wann kommt jetzt die erste Grafik?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
Frage zum Wiki-Artikel „SVG/Tutorials/Einstieg“
bearbeitet von Matthias ScharwiesServus!
>>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](https://wiki.selfhtml.org/wiki/SVG/Elemente/svg) bei ViewBox einen Link auf „Viewport“ gesetzt?
Damit ist aber nicht der Viewport des Anzeigegeräts gesemeint. Ich habe den Link umgebogen. Wohin, kommt später!
Wann verwendet man width und height? Probier es aus!
> ~~~xml
> <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.
> ~~~xml
> <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.
>
> 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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Grundformen) mit XML-Attributen, da die Elemente alle anders gefärbt werden.
[2. Kapitel **SVG mit CSS stylen**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 schwiereig 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
>
> ~~~xml
> <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.
>
Das wird im Abschnitt [Geometrie-Attribute](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 sagen würde und wann kommt jetzt die erste Grafik?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
Frage zum Wiki-Artikel „SVG/Tutorials/Einstieg“
bearbeitet von Matthias ScharwiesServus!
>>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](https://wiki.selfhtml.org/wiki/SVG/Elemente/svg) bei ViewBox einen Link auf „Viewport“ gesetzt?
Damit ist aber nicht der Viewport des Anzeigegeräts gesemeint. Ich habe den Link umgebogen. Wohin, kommt später!
Wann verwendet man width und height? Probier es aus!
> ~~~xml
> <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.
> ~~~xml
> <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.
>
> 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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Grundformen) mit XML-Attributen, da die Elemente alle anders gefärbt werden.
[2. Kapitel **SVG mit CSS stylen**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 schwiereig 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
>
> ~~~xml
> <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.
>
Das wird im Abschnitt [Geometrie-Attribute](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 sagen würde und wann kommt jetzt die erste Grafik?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
Frage zum Wiki-Artikel „SVG/Tutorials/Einstieg“
bearbeitet von Matthias ScharwiesServus!
>>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](https://wiki.selfhtml.org/wiki/SVG/Elemente/svg)bei ViewBox einen Link auf „Viewport“ gesetzt?
Damit ist aber nicht der Viewport des anzeigegeräts gesemeint. Ich habe den Link umgebogen. Wohin, kommt später!
Wann verwendet man width und height? Probier es aus!
> ~~~xml
> <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"` zeichen, es wird entsprechend skaliert.
> ~~~xml
> <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 heigt-Angaben im Allgemeinen weg.
>
> 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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Grundformen) mit XML-Attributen, da die element alle anders gefärbt werden.
[2. Kapitel **SVG mit CSS stylen**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 schwiereig 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
>
> ~~~xml
> <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.
>
Das wird im Abschnitt [Geometrie-Attribute](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/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 sagen würde und wann kommt jetzt die erste Grafik?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“