it-swarm.com.de

SVG vs CSS für moderne Webbenutzeroberflächen?

Wenn Sie Flash und wpf/silverlight sehen, verlassen sich beide stark auf Vektoren, um ihre Benutzeroberflächen zu erstellen. Das liegt daran, dass Vektoren sehr einfach zu manipulieren und zu animieren sind.

Ich frage mich, ob SVG in diesem Bereich ein Potenzial hat. Derzeit gibt es nicht viele Tools zum Animieren/Erstellen von SVG-Benutzeroberflächen. Glauben Sie jedoch, dass es in Zukunft CSS als De-facto-Standard für die Erstellung von Benutzeroberflächen für das Web ersetzen wird?

Das Schöne an SVG ist, dass Sie möglicherweise eine Illustrator-Datei in dieses Format exportieren können und eine ziemlich übersichtliche Benutzeroberfläche haben, die unabhängig von der Auflösung ist. Aber ich stelle fest, dass die meisten Leute Schnittstellen mit CSS erstellen (gerundetes Rechteck/Farbverlauf/etc.), Aber warum nicht stattdessen in SVG?

1
foreyez

SVG ist eher ein Bilddateiformat. Es fehlt die gesamte Semantik und Zugänglichkeit, die HTML bietet. Es handelt sich also weniger um ein "vs" -Problem als vielmehr um ein "with" -Problem. SVG wird immer mehr verwendet mit dem Grund-HTML und CSS.

SVG kann nicht ersetzen, was HTML und CSS tun. Es kann vielleicht dazu führen, dass eine Webseite anders aussieht, aber unter der Haube haben Sie nicht das, was das Web ausmacht, das Web.

Dies ist häufig der Hauptnachteil, wenn Sie sich zu sehr auf Flash verlassen.

Aber wir werden viel mehr mit SVG und HTML5s Canvas sehen. Viel mehr wird im Browser erledigt als über Plugins wie Flash und Silverlight.

7
DA01

D3.js könnte helfen.

D3.js ist eine JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf Daten. Mit D3 können Sie Daten mithilfe von HTML, SVG und CSS zum Leben erwecken. Der Schwerpunkt von D3 auf Webstandards bietet Ihnen die vollen Funktionen moderner Browser, ohne sich an ein proprietäres Framework zu binden. Dabei werden leistungsstarke Visualisierungskomponenten und ein datengesteuerter Ansatz zur DOM-Manipulation kombiniert.

beispiel

http://square.github.com/crossfilter/

0
Stephen

Es gibt drei große Probleme bei der Verwendung von SVG über CSS3 für Schaltflächen und Schnittstellenelemente:

Erstens zwingt SVG Designer dazu, eine Reihe von Bildelementen außerhalb des Stylesheets zu verwalten. Sie müssen separat auf Site-CSS mit einem dedizierten und oft trägen Vektoreditor aktualisiert werden. Dies führt zu einem umständlichen Workflow.

Zweitens können Attribute eines SVG-Elements nicht auf semantische Klassen aufgeteilt werden. Mit CSS kann ich aussagekräftige Klassen definieren, die jeweils nur ihre relevanten Stilattribute definieren und diese dann nach Belieben anwenden. Das ist viel praktischer als das manuelle Entwerfen jedes Elements.

Drittens verschlechtert sich CSS3 elegant. SVG nicht. Wenn Sie SVGs in IE8 und darunter anzeigen, erhalten Sie nur ein fehlerhaftes Bild. Sie können Nicht-SVG-Versionen für IE Benutzer) verwalten, dies verdoppelt jedoch die Anzahl der zu wartenden Assets und erhöht Ihren Workflow exponentiell.

0