SVG - Skalierbare Vektor Grafik

SVG Zeichen Muster

Stern 6a
Stern 5a
Stern 8a
Stern 7a
Home 1a
Home 2a
Menü Векторный рисунок Menü
KreisLogo Animierte KreisLogo.

Was ist das SVG-Format?

Die Abkürzung SVG steht für: „Scalable Vector Graphics.“ Dieses Format hat die folgenden Eigenschaften:

  • SVG Graphics hat die Fähigkeit zu skalieren. Das heißt, Grafiken können beliebig vergrößert und verkleinert werden, ohne ihre Qualität zu verlieren.
  • SVG Graphics ist ein DOM-Objekt-Modell, so kann es sich um eine 3-Wege animieren:
    1. SVG Animation
    2. CSS3 Animation
    3. JavaScript Animation
  • SVG Grafiken unterstützen alle modernen Browser.
  • SVG Grafiken haben eine wesentlich kleinere Dateigröße.

Beim Designen von Logos oder Icons macht es deshalb Sinn, Vektorgrafiken zu verwenden.

Arbeitsproben finden Sie auf dieser Seite.

Was bringt SVG

Dies ist eine großartige Möglichkeit die Logos und Symbole auf der Website für Computer, Smartphones und Tablets anzupassen. Dieses Dateiformat benötigt wenig Speicherplatz, behält aber seine Schärfe und ist perfekt skaliert. SVG-Grafiken können in jedem Browser geöffnet werden. Die Grafiken können auch animiert werden.

SVG Animation

Mein Logo und die sich darin befindliche Uhr sind SVG-Grafiken.
Die Uhr ist eine SVG-Grafik, die mit JavaScript animiert wurde.

Diese Animationsmethode habe ich ausgewählt, da der Internet Explorer SVG-Animationen nicht unterstützt, aber eine allgemeine Browserunterstützung wichtig ist. In diesem Fall ist keine andere Methode passend.

Wie werden SVG-Bilder erstellt?

SVG-Bilder können in Vektor-Programmen wie Illustrator oder Corel Draw erstellt werden.
Diese Softwarepakete sind kostenpflichtig. Es gibt auch kostenlose Programme, wie zum Beispiel Inkscape. Viele der Arbeiten auf dieser Seite wurden mit Inkscape erstellt.

Doch für komplexere Arbeiten sind professionelle Programme zu bevorzugen. Die so gestalteten SVG-Grafiken sind Rohdateien und müssen noch weiter bearbeitet werden. Dies geschieht in einem Texteditor, wie zum Beispiel Notepad++.

Ich arbeite bevorzugt mit diesem Programm, da es schnell, kostenlos und voller Vorteile ist.

Jedes Programm hinterlässt Spuren, die bereinigt werden müssen. Diese Spuren machen im Durchschnitt einen Anteil von rund 30% der Dateigröße aus. Das ist bei SVG nicht nötig. Hier können die Dateien schnell optimiert werden.

Bis hierhin ist etwa die Hälfte der Arbeit getan.

Und dann kommt der spaßige Teil – die Animation!

Mehr dazu im nächsten Abschnitt.