✔ Scalable Vector Graphics (SVG)

S

Sarah03

Grünschnabel
Hallo zusammen,

kann mir jemand bei dem Thema SVG mal auf die Sprünge helfen.

So wie ich es verstanden habe ist SVG vektorbasiert und irgendwie hängt noch XML mit drin oder?

Wie kann man so eine Datei erstellen und was ist der Anwendungsbereich?

Über eine Hilfestellung würde ich mich sehr freuen!

Grüße Sarah
 
Hi Sarah,

bei Pixelgrafikformaten (jpg, png, gif, ...) wird einfach für z. B. 400x640 px für jedes einzeln Pixel seine Farbe gespeichert.
das muss ein Programm dann nur noch auslesen und anzeigen. Im Gegenzug braucht man für hohe Auflösungen große Dateien. Außerdem entsteht beim Hochskalieren (und oft auch beim Runterskalieren) keine schöne Anzeige (verpixelt).

Die Lösung:
In der Datei wird nur (relativ zur Anzeigegröße) gespeichert, was zu sehen sein soll (z. B. Kreis in orange, darüber Schrift in grün, ...). Das geschieht in XML-Form. SVG ist also für Grafik, was HTML für Text ist.
Nachteil:
Das Anzeigeprogramm muss wesentlich mehr leisten. (Manche Browser haben da Probleme; bei großen Grafiken dauert es etwas). Dafür kann es das Bild in beliebiger Größe gestochen scharf rendern. Die SVG-Datei (eine Textdatei) bleibt dabei stets sehr klein!

SVG macht aber auch sinn wenn du letztendlich doch Pixelgrafiken willst, denn so musst du nur ein Bild erstellen und exportierst es einfach in den gewünschten Größen.

Zum erstellen von Vektporgrafiken steht gratis und für alle Betriebssysteme Inkscape zur Verfügung.

Gruß javaDeveloper2011
 
Danke für deine Antwort!

SVG sind dann eigentlich vergleichbar mit AI.-Datei oder?
Kann SVGs auch mit Adobe Programmen erstellen?

Wie sieht es in der Praxis aus? Mir sind noch nie SVG untergekommen oder habe ich sie nur nicht bemerkt? Wenn die SVGs so sehr an der Leistung zerren, würdest du sie dann für eine Webseite einstellen?
 
Sarah03 hat gesagt.:
SVG sind dann eigentlich vergleichbar mit AI.-Datei oder?
Kann SVGs auch mit Adobe Programmen erstellen?
Zum Vergrößern anklicken....

Ja. Ja.

Sarah03 hat gesagt.:
Wie sieht es in der Praxis aus? Mir sind noch nie SVG untergekommen oder habe ich sie nur nicht bemerkt?
Zum Vergrößern anklicken....

Google Maps.

Sarah03 hat gesagt.:
Wenn die SVGs so sehr an der Leistung zerren, würdest du sie dann für eine Webseite einstellen?
Zum Vergrößern anklicken....

Kommt drauf an wofür.
http://raphaeljs.com/
http://d3js.org/
http://mrdoob.github.com/three.js/
 
Hi Sarah,

ja du kannst in Adobe Illustrator erstellte Grafiken als SVG-file exportieren.
(Beim normalen Speichern einfach statt "Adobe Illustrator(*.AI)" "SVG(*.SVG)" auswählen.
Leider kommen SVGs in der Praxis immer noch selten vor.
Ich selbst arbeite mit Vektorgrafik meist um mich nicht von Anfang an auf die Größe festlegen zu müssen und auch ansonsten immer jedes Objekt löschen, verschieben und verändern zu können.
Am Ende exportiere ich dann aber doch so gut wie immer als Bitmap (PNG).
Wenn du dich mal näher mit SVG und all seinen Möglichkeiten sowie dem Erstellen solcher Dateien im einfachen Text-Editor beschäftigen möchtest, würde ich die http://www.selfsvg.info/?toc ermfehlen.

javaDeveloper2011
 
Die Wikipedia setzt auch auf SVG. Allerdings werden für die Anzeige in den Artikeln PNG-Dateien in der passenden Größe vorgerendert, da das On-The-Fly-Rendern, wie von javaDeveloper2011 angesprochen, etwas zu lange dauern kann. Wenn du aber z. B. ein Firmenlogo oder Wappen in der Wikipedia anklickst, kannst du auf der Info-Seite die SVG-Datei runterladen. Vergleich auch mal die Dateigrößen von SVG und PNG!

Als Editor kann ich auch InkScape empfehlen. Ist zwar ne starke Umgewöhnung von Adobe-Programmen, dafür aber kostenlos zu haben und wenn man sich daran gewöhnt hat auch gut zu bedienen.

Viele Grüße,
Frezl
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück