SVG vs. Rastergrafiken

am 28. Oktober 2014 in Aktuelles von
Bisher unkommentiert »

Die Implementierung von grafischen Materialien in Websites bildet ein breites Themenfeld. Dabei stehen sich hauptsächlich zwei Formen der Einbindung gegenüber:

  • Scalable Vector Graphics
  • Rastergrafiken

Dieser Artikel soll die beiden Formate beschreiben. Dabei sollen die Vor- und Nachteile der beiden Formate betrachtet werden und anhand von Beispielen verdeutlicht werden, wann der Einsatz welcher Technik Sinn macht.

Was ist SVG?

SVG steht für Scalable Vector Graphics und beschreibt einen vom W3C empfohlenen Standard zur Beschreibung von Vektor Grafiken. Dabei basiert SVG auf dem XML Format und eignet sich damit speziell für die Einbindung im Web. Durch die Verwendung von speziellen Tags können dabei einzelne grafische Elemente beschrieben oder auch miteinander kombiniert werden. SVG bietet hier verschiedene Standardformen an wie z.B. Kreise, Pfade, Rechtecke oder Polygone. Jedes Element wird zusätzlich über seine Attribute beschrieben. So können z.B. die Füllung, Kontur oder die Transparenz festgelegt werden. Mit HTML5 besteht die Möglichkeit SVG Grafiken direkt im Quelltext zu beschreiben:

<!DOCTYPE html>
<html>
<body>
  <svg width="250" height="250">
    <rect width="200" height="150" stroke="#CCCCCC" stroke-width="4" 
    fill="#666666" />
  </svg>
</body>
</html>

In diesem Beispiel wird ein Rechteck mit einer Breite (width) von 200px, einer Höhe (height) von 150px und mit der Farbfüllung (fill) “#666666″ definiert. Zusätzlich erhält es eine 4px starke Kontur (stroke-width) in der Farbe (stroke) “#CCCCCC”.

Wo liegen die Vorteile?

  • Wie bei allen vektorbasierten Grafiken verlieren auch SVG Grafiken keine Qualität wenn sie gestreckt oder gestaucht werden. Dadurch werden Sie z.B. auch auf High Resolution Displays immer scharf dargestellt. Zusätzlich erlaubt dies die Grafik zu skalieren.
  • Jedes einzelne Element und jedes einzelne Attribut in SVG kann animiert werden.
  • SVG ist kompatibel mit anderen Standards. So können die Grafiken zusätzlich mit CSS oder XSL bearbeitet werden. Bei der Verwendung von Text kann dieser immer noch markiert und kopiert werden. Außerdem kann er durchsucht und beispielsweise von Google indexiert werden. Durch JavaScript lassen sich sogar zusätzliche Funktionen einbauen und Elemente verändern.
  • Durch das Format “.svgz” ist es möglich SVG Dateien auch komprimiert zu übertragen. Dadurch erhöht sich zusätzlich die Ladegeschwindigkeit der Website und Ressourcen auf dem Server werden geschont.
  • Dadurch das SVG Dateien in XML geschrieben sind, können sie auch mit jedem herkömmlichen Text-Editor geöffnet und bearbeitete werden.
  • Alle aktuellen Versionen der geläufigsten modernen Browser unterstützen derzeit den SVG Standard.
  • Insgesamt weisen SVG Dateien eine geringere Dateigröße wie Rastergrafiken auf. Zum Beispiel ein Rechteck mit Kontur hat im SVG Format nur 681 Byte während die selbe Grafik im PNG Format 3 KB aufweist.

 

Wo liegen die Nachteile?

  • SVG Grafiken werden auf der Clientseite durch den Browser interpretiert. Dadurch werden Ressourcen verbraucht. Wenn der Rechner auf Clientseite nicht über genügend Leistung verfügt, kann es unter Umständen zu verzögerter Darstellung kommen. Besonders komplexe SVG Grafiken können sehr rechenintensiv werden.
  • SVG Dateien können einfach heruntergeladen werden und haben einen einsehbaren Quelltext. Dadurch kann die Grafik bearbeitet werden und als eigenes Werk präsentiert. Hier fehlen eindeutig Copyright Maßnahmen um solche Grafiken schützen zu lassen.
  • SVG eignet sich ausschließlich für Grafiken die Vektorbasiert konzipiert wurden. Komplexe Strukturen und Farben wie bei Fotografien sind nahezu unmöglich und verursachen sehr große Dateien.

 

Was sind Rastergrafiken?

Rastergrafiken bestehen aus einzelnen Bildpunkten (Pixeln) welche einen Farbwert annehmen können. Dabei beschreibt die Auflösung des Bildes auch gleichzeitig die Größe. Rastergrafiken sind das gängigste Format für Grafiken im Web. Dabei kommen verschiedene Kompressionsverfahren zum Einsatz die auch gleichzeitig für verschiedene Einsatzzwecke optimiert sind. Beispielsweise eignet sich das Dateiformat PNG für Grafiken mit einem relativ niedrigen Detailgrad und ebenen Flächen. Zusätzlich wird die Verwendung von Transparenz ermöglicht. JPG Grafiken, wie beispielsweise Fotografien, eignen sich am besten für Grafiken mit sehr hohem Detailgrad. In der Webentwicklung werden sie oft für Layout Zwecke gebraucht z.B. um bestimmte Hintergründe darzustellen oder realistische Texturen zu verwenden.

 

Wo liegen die Vorteile?

  • Rastergrafiken eignen sich hervorragend für Grafiken mit einem hohen Detailgrad also beispielweise Fotografien. Es sind sehr hohe Farbabstufungen möglich.
  • Durch eine breite Palette an Bildbearbeitungsprogrammen stehen für die Erstellung von Rastergrafiken unzählige Möglichkeiten zur Verfügung. Die Dateiformate sind dabei meist plattformunabhängig und können überall verwendet werden.
  • Durch verschiedene Grafikformate die auf verschiedene Einsatzzwecke ausgerichtet sind ist ein gezielter Einsatz möglich.

 

Wo liegen die Nachteile?

  • Rastergrafiken sind starr. Sie erlauben keine Animation der einzelnen Bildelemente. Einzige Ausnahme ist das Format GIF. Hierfür jedoch ist entsprechende Software nötig. Ein GIF besteht dabei aus Einzelbildern die nacheinander angezeigt werden und so eine Bewegung ergeben. Dieses Format generiert allerdings sehr große Dateien.
  • Text, welcher in Grafiken verwendet wird, besteht ebenfalls nur aus einzelnen Pixeln im Gesamtraster. Er kann somit nicht durchsucht oder markiert werden.
  • Insgesamt weisen Pixelgrafiken eine höhere Dateigröße als SVG Grafiken auf. Dies hängt mit dem Speicherverfahren zusammen. Während SVG Grafiken durch mathematische Vektoren berechnet werden, werden bei Pixelgrafiken je nach Kompressionsverfahren verschiedene Algorithmen zum speichern verwendet.
  • Rastergrafiken haben eine bestimmte Größe. Wenn sie nun vergrößert werden, verlieren sie an Qualität und sogenannte Treppeneffekte treten ein. Diese können mit Antialiasing zwar umgangen werden, es entstehen jedoch trotzdem Qualitätseinbußen.

 

Fazit

Beide Grafik Formate haben ihre Daseinsberechtigung. Während sich SVG optimal für die Darstellung von einfachen geometrischen Formen eignet, können komplexe Rastergrafiken mit relativ geringen Dateigrößen dargestellt werden. Durch seinen vielfältigen Einsatz bietet sich vor allem SVG für dynamische und interaktive Grafiken an. Der Einsatz von Animationen kann Websites lebendiger erscheinen lassen und garantiert eine höhere User Experience. Für den Einsatz von einfachen grafischen Materialien ist in allen Fällen SVG die bessere Wahl. Logos, Icons, oder weitere kleine Elemente können so Ressourcenschonend eingebunden werden. Die Rastergrafiken sollten dabei vorwiegend bei komplexeren grafischen Materialien eingesetzt werden. Gänzlich auf sie zu verzichten ist nach heutigem Stand nicht möglich, da es keine konkrete Alternative gibt. Hier muss durch verschiedene technische Maßnahmen eine optimale Darstellung auf allen Endgeräten realisiert werden.

Quiz On – das Quiz für Onlinemedienstudenten

am 22. Oktober 2014 in Aktuelles von
1 Kommentar »

Es gibt das Sprichwort: “Man soll gehen wenn es am schönsten ist.”  So oder zumindest so ähnlich ist es auch im Onlinemedienstudium an  der DHBW Mosbach. Einige der tollsten Projekte kommen zum Schluss. So zum Beispiel das Browsergame Webingen oder aber die App Quiz ON, eine Quiz App angelehnt an die bekannte App Quizduell.

QuizON

Mit Quiz ON ist es Studenten des Studienganges Onlinemedien hier an der DHBW möglich entspannt zu lernen. Dadurch, dass das Lernen mit Spaß verbunden wird, lernt man spielerisch. Dieses Prinzip nennt sich Gamification. Gamification bedeutet, dass spielfremde Elemente mit Dingen aus der Spielewelt verbunden werden. So soll im Fall der Quiz App die Motivation gesteigert werden zu lernen.  Die Fragen drehen sich rund um die Fächer des Studiums und kommen von den Studenten selbst.

Der Bauplan

Wie geht man denn vor, wenn man eine Quiz App programmieren möchte? In unserem Fall war die Erstellung von Quiz ON in zwei Phasen aufgeteilt. So wurde in einem Projekt zuerst die Konzeption der Inhalte vorgenommen. Das bedeutet es musste überlegt werden, wie die Inhalte aufgebaut werden und welche Inhalte es überhaupt in das Quiz schaffen.

So haben wir uns beispielsweise dafür entschieden nur geschlossene Fragen zu nutzen und immer vier Antwortmöglichkeiten vorzugeben.

QuizON_Frage

Die Umsetzung

In einem zweiten Projekt wurde dann die Umsetzung der App in Angriff genommen. Hier musste zuerst natürlich wieder geplant werden. Diesmal aber eher welche Tabellen die Datenbank benötigt (Einige) und welches Framework wir benutzen sollen (Yii)

Danah ging es mit der Programmierung los. Wir haben uns dazu entschieden die Aufgaben etwas aufzuteilen um schneller voranzukommen. So konnte sich jeder richtig in sein Thema vertiefen. Das Projekt stand ganz im Zeichen von Scrum. Bei Scrum handelt es sich um eine agile Methode zum Projektmanagement.  So konnten wir auch in diesem Bereich Erfahrungen im Einsatz dieser Methode sammeln. Die verschiedenen Rollen wie die des Produkt Owners und des Scrum Masters wurden in der Gruppe vergeben. Zum Entwicklerteam gehörten sebstverständlich trotzdem alle :) Hier ist festzuhalten, dass wir zum Ende des Projekts alle von Scrum überzeugt waren und und darauf freuen diese Methode auch in der freien Wildbahn zu benutzten.

Fazit

Das Projekt hat allen Mitgliedern unserer Gruppe großen Freude bereitet. Wir haben alle sehr viel gelernt und wissen jetzt noch etwas besser, wie es in der Wirtschaft zugeht.

Da wir, wie alle Onlinemedienstudenten,  Social Credits verdienen müssen, haben wir uns sehr gerne dazu bereit erklärt die App weiter zu entwickeln. So sind Beispielsweise noch Fehler ausgebügelt und ein zwei Features eingebaut worden.

Wir hoffen, dass die App tatsächlich Studenten hilft, sich spielerisch auf Prüfungen vorzubereiten. In diesem Sinne: Game ON!

 

Google Online Marketing Challenge (GOMC)

am 16. Oktober 2014 in Projektarbeiten & Studien von
1 Kommentar »

Google Online Marketing Challenge (Logo)

Die Google Online Marketing Challenge (GOMC) ist ein von Google ausgerufener Wettbewerb, bei dem Studenten in Zusammenarbeit mit einem betreuenden Professor die Erstellung und Durchführung von Online-Marketing-Kampagnen erlernen. Dieses Jahr hat der Studiengang Onlinemedien mit einem eigenen Team aus dem sechsten Studiensemester teilnehmen dürfen. >> Weiterlesen

Getagged: ,

Bitcoins – Thema von Gestern oder Währung der Zukunft?

am 12. Oktober 2014 in Aktuelles von
Bisher unkommentiert »

„Mit einer elektronischen Währung, die auf einem kryptografischen Beweis beruht und kein Vertrauen in Mittelsmänner benötigt, ist Geld sicher und kann mühelos transferiert werden.“

Das war die Idee des Erfinders der Bitcoins, Satoshi Nakamoto. Nachdem sich zunächst niemand für die neue Währung interessierte stieg der Kurs im November letzten Jahres innerhalb eines Monats von 200 auf bis über 1200 $ / BTC. Erklären kann man sich diesen Aufwärtstrend wohl nur durch die starke Verbreitung und die mediale Aufmerksamkeit.
>> Weiterlesen

Fotografieren – mehr als auf den Auslöser drücken

am 03. Oktober 2014 in Projektarbeiten & Studien von
Bisher unkommentiert »

Web Design, Onlinerecht, Typografie, Java, Unix, Multimediatechnik, Statistik… Bereits im ersten Studienjahr erhalten wir Einblicke in die verschiedensten Themen rund um Onlinemedien. Dazu gehört auch die Vorlesung Fotografie bei Alastair French, in der wir die Basics im Umgang mit einer Spiegelreflex-Kamera kennengelernt haben. Auch die Gedanken, die sich ein Fotograf vor dem eigentlichen fotografieren macht – Stichwort: Rules of Composition – waren Thema. >> Weiterlesen

Was macht der ON-Student in der Praxisphase?

am 05. September 2014 in Aktuelles, ON-Life von und
Bisher unkommentiert »

In verschiedenen Blogeinträgen konntet ihr bisher lesen, was wir Onlinemedien-Studenten alles in der Theoriephase machen: Welche Projekte wir durchführen, welche Vorlesungen wir besuchen und welche Aufgaben wir bearbeiten. Aber was machen wir eigentlich, wenn wir nicht in Mosbach an der DH, sondern in unseren Unternehmen sind?

Um Antworten darauf zu erhalten, haben wir in unserem Kurs ON13 eine Umfrage über unsere Praxisphase im ersten Studienjahr durchgeführt, an der etwa 13 Personen, also die Hälfte unseres Kurses, teilnahm. Herausgekommen sind auf jeden Fall ein paar interessante Ergebnisse.

>> Weiterlesen