Seitenhierarchie
Zum Ende der Metadaten springen
Zum Anfang der Metadaten

Zusammenfassung

In nachfolgendem Artikel wird beschrieben, was beim Anpassen einer gelieferte SVG-Datei beachtet werden muss, um die Grafik in der Originalgröße wieder ausgeben zu können.

Einleitung

Oftmals müssen gelieferte SVG-Dateien farblich angepasst werden, um in einem Webfrontend zum Einsatz kommen zu können. Das Problem: Hat man bestimmte Optionen falsch gewählt, ist die Ausgabegröße der neuen Datei nicht identisch mit der Originalen.

SVG-Grafik - Was ist das genau?

SVG bedeutet "Scalable Vector Graphics" und ist eine auf XML basierte und vom W3C (World Wide Web Consortium) empfohlene Spezifikation, um zweidimensionale Vektorgrafiken im World Wide Web darzustellen. Dieses Dateiformat findet also ausschließlich Verwendung auf Seiten des Internets.

Die sog. "vektorbasierte Grafiken" im Dateiformat SVG können im Browser dargestellt und modifiziert werden. Eine vektorbasierte Grafik zeichnet sich dadurch aus, dass Farbwerte und Formen nicht über einzelne Pixel definiert sind (wie zum Beispiel bei einer JPG-Datei), sondern über Zahlen mathematisch errechnet und ausgegeben werden. Dadurch haben vektorbasierte Grafiken - wie unser hier beschriebenes SVG - eine sehr kleine Dateigröße. Ein weiterer Vorteil von vektorbasierten Grafiken ist, dass diese sich verlustfrei und ohne Anstieg der Dateigröße beliebig skalieren lassen.  Außerdem können im Webbereich diese Grafiken per CSS oder JavaScript verändert oder animiert werden.

Vektorbasierte Grafik, z.B. SVGPixelbasierte Grafik, z.B. JPG

Der Schriftzug wird durch die blauen Punkte errechnet. Jeder Punkt besitzt eine X- und Y-Koordinate und einen entsprechenden Verkrümmungswert. Da nicht jeder Bildpixel gespeichert werden muss, sondern nur die Informationen der blauen Punkte, ist diese Grafik von der Dateigröße her sehr klein und kann verlustfrei skaliert werden.

Der Schriftzug wird Punkt für Punkt gesetzt. Jeder einzelne, vermeintlich schwarze Bildpixel ist mit seinem entsprechenden Farbwert und seiner Position abgespeichert. Dadurch ist die Dateigröße einer pixelbasierten Grafik meist sehr viel Höher im direkten Vergleich mit dem vektorbasierten Pendant. Diese Grafiken können nicht verlustfrei skaliert werden.

 

Erstellen

Für das Erstellen von SVG-Grafiken verwenden wir in der Regel die Software "Illustrator" aus dem Hause Adobe. Viele Filter und Effekte, die in Illustrator möglich sind, können auch im Browser richtig dargestellt werden. Jedoch kann es bei komplexen Verläufen und rechenintensiven Filtern mit Abweichungen in der Darstellung kommen. 

Um ein einwandfreies Darstellungs-Ergebnis im Browser erhalten zu können, ist eine saubere Grafik zu erstellen. Pfade, die nicht gebraucht werden, müssen entfernt oder gegebenfalls reduziert, Formen zusammengefügt werden. Andernfalls kommt es gerade bei skalierten Grafiken immer wieder zu Ungenauigkeiten.

Rohe PfadeBereinigte Pfade

Dieser Schriftzug stammt noch aus der Erstellungsphase. Im Überlappungsbereich der beiden Buchstaben "p" und "c" kann man sehen, wie sich die Pfade beider Buchstaben schneiden. Ebenso das eingehängte Schildchen im Buchstaben "o". Auch hier kreuzen sich die Pfade des Buchstaben und die Pfade des Schildchens.Dieser Schriftzug ist bereits durch die Reinzeichnung gesäubert worden. Hier bestehen die beiden Buchstaben "p" und "c" nicht mehr aus zwei Pfaden, sondern sind zu einem Pfad zusammengeschmolzen.

Pixelraster

Wie wir unter "SVG-Grafik - Was ist das genau?" bereits beschrieben haben, handelt es sich bei SVG um eine verlustfreie Vektorgrafik. Dennoch gibt es auch hier im Bezug auf das sog. "Pixelraster" einiges zu beachten. Wird eine Vektordatei nicht am Pixelraster ausgerichtet erzeugt, entstehen oftmals bei waagerechten oder senkrechten Linien "halbe Pixel". Der Browser erzeugt dann beim Auslesen dieser Grafik-Werte einen halbtransparenten Pixel, um diesen halben Pixel zu simulieren. Das führt dann schlussendlich zu unscharfen Kanten bei der Darstellung im Browser.

Darum ist es wichtig, auch bei vektorbasierten Dateien mit dem Pixelraster zu arbeiten. In Adobe Ilustrator kann man das oben beschriebene Verhalten des Browsers simmulieren lassen, indem man sich die Pixelvorschau anzeigen lässt.

Ansicht > PixelvorschauAnsicht > Am Raster ausrichten

Die Pixelvorschau wird simmuliert. Die Zeichenfläche wird in Adobe Illustrator mit einem ganz feinen, unauffälligen Pixelraster ausgestattet. Kanten der Grafik werden pixelgenau dargestellt.Ist diese Option aktiviert, kann nun jeder Pfad am Raster ausgerichtet werden. Halbe Pixel sind nicht mehr möglich. Eine so ausgerichtete Grafik wird später im Browser auch scharfkantig dargestellt werden.

Hier sehen Sie die Auswirkung auf eine einfache Grafik für ein alltägliches "Hamburger-Menü":

Nicht an Pixelraster ausgerichtetAn Pixelraster ausgerichtet

Diese Grafik ist beim Erstellen nicht am Pixelraster ausgerichtet worden. Es entstehen rund um den schwarzen Balken halbtransparente Pixel in unterschiedlichen Abstufungen.Diese Grafik ist beim Erstellen am Pixelraster ausgerichtet worden. Die Kanten sind ausnahmslos sauber und werden später im Browser klar und scharf dargestellt werden.

Zeichenfläche konfigurieren

Manchmal ist es nötig, die Zeichenfläche zu konfigurieren. Das kann z.B. beim Erstellen einer links ausgerichteten Icon-Navigation eine große Rolle spielen. 
Sollen Icons in einer Navigation auf einer Linie laufen, so ist eine einheitliche Höhe aller Icon-Grafiken hierfür nötig.

Die Zeichenfläche konfigurieren Sie, indem Sie einen Doppelklick auf das Werkzeug für die Zeichenfläche tätigen (siehe Abb. Werkzeug für die Zeichenfläche). Es öffnet sich ein Menü, in dem Sie nun alle Angaben machen können.

 

Abb. Werkzeug für die Zeichenfläche

Achten Sie auf die Maßeinheit! Mischen Sie in den zusammen gehörenden Dateien nicht mm und px, da es sonst zu unterschiedlichen Ausgabe-Größen kommt.

Pixelgenaues Zeichnen

Seit Adobe Illustrator CC 2016 kann man per Knopfdruck die Option "zum Ausrichten an Pixeln" anwählen. Diesen Knopf finden Sie standardmäßig in der Steuerungsleiste oben rechts.

Ist die Option aktiviert, werden Pfade beim Zeichnen, Verschieben oder Skalieren sofort an den nächst gelegenen Pixeln ausgerichtet.

Auch wenn vektorbasierte Grafiken verlustfrei skaliert werden können, sollten SVG-Grafiken immer in der Größe gezeichnet werden, in der sie später auch auf der Webseite eingebunden werden sollen. 

  1. Die Dateigröße bleibt immer die selbe - egal ob große oder kleine Grafik.
  2. Man gibt dem Browser keine Möglichkeit, selber an der Grafik "herum zu rechnen".

Auch wenn die heute gängigen, modernen Browser sehr gut mit der Skalierung von Grafiken umgehen können, geschieht dies doch durch Technik und mathematische Berechnung. Sobald etwas simuliert oder errechnet wird, bietet sich Freiraum für Ungenauigkeiten. Darum lieber im Vorfeld z.B. bei der Erstellung der Screendesigns Gedanken über die Darstellungsgröße machen und nicht später nachjustieren müssen.

Speichern

In der Software Adobe Illustrator geht man wie folgt vor, um eine SVG-Datei abzuspeichern.

Datei > Exportieren > Exportieren als...

Es öffnet sich der Speicherdialog.

 Im Speicherdialog kann man nun die Auswahl treffen, ob ausschließlich die Zeichenfläche verwendet werden soll oder ALLE Elemente, die in der Datei auch außerhalb der Zeichenfläche positioniert sind.

Haken bei "Interaktiv" unbedingt entfernen, wenn die originale Ausgabegröße beibehalten werden soll.

 

 

 

 

Abspeichern ohne interaktiv

Das Abspeichern der Grafik ohne Haken "interaktiv" ist notwendig, wenn die Datei 1:1 dargestellt werden soll. Unten der direkte Vergleich: Das Original links und die neue Grafik rechts mit angewählter Option "interaktiv". Die neue Grafik passt sich automatisch an den zur Verfügung stehenden Freiraum an und wird daher viel größer dargestellt.

OriginalMit angewählter Option "interaktiv"

Die Grafik wird in der originalen Größe dargestellt, wie in Adobe Illustrator vorgegeben.Die Grafik wird vergrößert dargestellt. Der Browser errechnet die Größe selbständig. Das kann unter Umständen auch zu Fehlern in der Darstellung führen.

Abspeichern in richtiger Maßeinheit

Ein weiterer wichtiger Punkt beim Abspeichern einer SVG-Datei ist die zu verwendende Maßeinheit. In Adobe Illustrator ist nicht immer die verwendete Maßeinheit eingeblendet (Lineale). Um diese zu kontrollieren, prüft man in der originalen Datei, mit welcher Maßeinheit diese erstellt wurde.

Hierfür öffnet man die originale SVG-Datei in einem Texteditor:

In unserem Beispiel wurden in der originalen Datei Pixel verwendet.

Speichert man nun die neue Datei nicht als Pixel sondern z.B. mit der Maßeinheit mm (Millimeter), erhält man beim Öffnen der neuen Grafik eine andere Größe des Icons:

Original in Pixel (px)mit abweichender Maßeinheit Millimeter (mm)

 

Um die in Adobe Illustrator verwendete Maßeinheit zu prüfen, geht man wie folgt vor:

Ansicht > Lineale > Lineale einblenden

Die Lineale werden oben und links von der Arbeitsfläche eingeblendet.

 Rechtsklick mit der Maus auf das obere Lineal öffnet ein Kontextmenü mit der verwendeten Maßeinheit.

Hier kann man nun z.B. von Millimeter auf Pixel umstellen.

FAQ

Hier sind alle Fragen und Antworten aufgelistet, die beim Arbeiten mit SVG-Dateien aufgetreten sind.

 

 Warum wird das SVG nicht in der ursprünglichen Größe dargestellt?

Warum wird das SVG nicht in der ursprünglichen Größe dargestellt?

Prüfen Sie, ob Sie beim Abspeichern der angepassten Grafik folgende Fakten berücksichtigt haben.

  1. Ist die Zeichenfläche nur so groß wie das gewünschte Element und haben Sie im Speicher-Dialog den Haken bei "Zeichenfläche verwenden" aktiviert?
    Lesen Sie den Abschnitt "Speichern".
  2. Ist im Speicher-Dialog den Haken bei "interaktiv" aktiviert? Dann muss dieser unbedingt raus.
    Lesen Sie die Abschnitte "Speichern" und "Abspeichernohneinteraktiv".
  3. Ist die Grafik in der selben Maßeinheit abgespeichert, wie das Original?
    Lesen Sie den Abschnitt "AbspeicherninrichtigerMaßeinheit".
  • Keine Stichwörter
Schreiben Sie einen Kommentar...