Logo: scale-a-vector - Klick zur Homepage
    Home        Sitemap 
    E-Mail Symbol Kontakt 
    to English page English 
    Definition 
    SVG-Dateien 
    Tutorials 
    Software 
    Links 
    Literatur + Presse 
    News + Termine 
    Mobiles SVG 
    Raster zu Vektor 
    Vergleich HTML/SVG 
    Umfrage 
 
Scalable Vector Graphics SVG
 
 
  Rastergrafiken (Teil 1)
 
    Ich berichte nun von meinen Versuchen, Rastergrafiken in SVG-Dateien einzubinden bzw.
    in SVG-Code umzuwandeln.
    Anmerkung: Es ist eigentlich nicht in erster Linie Sinn und Zweck von SVG, Rastergrafiken in
    dieses Format zu konvertieren. Es ist nur eine Option.
 
    Test: KVEC 2.75 | fds for SVGs | CR2V | Illustrator 10
 
Testbericht Teil 2: Vector Eye »»   


 
Grafiken 
 



 
einbinden
 

    Dieses JPG namens "sky.jpg" wurde per xlink in eine SVG-Datei eingebunden:
     
    BeispielbildCode für das Beispielbild
     
    Mit einem PNG würde es ebenso klappen.
 
     
 
 
Grafiken 
 



 
konvertieren
 

    Rastergrafiken (JPGs, BMPs, GIFs...) in SVG-Code umwandeln
     

    Mit den leistungsfähigen und kostenpflichtigen Programmen Adobe Illustrator 10 und Corel Draw 10 können Sie Vektorgrafiken zeichnen und dann in das SVG-Format exportieren.
    Ich wollte jedoch ausprobieren, welche Ergebnisse eine Konvertierung von Fotos (also Rasterdateien bzw. Bitmaps) in das SVG-Format bringt.
    Dazu habe ich zunächst drei der zur Zeit erhältlichen kostenlosen bzw. preisgünstigen Tools ausprobiert (KVEC, fds for SVG, CR2V).
    Später habe auch den nicht ganz billigen Illustrator 10 getestet.
     
     
     gzip (kostenlos, alle Systeme)
     
    Zunächst vorweg: Sie können SVG-Dateien erheblich komprimieren, und zwar entweder mit gzip oder mit dem Adobe Viewer 3. Die Dateien haben dann die Endung .svgz und können vom Viewer so ausgelesen werden. Welche Einsparmöglichkeiten sich dadurch ergeben, werden Sie in den Beispielen unten sehen können.
     
     
     KVEC 2.75 (Shareware, 25 US$, alle Betriebssysteme)
     
    Wenn es Sie nicht stört, in einem Kommandozeilenfenster (wie z.B. der MS-DOS Eingabeaufforderung) rummachen zu müssen, können Sie mit KVEC etliche Rasterformate (BMP, GIF, JPG, TIFF,...) in diverse Vektorformate - darunter eben auch SVG - exportieren.
    Ich habe es einmal mit einem GIF und einem JPG ausprobiert:

     
     
    ein Beispiel im GIF-Format
     
     
    8 KB als .gif
    Screenshot vom Beispiel im SVG-Format
     
     
    171 KB als .svg
     26 KB als .svgz
     
     
    Dieses Bild ist natürlich nur ein Screenshot vom gezippten SVG


     
    Wie Sie sehen ist das Ergebnis nicht ganz so toll. Außerdem ist die Dateigröße ein Problem (zumindest für eine Nutzung im Internet). Das Ausgangsbild hat eine Größe von 8 KB. Das durch KVEC erzeugte SVG jedoch 171 KB. Durch Komprimierung mit gzip konnte die Größe jedoch auf 26 KB reduziert werden.
     
    Ähnliches gilt für das folgende Beispiel:
     
    Vorlage Papagei JPG - Copyright © Petra Kukofka
     
     
     
    16 KB als .jpg
     
    bzw. 67 KB ohne Komprimierung
    Screenshot der SVG-Konvertierung mit KVEC
     
     
     
    541 KB als .svg
     78 KB als .svgz

     
    Für KVEC gibt es am Ende des nächsten Programmtests ein weiteres Beispiel.
     
     
     fds for SVG 0.1 (Windows, kostenlos)
     
    Dieses kleine Tool (gezippt 21 KB!!) wandelt tatsächlich Bitmaps in SVGs um. Allerdings mit einigen ;-) Einschränkungen, auf die auch auf der Herstellerseite hingewiesen wird.
     
    1. Es funktioniert nur mit 8-bit Windows-Bitmaps.
    2. Das Ausgangsbild muß kleiner als 600x600 sein.
    3. Bilder mit sehr vielen Farben erfahren bei der Konvertierung eine interessante aber unerwünschte Veränderung.
     
    Dennoch habe ich mir gleich ein Bild ausgesucht, das sich überhaupt nicht eignet:

     

     
    21 KB:
    Dieses furchtbar kitschige Bild hatte ich mal gemalt, als ich viele Aquarellfarben geschenkt bekam und herausfinden wollte, wie es sich damit so malt (wie man sieht, war es ein guter Entschluß, die Finger von der nicht-digitalen Produktion zu lassen).
    Nun, das Original ist sehr groß, das Papier stark gewellt und Farben und Details sind zahlreich.
    Zu zahlreich.
     
    14 KB:
    Also habe ich den Scan extrem verkleinert und in Photoshop u.a. den Filter "Farbpapiercollage" angewendet, um Details und die Anzahl der Farben zu minimieren.
    Von dem Resultat habe ich einen 8-bit BMP-Screenshot gemacht, der eine Größe von 33 KB hatte.
    Diesen habe ich dann fds for SVG zur Konvertierung übergeben. Das Ergebnis ist ein 81 KB großes SVG, welches ich mit gzip noch auf 26 KB reduzieren konnte.
     
     
    26 KB:
    Die Konvertierung zeigte die oben erwähnten unerwünschten Veränderungen, obwohl ich die Vorlage wie beschrieben "vereinfacht" hatte.
     
     
    Das Bild links ist natürlich auch nur ein Screenshot (10 KB) des Ergebnisses. Wenn Sie es als SVG betrachten wollen, klicken Sie auf das Bild.

    Übrigens, als ich mein Bild noch nicht wie beschrieben bearbeitet (sprich: vereinfacht) hatte, bekam ich bei Konvertierung durch fds for SVG nur ein paar bunte Punkte angezeigt, die man auch mit viel Phantasie nicht als einen Blumenstrauß in einer Vase hätte deuten können.
     
    Im Gegensatz dazu brachte KVEC (s.o.) aus der Vorlage für den fds-Test ein weitaus akzeptableres Ergebnis hervor. Und in diesem Fall mußte ich die Vorlage auch nicht "vereinfachen":
     
    Ausgangsbild  
     
    21 KB als .gif
    Screenshot der SVG-Konvertierung mit KVEC
     
     
    239 KB als .svg
     38 KB als .svgz

     
     
     CR2V Celinea Raster to Vector converter (kostenlos, Windows)
     
    Am besten gefällt mir CR2V. Auch hier muß man die Konvertierungsbefehle in der Kommandozeile eingeben. Hier das Ergebnis mit denselben Vorlagen:
     
    Vorlage im GIF-Format - © Petra Kukofka
     
     
    8 KB als .gif
    Screenshot der SVG-Konvertierung mit CR2V
     
     
    12 KB als .svg
     4 KB als .svgz

     
    Vorlage Papagei JPG - Copyright © Petra Kukofka
     
     
     
    16 KB als .jpg
     
    bzw. 67 KB ohne Komprimierung
    Screenshot der SVG-Konvertierung mit CR2V
     
     
     
    54 KB als .svg
    17 KB als .svgz

     
    Ausgangsbild  
     
    21 KB als .gif
    Screenshot der SVG-Konvertierung mit CR2V
     
     
    34 KB als .svg
    10 KB als .svgz

     
    CR2V erzeugt bei Konvertierung viel kleinere Dateien als die davor getesteten Programme, aber der neue Charakter der Bilder mag vielleicht nicht gewünscht sein. Ich finde die Ergebnisse jedoch ganz toll, vor allem der Papagei gefällt mir in der neuen Fassung viel besser :-)
     
    Bei den beiden Programmen KVEC und CR2V habe ich bei allen Vorlagen den schnellsten Weg gewählt, also keine eigenen Parameter für die Konvertierung definiert, die Vorlagen nicht bearbeitet/vereinfacht und auch das Endergebnis nicht verändert (man könnte ja noch kleine Schönheitsfehler z.B. mit WebDraw korrigieren).
    Mit ein wenig mehr Aufwand könnte man also noch kleinere Dateigrößen und noch bessere Ergebnisse erzielen. Hier sahen Sie aber die Ergebnisse der jeweils geringsten Arbeitszeit.

    Meldung April 2003: Leider ist CR2V nicht mehr erhältlich :-(

    Es gibt jetzt nur noch den kostenpflichtigen Nachfolger "Vector Eye",
    Testbericht auf der nächsten Seite »»».

     
     
    Fazit bisher (für KVEC, fds for SVG, CR2V):
     
    Wenn Sie es nicht in Kauf nehmen wollen, daß Ihre Bilder solche Veränderungen erfahren, wie das bei den hier gezeigten Beispielen der Fall ist, empfehle ich, die Bilder nicht zu konvertieren, sondern, wie ganz oben gezeigt, per xlink in die SVG-Datei einzubinden.
    Wenn Sie aber die Veränderung bei einzelnen Beispielen mögen, ist von den hier getesteten Programmen CR2V für eine Konvertierung empfohlen, da dieses Programm die kleinsten Dateigrößen hervorbringt. Außerdem mag ich den neuen Charakter der Bilder recht gerne, aber das ist halt Geschmackssache und kommt auch immer auf die Vorlage an.
     
     
     Illustrator 10: (ca. 500 Euro, Windows und Mac)
     
    Monate später: Inzwischen besitze ich nun endlich Illustrator 10 und habe den Papagei, also genau dieselbe Vorlage, darin geöffnet und dann als .svgz gesichert. Das Ergebnis ist eine 18 KB große Datei, die exakt so aussieht wie die Vorlage (siehe oben, linke Spalte). Das ist ja schon mal sehr schön :-)
     
    Hat nur einen Nachteil (den man aber, je nach Verwendungszweck, evtl. in Kauf nehmen kann): Wenn man in das Ergebnis-Bild hineinzoomt, wird es immer unschärfer (im Gegensatz zum CR2V- oder KVEC-Papagei). Es wird aber bei weitem nicht so unansehnlich, nämlich pixelig, wie z.B. ein .jpg, in das man hineinzoomt.
     
    Eine mit Illustrator 10 ins SVG-Format kon-
    vertierte ehemalige Rastergrafik, gezoomt:
    Gezoomtes SVG
    Vergrößertes JPG: Pixeliges, vergroessertes JPG

    Das obere Resultat ist doch weitaus akzeptabler.
    Wenn Ihr Gesamtdokument jedoch eh gar nicht darauf ausgelegt ist, daß die Leute hineinzoomen, dann empfehle ich Illustrator 10 für eine Konvertierung von Rastergrafik zu SVG.
     
    Wichtig:
    Um eine ebenso kleine Datei (wie in diesem Beispiel) mit Illustrator 10 zu erzeugen, müssen Sie Folgendes beim Konvertieren beachten:
    - öffnen Sie das zu konvertierende Bild, z.B. ein JPG, mit Illustrator 10
    - gehen Sie auf "Datei - Sichern Unter" und wählen Sie:
      "SVG komprimiert (*.svgz)", dann auf "Speichern" klicken
    - es erscheint ein Optionen-Fenster. Deaktivieren Sie dort
      "Illustrator-Bearbeitungsfunktionen beibehalten"
    - klicken Sie dann auf "Erweitert". Wählen Sie dort nur:
      "Für Adobe SVG Viewer optimieren", alle anderen Häkchen darunter rausnehmen
    Auf diese Art und Weise ist aus der 16 KB großen JPG-Vorlage ein 18 KB großes SVG geworden. Wenn Sie diese Schritte nicht berücksichtigen, wird die Ergebnisdatei sehr viel größer.
     
     
    Fazit insgesamt:
     
    Wenn man sich eh Illustrator 10 besorgt hat, weil es ein tolles Vektorgrafik-Programm ist, würde ich bei einem Export einer Rastergrafik in ein SVG dieses Programm vorziehen. Wenn Sie aber das Geld nicht ausgeben wollen, empfehle ich, wie schon gesagt, das kostenlose CR2V.
     
    Zusatz:
    Wenn Sie allerdings vorhaben, Teile der durch Konvertierung erzeugten SVG-Datei zu animieren, ist im Vergleich Illustrator 10 vs. CR2V wiederum letzterer zu empfehlen. So konnte ich z.B. die Pfade, die den Schnabel des Papageis beschreiben, erkennen, isolieren und animieren, wie Sie in der SVG-Oase sehen können.
    Illustrator hingegen vektorisierte das Papageienbild ja nicht wirklich, also ließen sich keine einzelnen Pfade erkennen und isolieren.
    Vielleicht finde ich mal die Zeit, dieses im Detail zu erläutern und aufzuzeigen, wie man einzelne Pfade in einem SVG-Bild animieren kann.
     
     
    Achtung!
     
    Seit Januar 2003 gibt es einen Nachfolger für CR2V. Auf der nächsten Seite
                                                                            mein Testbericht Teil 2: Vector Eye »»

     
 
  zurück nach oben    
Letzte Ergänzung/Änderung am 6. April 2003
 
© 2001-2004 Petra Kukofka

eMail: kukofka@scale-a-vector.de