Inkscape 035 – Inkscape & SVG fürs Web

Können SVG-Dateien für das Web verwendet werden? Die Antwort ist ein klares JA! Leider führt das SVG-Format im Netz aber ein recht unverdientes Schattendasein. Gerade für Games wären frei skalierbare Items eine echte Bereicherung.

Skills: Read only

 

Remember

Wir erinnern uns: Vektorgrafiken sind Grafiken die auf jede beliebige Größe skaliert werden kann, ohne das ein Qualitätsverlust eintritt. Ohne zu verpixeln! Pixeldateien verpixeln beim skalieren (siehe Bild unten).

Links skaliertes SVG - rechts skaliertes JPG

Links SVG – Rechts JPG

Zu den pixelbasierten Grafiken zählen: JPG, GIF, PNG,TIF und viele mehr. Pixelbasierte Grafiken sollten im günstigsten Fall die exakten Maße des Endformat haben.

Bei einer SVG-Datei, also einer Vektorgrafik, gibt es keine Einbußen. SVG bedeutet: Scalable Vektor Graphic. Zu deutsch: Frei skalierbare Vektor Grafik. Und das heißt wiederum, dass egal in welcher Größe eine Vektordatei angezeigt wird, sie ist frei von Pixeln.

Warum das SVG-Format nicht für PHASER-Games verwendet werden kann, hat unterschiedliche Gründe. Um das zu erklären müsste man tief in die Materie der Render-Engines einsteigen. Es ist sehr technisch und relativ kompliziert.

Was aber in jedem Fall geht, ist die Verwendung von SVG-Dateien auf Webseiten. Und das sollte man wann immer es geht auch nutzen.

Zum Schluss noch zwei Beispiele, wo ich SVG-Dateien mit pixelbasierten Bildern vergleiche.

Folgt man diesem Link, es öffnet sich ein neues, zusätzliches Fenster wo man das SVG-Format im Browser betrachten kann.

Folgt man diesem Link, sieht man immer die gleiche Pixel basierte Grafik in verschiedenen Größen. Das Ergebnis ist alles andere als hübsch.

Viel Spaß mit SVG-Grafiken ohne Qualitätsverlust.

 

Das könnte Dich auch interessieren …

Translate »