Welche Vorteile bringen SVG Grafiken und <svg> ?

[hotti]

Nunja, dass die Grafiken skalierbar sind, hab ich verstanden. Was ist denn nun das Tolle an SVG hinsichtlich Design und HTML5? Ich hab die letzten Tage 'zig Tutorials gelesen, haufenweise spitze Klammern gesehen und sogar ein Perl-Modul gefunden, was einen skalierbaren Kalender als SVG druckbar auf A4 erzeugen kann, was mich aber auch nicht sonderlich beeindruckt.

Vielleicht kann ja hier mal Jemand versuchen, seine Begeisterung von SVG mit mir zu teilen, würde mich freuen.

Dankwart, Horst

PS: Möglicherweise gehts mir grade so wie meinem Onkel Ewald, dem ich als Jugendlicher ganz stolz einen aus Blumenbindedraht selbstgewickelten Widerstand zeigte und damit die Erzeugung von Wärme mit Strom aus einer Flachbatterie demonstrierte. Onkel Ewald war Heizer auf einer Dampflock...

[Gunnar Bittersmann]

@@hotti:

nuqneH

Nunja, dass die Grafiken skalierbar sind, hab ich verstanden. Was ist denn nun das Tolle an SVG hinsichtlich Design und HTML5?

Dass Vektorgrafiken skalierbar sind.

Oder ich habe deine Frage nicht verstanden.

Qapla'

[Gunther]

@@hotti:

Nunja, dass die Grafiken skalierbar sind, hab ich verstanden. Was ist denn nun das Tolle an SVG hinsichtlich Design und HTML5?

Dass Vektorgrafiken skalierbar sind.

Ein weiterer Vorteil von SVG-Grafiken, neben der Skalierbarkeit, ist auch der Umstand, dass es sich um XML Dokumente handelt, auf die man per Javascript zugreifen (und per CSS stylen) kann.

So lassen sich beispielweise mehrere Grafiken in eine Datei packen und per Script nur die jeweils gewünschte anzeigen.

Einen "Nachteil" gibt es aber leider auch, der zwar nichts mit dem SVG Format an sich zu tun hat.
Aber bei "komplexeren" Grafiken, wo man auf die Unterstützung entsprechender Grafikprogramme zurückgreifen muss, produzieren diese leider alle einen fürchterlich "aufgeblähten" Quellcode, sodass die resultierende Datei schnell 3 - 4 mal so groß ist, wie eigentlich nötig.

Der einzige Weg, den ich bisher gefunden habe, solche Dateien wieder auf Normalmaß zu schrumpfen ist, sie mit Hilfe eines Tools (z.B. SVG Cleaner) zu bereinigen und entschlacken, und danach ggf. noch händisch nachzubearbeiten.

Auf diese Art & Weise kommt man i.d.R. zu Dateien, die nicht größer sind als ihre Rastergrafik Pendants, nur dass sie halt die 2 erwähnten (wesentlichen) Vorteile bieten!

Und wenn Apple und Google es jetzt noch schaffen würden eine "ordentliche" Unterstützung für SVG in ihre Browser zu integrieren, wären wir nahezu am Ziel unserer Träume ...!

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Ein weiterer Vorteil von SVG-Grafiken, neben der Skalierbarkeit, ist auch der Umstand, dass es sich um XML Dokumente handelt, auf die man per Javascript zugreifen (und per CSS stylen) kann.

Erster! (sry, 1UnitedPower)

Der einzige Weg, den ich bisher gefunden habe, solche Dateien wieder auf Normalmaß zu schrumpfen ist, sie mit Hilfe eines Tools (z.B. SVG Cleaner) zu bereinigen und entschlacken, und danach ggf. noch händisch nachzubearbeiten.

Ich schreibe SVG gleich im Texteditor (zumindest für einfache Formen).

Und wenn Apple und Google es jetzt noch schaffen würden eine "ordentliche" Unterstützung für SVG in ihre Browser zu integrieren, wären wir nahezu am Ziel unserer Träume ...!

Inwiefern hinken die Microsoft und Mozilla hinterher?

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Ein weiterer Vorteil von SVG-Grafiken, neben der Skalierbarkeit, ist auch der Umstand, dass es sich um XML Dokumente handelt, auf die man per Javascript zugreifen (und per CSS stylen) kann.

Erster! (sry, 1UnitedPower)

Ja, hab' ich anschließend dann auch gesehen! Aber da war's halt schon zu spät ...! ;-)

Der einzige Weg, den ich bisher gefunden habe, solche Dateien wieder auf Normalmaß zu schrumpfen ist, sie mit Hilfe eines Tools (z.B. SVG Cleaner) zu bereinigen und entschlacken, und danach ggf. noch händisch nachzubearbeiten.

Ich schreibe SVG gleich im Texteditor (zumindest für einfache Formen).

Ja, das "klappt" (im Sinne von 'praktikabel') aber nur bei "einfachen" Formen.

Und wenn Apple und Google es jetzt noch schaffen würden eine "ordentliche" Unterstützung für SVG in ihre Browser zu integrieren, wären wir nahezu am Ziel unserer Träume ...!

Inwiefern hinken die Microsoft und Mozilla hinterher?

Zum Beispiel: https://code.google.com/p/chromium/issues/detail?id=128055
Siehe auch: http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/

Gruß Gunther

[Texter mit x]

Und wenn Apple und Google es jetzt noch schaffen würden eine "ordentliche" Unterstützung für SVG in ihre Browser zu integrieren, wären wir nahezu am Ziel unserer Träume ...!

Inwiefern hinken die Microsoft und Mozilla hinterher?

Als ich das das letzte mal unter die Lupe genommen habe, lagen sie im Umfang dessen was sie unterstützen noch ein gutes Stück hinter dem uralten Adobe-SVG-viewer (von 2005) für uralte IEs zurück. Außerdem lag die Prozessorauslastung selbst bei einfachsten Animationen i.d.R. bei 100% während es selbst deutlich aufwendigeres Animationen mit dem Adobe-SVG-viewer im IE i.d.R. nur 3-6% waren.

[Texter mit x]

Außerdem lag die Prozessorauslastung selbst bei einfachsten Animationen i.d.R. bei 100% während es selbst deutlich aufwendigeres Animationen mit dem Adobe-SVG-viewer im IE i.d.R. nur 3-6% waren.

Gerade noch mal den aktuellen FF getestet: Nicht nur 100% Auslastung, selbst die Aktualisierungsrate der Anzeige der Prozessorlast ist deutlich eingebrochen. Einen alten IE mit viewer zum Gegentesten habe ich aber nicht mehr installiert.

[Encoder]

Die Vorteile die ich sehe, ohne viel Erfahrung damit zu haben:

• Skalierbarkeit wie du ja schon angedeutet hast. Ein Bild das man klein darstellen und erkennen kann, ist trotzdem auch in groß immer noch darstellbar und sieht nicht verpixelt aus sondern nach wie vor gut aufgelöst.
• Dateigröße: Eine Grafik wie z.B. ein Diagramm das aus wenigen grafischen Elementen besteht braucht nicht so viel Traffic wie wenn man es als Bild ausliefert.

Dann vielleicht noch die Serverlast, wenn man ein Bild nicht serverseitig zeichnen lassen und komprimieren muss.

[Tabellenkalk]

Hallo,

hab auch noch kaum Erfahrung mit svg, aber ich könnte mir vorstellen, dass es Szenarien gibt, bei denen aus Infos in einer Datenbank eine Grafik entstehen soll und dies mit svg leichter und schöner umzusetzen ist als mit einem Rasterbild.

Gruß
Kalk

[Gunnar Bittersmann]

@@hotti:

nuqneH

und damit die Erzeugung von Wärme mit Strom aus einer Flachbatterie demonstrierte. Onkel Ewald war Heizer

und froh, dank deiner Erfindung keine Kohlen mehr schippen zu müssen?

Dampflock...

Ich wusste gar nicht, dass es zum Anpflocken von Damwild spezielle Pfähle gibt.

Ist verlockend, Lok mit c zu schreiben.

Qapla'

[Gunnar Bittersmann]

@@hotti:

nuqneH

Was ist denn nun das Tolle an SVG hinsichtlich Design und HTML5?

SVG hat ein DOM, es kann also mit JavaScript manipuliert und mit CSS gestylt werden (incl. transitions und animations).

Qapla'

PS: Ist „hat“ das richtige Wort?

[1UnitedPower]

Meine Herren!

Mal abgesehen von der Skalierbarkeit, die hier schon mehrfach angesprochen wurde. SVG schmiegt sich wunderbar in das bestehende Web-Ökosystem ein. Man formuliert seine Grafiken in einer XML-Sprache. Die lässt sich sogar problemlos in HTML einbetten. Man verziert sie mit CSS und man kann mit JavaScript und der DOM-API wie gewohnt darauf arbeiten.

SVGs Potenzial geht weit über das eines puren Grafik-Formats hinaus: SVG ist interaktiv. Es kann auf Benutzereingaben und I/O jedweder Art reagieren. Ein bisschen Inspiration gefälligst? http://d3js.org/

[molily]

Hallo,

Vorteile gegenüber was? SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format. Das führt uns zu den Unterschieden zwischen Vektorgrafiken und Rastergrafiken.

Sie decken zwei unterschiedliche Einsatzgebiete ab. Mit Überschneidungen natürlich, weil sich jede SVG-Grafik auch rastern lässt und Rastergrafiken einbinden kann. SVG sollte man einsetzen, wenn sich die meisten Bildelemente mit SVG-Formen ausdrücken lassen und eine clientseitige Skalierbarkeit oder eine Dynamik gewünscht ist. Letzteres ist in Zeiten von unterschiedlichen Device-Pixel-Ratios so gut wie immer der Fall.

Darunter fallen eine große Zahl von Grafiken im Web: Icons, Logos, Illustrationen/Animationen, manche Zeichnungen, komplexe UI-Elemente, Karten, Diagramme/Visualisierungen usw. Für die wurden bisher Rastergrafiken, Flash-Plugins, HTML5-Canvas, Icon-Fonts usw. verwendet. SVG ersetzt diese Anwendungen zunehmend, aus praktischen Gründen aber nicht alle.

SVG-Code lässt sich direkt in HTML5 notieren, als externe Ressource mit img oder object einbetten oder auch als CSS-background-image laden. Besonders im Bereich der Datenvisualisierung und interaktive Grafiken werden SVG-Grafiken nahtlos in HTML-Dokumente eingebunden und über JavaScript programmiert. D3 als verbreitete JavaScript-Bibliothek wurde schon genannt. D3 ist in der Grundidee keine SVG-Bibliothek, sondern bildet ganz allgemein JavaScript-Objekte auf DOM-Elemente ab. Es bietet sich an, damit SVG zu erzeugen.

Beispiele für SVG-basierte Datenvisualisierung, an denen ich mitgearbeitet habe:
http://data.oecd.org/
http://data.oecd.org/germany.htm
http://data.oecd.org/unemp/unemployment-rates.htm
http://viz.ged-project.de/

Mathias

[TSO]

SVG-Code lässt sich direkt in HTML5 notieren, als externe Ressource mit img oder object einbetten oder auch als CSS-background-image laden.

Inwieweit ist der Code bei einer direkten Einbindung eigentlich korrekt?
Das letzte Mal, als ich versucht habe SVG-Code direkt in ein HTML (5) Dokument einzubinden, hat sich der Validator darüber beschwert, dass <svg> kein zulässiges Tag wäre.

Und gibt es signifikante Vor-/Nachteile zwischen der Einbindung als img oder object?
Rein semantisch scheint mir img ja eigentlich sinnvoller.

[molily]

Hallo,

svg ist in HTML 5 direkt erlaubt. Vermutlich hast du einen unzureichenden Validator verwendet. Ich empfehle http://html5.validator.nu/.

Und gibt es signifikante Vor-/Nachteile zwischen der Einbindung als img oder object?

object erlaubt z.B. den Zugriff auf das SVG-DOM, ähnlich einem iframe mit einem HTML-Dokument.

Rein semantisch scheint mir img ja eigentlich sinnvoller.

img ist ein spezielles Element zur Einbindung von Bildern, object ein allgemeines Element zur Einbindung von sämtlichen externen Ressourcen; insofern sind beide geeignet.

Mathias

[Tabellenkalk]

Hallo,

Rein semantisch scheint mir img ja eigentlich sinnvoller.

img ist ein spezielles Element zur Einbindung von Bildern, object ein allgemeines Element zur Einbindung von sämtlichen externen Ressourcen; insofern sind beide geeignet.

ich hätte jetzt eigentlich <figure> erwartet.

Gruß
Kalk

[molily]

Hallo,

img ist ein spezielles Element zur Einbindung von Bildern, object ein allgemeines Element zur Einbindung von sämtlichen externen Ressourcen; insofern sind beide geeignet.

ich hätte jetzt eigentlich <figure> erwartet.

Aha. Das hat mit dem Thema der Diskussion nun was zu tun…? figure steht nicht auf einer Ebene mit img oder object, sondern darüber. img und object können natürlich in einem figure stehen.

Mathias

[Tabellenkalk]

Hallo,

img ist ein spezielles Element zur Einbindung von Bildern, object ein allgemeines Element zur Einbindung von sämtlichen externen Ressourcen; insofern sind beide geeignet.

ich hätte jetzt eigentlich <figure> erwartet.

Aha. Das hat mit dem Thema der Diskussion nun was zu tun…?

In diesem Themenzweig gehts um die Semantik bzw. ums Einbinden. Ich hab meine Verwunderung darüber geäußert, dass svg in img- oder object-Elementen eingebunden werden soll und nicht in figure-Elementen.

Gruß
Kalk

[molily]

Hallo,

Ich hab meine Verwunderung darüber geäußert, dass svg in img- oder object-Elementen eingebunden werden soll und nicht in figure-Elementen.

Was ist daran verwunderlich? figure konkurriert nicht mit img oder object. Es eignet sich nicht zum Einbinden von Bildern, sondern zum Beschreiben von Bildern, die z.B. mit img oder object eingebunden werden. Bestehende Bilder können mit figure mit einer Bildunterschrift (Caption) versehen werden. Es ist nicht figure ODER img/object, sondern höchstens figure UND img/object.

<figure>  
  <img src="foo.svg" alt="Alternativtext"><!-- oder eben object -->  
  <figcaption>Bildbeschreibung</figcaption>  
</figure>

http://html5doctor.com/the-figure-figcaption-elements/

Grüße
Mathias

[hotti]

hi,

<figure>

<img src="foo.svg" alt="Alternativtext"><!-- oder eben object -->
  <figcaption>Bildbeschreibung</figcaption>
</figure>

  
da greift bei mir `img{ max-width: 100% }`{:.language-css} nicht mehr, gibts da ne andere Lösung für???  
  
Horst

[molily]

Hallo,

da greift bei mir img{ max-width: 100% } nicht mehr

Kann ich nicht nachvollziehen. Beispielseite?

Hast du eine Größe im svg-Element notiert?

Mathias

[hotti]

Hallo,

da greift bei mir img{ max-width: 100% } nicht mehr

Kann ich nicht nachvollziehen. Beispielseite?

yes

Hast du eine Größe im svg-Element notiert?

Sorry, ist nicht svg, aber eine Größe habe ich dennoch nicht notiert. Und heute mittag ging das Laden auch irgendwie schneller...

guck mal bitte wg. max-width

Horst

[molily]

Hallo,

yes

Funktioniert im Chrome wie erwartet. Ist der Viewport kleiner als das Bild, wird das Bild verkleinert.

Im Firefox muss man max-width anscheinend auch auf das floatende Element anwenden.

Mathias

[hotti]

hi Danke Dir!!!

Im Firefox muss man max-width anscheinend auch auf das floatende Element anwenden.

Ja, irgendwie beißt sich da aber noch was mit margin, also ich hab margin mal verkleinert, max-width auf 100pro gesetzt und jetzt wird auch verkleinert.

Horst Kleinweich

PS: Meine Seitenstatistiken gibts demnächst als SVG :)

[hotti]

hi,

danke Euch, jetzt hab ich ein paar schöne Beispiele gesehen, das gibt Lust auf mehr!

PS: Möglicherweise gehts mir grade so wie meinem Onkel Ewald, dem ich als Jugendlicher ganz stolz einen aus Blumenbindedraht selbstgewickelten Widerstand zeigte und damit die Erzeugung von Wärme mit Strom aus einer Flachbatterie demonstrierte. Onkel Ewald war Heizer auf einer Dampflock...

Er würde jetzt die Elektronen spüren, wie sich sich im Eisendraht aneinanderreiben. Ich hab das damals wohl nicht so gut 'rübergebracht :)

Locomotive Breath by Jethro Tull

Das rockt heute noch!

[ThomasM]

Hallo hotti,

Vielleicht kann ja hier mal Jemand versuchen, seine Begeisterung von SVG mit mir zu teilen, würde mich freuen.

Es wurde schon viel genannt, insbesondere die präzise Beschreibung von Vektorformen, Animationen, Transformationen, Formatierung mit CSS-Techniken, DOM-Scripting und mehr.

Mich hat schon relativ früh die Kombination von client- und serverseitigen Techniken interessiert, siehe dieses 11 Jahre alte AJAX-Beispiel.

Erwähnenswert ist auch die Möglichkeit, SVG-Inhalte über XSLT aus XML-Daten zu erzeugen, in diesem Beispiel direkt im Browser mit Saxon-CE realisiert.

BTW: SVG wurde bereits vor 15 Jahren unter Federführung von Adobe entwickelt (schon von Illustrator-Versionen um 8/9 unterstützt). Die daraufhin vom W3C veröffentlichte 1.0-Spezifikation stammt von 2001.

Grüße,
Thomas