nicht angemeldet Richard Rüfenacht
Tabellenkalk
Tabellenkalk
Matthias Apsel
Tabellenkalk
Matthias Apsel
Julius
Richard Rüfenacht
Gunnar Bittersmann
Hi, ich beschäftige mich gerade mit SVG. Dabei ist mir folgendes aufgefallen. Man spricht von SVG als Code innerhalb von HTML-/XML. Zum andern aber gibt es Grafiken im SVG-Format, die man in HTML einbinden kann. Das Ergebnis in der Anzege ist das selbe. Wie hängen diese beiden zusammen? Kann ich aus einem SVG-Bild einen entsprechenden Code generieren und unmgekehrt? Gruß Rainer
Hallo Rainer,
Einbinden und Einbetten ist mit HTML 5 (und XHTML als Dateninsel mit entsprechendem XML-Namensraum) bei SVG das Gleiche.
Viele Grüße
Robert
Hallo, ich habe etwas anderes gesehen: 1.
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
<html>
<body>
<img src="..../bild.svg" alt="xy">
</body>
</html>
Hallo Rainer,
und wenn du von den SVG-Quelltext des Bildes von 2. in deinen HTML-Code kopierst, hast du 1. und damit ist es doch das Gleiche (vom Ergebnis her).
Viele Grüße
Robert
Dass das Ergebnis das gleiche ist, habe ich bereits im Eingangsbeitrag geschrieben. Das war ja nicht meine Frage.
Hallo,
Robert beantwortet aber genau deine Frage "wie hängen die zusammen?"
Gruß
Kalk
Hallo Rainer
ich habe etwas anderes gesehen:
Der Unterschied betrifft nicht die SVG-Grafik, die ist in beiden Fällen identisch. Unterschiedlich ist, wie der Browser damit umgeht und sie anzeigt. Wird die SVG-Grafik in ein img-Element eingebunden, kann dieses „gesteuert“ werden und nicht die SVG-Grafik direkt.
Mit besten Grüssen
Richard
Hi, auch hier werden nur die verschiedenen Möglichkeiten der Anzeige dargestellt, nicht aber wie man vom Code zum physischen Bild.svg gelangt und umgekehrt. In anderen Worten: 2 Personen haben die Aufgabe dasselbe Bild ins Internet zu bringen. Die eine über svg-Code in Html, die andere soll mit einem Grafik-Programm ein Bild Bild.svg" erstellen und dann in HTML einbinden. Eine dritte Person soll aus dem svg-Code eine Bild.svg erstellen und eine 4. Person aus dem Bild einen Code erzeugen.
Hallo,
SVG ist textbasiert (das ist „der Code“), um ein SVG als Bild zu sehen bzw. darzustellen, benötigst du entweder eine extremst gute Vorstellungskraft oder eben ein Programm, das das für dich übernimmt. Im Normalfall also ein Grafikprogramm oder neuerdings (im Sinne von „seit einigen Jahren“) eben auch Browser.
Gruß
Kalk
Ja, und was hat dies mit meiner Frage zu tun? Noch ein Versuch: Ich nehme doch an, dass wenn man von einem SVG-Bild und SVG-Code spricht, es sich um unterschiedliche "Aggregatszustände" von SVG handelt und man diese daher von einem zum andern konvertieren kann.
Hallo Rainer der 2.,
Ich nehme doch an, dass wenn man von einem SVG-Bild und SVG-Code spricht, es sich um unterschiedliche "Aggregatszustände" von SVG handelt und man diese daher von einem zum andern konvertieren kann.
Nein. Der Code ist das Bild.
Bis demnächst
Matthias
Hallo,
Ja, und was hat dies mit meiner Frage zu tun?
Es ist ein Versuch deine Frage zu beantworten.
Noch ein Versuch: Ich nehme doch an, dass wenn man von einem SVG-Bild und SVG-Code spricht, es sich um unterschiedliche "Aggregatszustände" von SVG handelt und man diese daher von einem zum andern konvertieren kann.
Vielleicht hast du mit dem Bild der „Aggregatzustände“ nur ein bisschen daneben gegriffen. Es handelt bei SVG um „gecodete Bilder“. Nimmst du jetzt ein Textprogramm für das SVG, wird der Code dargestellt, nimmst du ein Grafikprogramm, wird das Bild dargestellt. Nimmst du einen Browser, kannst du wählen.
Gruß
Kalk
Hallo Tabellenkalk,
Nimmst du jetzt ein Textprogramm für das SVG, wird der Code dargestellt, nimmst du ein Grafikprogramm, wird das Bild dargestellt. Nimmst du einen Browser, kannst du wählen.
Je nach dem, wer was versteht:
Я только понимаю вокзал.
Bis demnächst
Matthias
Hallo Rainer,
Noch ein Versuch: Ich nehme doch an, dass wenn man von einem SVG-Bild und SVG-Code spricht, es sich um unterschiedliche "Aggregatszustände" von SVG handelt und man diese daher von einem zum andern konvertieren kann.
Kopiere mal (nur) den Kreiscode
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
in das Textfeld dieser Spielwiese (Vorgabecode manuell löschen oder auf Snippet 0 klicken). Dann wird unten die Grafik aktualisiert. Das passiert übrigens auch direkt im HTML-Code.
Extern eingebundener SVG-Code bietet sich an, wenn es sich nicht um kleinere Grafiken wie etwa Icons handelt. Eine komplexe mit Inkscape oder Illustrator gefertigte Zeichnung möchte man eher nicht mitten im HTML-Code haben, sondern via img oder object eingebunden.
Grüße,
Thomas
Hallo Rainer der 2.,
Eine dritte Person soll aus dem svg-Code eine Bild.svg erstellen
<svg width="100" height="100"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
und eine 4. Person aus dem Bild einen Code erzeugen.
gespeicherte Grafik im Texteditor öffnen.
Du siehst, die Grafik ist der Code.
Bis demnächst
Matthias
Der springende Punkt ist: Wie kann ich die Grafik speichern/erzeugen? Die im Browser angezeigte Grafik kann ich nicht wie oft bei Bildern kopieren bzw. speichern.
Ich geb auf, danke für die Hinweise
Hallo Rainer,
Wie kann ich die Grafik speichern/erzeugen?
Du kannst die Grafik
Die im Browser angezeigte Grafik kann ich nicht wie oft bei Bildern kopieren bzw. speichern.
Doch, indem du das umkehrst, was ich zuvor geschrieben habe:
img oder object eingebunden ist durch einen Rechtsklick darauf und "Speichern unter" (oder im Firefox via "Seiteninformation" -> "Medien"),Viele Grüße
Robert
@@Robert B.
Ich hab die Links mal korrigiert. Nur den fragment identifier anzugeben funktioniert vielleicht in der sog. „Nested-Ansicht“, sonst nicht.
LLAP 🖖
Hallo Gunnar Bittersmann,
Ich hab die Links mal korrigiert. Nur den fragment identifier anzugeben funktioniert vielleicht in der sog. „Nested-Ansicht“, sonst nicht.
Stimmt. Aber es gibt den URL-Shortener https://forum.selfhtml.org/m1685829
Bis demnächst
Matthias
Hallo Rainer der 2.,
Wie kann ich die Grafik speichern/erzeugen? Die im Browser angezeigte Grafik kann ich nicht wie oft bei Bildern kopieren bzw. speichern.
Wenn du gerade nur die Grafik geöffnet hast, also z. B. http://example.org/beispiel.svg geht das – zumindest in Firefox – über Datei > Seite speichern unter…. Für in einer Datei eingebettete Grafiken wurde das hier bereits gesagt: Quellcode ansehen.
Eine SVG muss nicht unbedingt eine statische Grafik enthalten; Links, Animationen und JavaScript können verwendet werden.
Gruß
Julius
Hallo Rainer
auch hier werden nur die verschiedenen Möglichkeiten der Anzeige dargestellt, nicht aber wie man vom Code zum physischen Bild.svg gelangt und umgekehrt.
Zwei Dinge solltest du auseinander halten: Die Erstellung des SVG-Codes, also der eigentlichen SVG-Grafik, einerseits und andererseits die Darstellung auf dem Bildschirm durch den Browser.
In anderen Worten: 2 Personen haben die Aufgabe dasselbe Bild ins Internet zu bringen. Die eine über svg-Code in Html, die andere soll mit einem Grafik-Programm ein Bild Bild.svg" erstellen und dann in HTML einbinden.
Bevor eine SVG-Grafik durch Einbinden in HTML ins Internet gebracht werden kann, muss zunächst die SVG-Grafik erstellt erden. Einfache SVG-Grafiken können direkt in den HTML-Code geschrieben werden, für kompliziertere ist ein Grafikprogramm erforderlich, das den SVG-Code erzeugt, der dann ebenso in HTLM eingefügt oder verlinkt werden kann.
SVG-Grafiken werden in XML-Code als Vektorgrafiken erstellt. Beschrieben werden Vektoren als Pfade, was bei einem Rechteck oder Kreis ziemlich einfach, bei einem Landschaftsbild aber sehr kompliziert sein kann, entsprechend umfangreich ist dann der resultierende SVG-Code.
Der Code einer SVG-Grafik kann auf mehrere unterschiedliche Arten in ein HTLM-Dokument „eingefügt“ werden, je nach dem wie sie im Browser dargestellt werden soll. Die SVG-Grafik an sich besteht aber immer in Form von XML-Code.
Eine dritte Person soll aus dem svg-Code eine Bild.svg erstellen …
Das ist eigentlich das gleiche. Als „Bild“ dargestellt wird der SVG-Code z.B. im Browser nach entsprechender Berechnung. SVG-Grafiken können mit bestimmten Grafikprogrammen aber auch in andere Bildformate wie JEPG, PNG oder GIF konvertiert werden.
… und eine 4. Person aus dem Bild einen Code erzeugen.
Wenn du mit Bild ein Pixelbild z.B. im JEPG-Format meinst, kann das mit einem geeigneten Grafikprogramm vektorisiert und dann als Vektorgrafik mit SVG-Code erstellt werden.
Mit besten Grüssen
Richard
@@Rainer der 2.
Man spricht von SVG als Code innerhalb von HTML-/XML. Zum andern aber gibt es Grafiken im SVG-Format, die man in HTML einbinden kann.
SVG ist ein Vektorgrafikformat, in dem die Grafik in lesbarem Text in XML-Syntax beschrieben ist. (Die widerspiegelt sich im Medientypen image/svg+xml.
SVG kann also (wie jede andere XML-Anwendung auch) innerhalb von XML-Anwendungen verwendet werden. Bspw. in XHTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>…</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">…</svg>
</body>
</html>
Das wurde in HTML5 übernommen. Dort bedarf es auch keiner Namensraumangabe.
<!DOCTYPE html>
<html>
<head>…</head>
<body>
<svg>…</svg>
</body>
</html>
Das Ergebnis in der Anzege ist das selbe.
Nicht dasselbe ist es, wenn du das SVG mit CSS stylen willst. Da SVG ja XML ist, ist das ja möglich.
Wenn das SVG im HTML steht:
<!DOCTYPE html>
<html>
<head>
…
<style>svg { fill: rebeccapurple }</style>
</head>
<body>
<svg>…</svg>
</body>
</html>
und schon wird alles violett (sofern nicht im SVG noch anders angegeben).
Wenn das SVG mittels img oder object aus einer externen Datei eingebunden wird, kommt man mit CSS von außen nicht mehr ran. Dazu müsste das Stylesheet in der SVG-Datei stehen
<svg xmlns="http://www.w3.org/2000/svg">
<style>…</style>
…
</svg>
bzw. aus der SVG-Datei heraus referenziert werden:
<?xml-stylesheet href="…" type="text/css"?>
<svg>…</svg>
Kann ich aus einem SVG-Bild einen entsprechenden Code generieren und unmgekehrt?
Die Frage verstehe ich nicht.
Du kannst dir bei einer im Browser dargestellten SVG-Grafik den Quelltext ansehen – wie bei einem im Browser dargestellten HTML-Dokument auch.
LLAP 🖖