Ausgabe von SVG´s aus Illustrator

JexX · 18.02.2016

Hallo zusammen,

ich bin derzeit damit beschäftigt ein (ziemlich komplexes) Logo in Illustrator nachzubauen.

Ziel ist es, das Logo als *SVG für den Header einer Website zu benutzen.

Leider kann ich das Logo hier nicht hochladen, da mir dafür die Rechte fehlen.

Soweit so gut. Das Logo habe ich im Illustrator nahezu 1:1 nachgebaut.

Jetzt möchte ich dieses erstellte Logo gerne als *SVG exportieren (Natürlich möglichst kleine Datei).

Wenn ich im Illustrator auf „Speichern unter...“ gehe, dann kann ich das Dateiformat *SVG auswählen und es als solches abspeichern.

Durch die Komplexität des Logos ist die Datei jedoch um die 320KB groß. Das bisher verwendete *PNG hat allerdings „nur“ 25KB und wäre somit ja immer noch Nutzerfreundlicher (besonders auf mobilen Geräten).

Wenn ich das gesamte Logo und die Zeichenfläche in Illustrator verkleinere und die Datei wieder als SVG ausgebe, dann sinkt auch die Dateigröße.

Wieso? Ich dachte immer, dass SVG´s unendlich skalierbar sind? Dann müsste doch auch die Dateigröße immer gleich sein?!!

Ich stehe auf dem Schlauch!

Über sonstige Tipps/ oder gut verständliche Artikel zum exportieren von SVG´s würde ich mich ebenfalls sehr freuen!

Viele Grüße, J

ph_o_e_n_ix · 18.02.2016

Eine Ursache für eine größere Datei, trotz kleinerer Abmaße könnte die Skalierung sein...

Angenommen ein Ankerpunkt hat die X/Y-Koordinaten: 10/12

Skalierst du nun nach Gutdünken, muss Illustrator logischerweise die Koordinaten neu berechnen. Da Illustrator intern meines Wissen nach 6 Stellen hinter dem Komma berechnet, entstehen natürlich Werte, wie 8,567325/10,756214 oder 100000.284736/120000.978563 (je nachdem, ob man es vergrößert oder verkleinert)

Das Datenvolumen kann also durch eine auf den ersten Blick einfache Skalierung enorm ansteigen...

Polygon · 18.02.2016

Echt? Das verstehe ich überhaupt nicht und scheint mir auch nicht SVG-konform. Wenn ich die gleiche Grafik einmal in A4 und einmal in A6 ausgebe sind die Versionen in Bytegröße bis auf ein paar Zehntel identisch.
Eine 320KB große SVG enthält entweder Tonnen von Knoten oder vermutlich irgendwelche Raster-Effekte die zu Buche schlagen.

Gruß
P.

Fugel · 18.02.2016

Hast du eventuell noch vergessenes bildmaterial in deiner datei? Vielleich ausgeblendet oder als vorlageebene? Ist mir auch schon mal passiert.

sv_photo · 19.02.2016

Also wie ph_o_e_n_ix erklärt hat, liegt es wohl daran, dass die Werte der Koordinaten mehr "Platz" in Anspruch nehmen. Da Du schon erwähnt hast, dass das Logo sehr komplex ist kann es natürlich sein das sich diese vielen Werte einfach zu einem so großem Gesamtwert aufbauen und die Datei dadurch so groß wird.

Ein einfaches Beispiel:

Eine Arbeitsfläche von 5000px x 5000px, in dieser bedinfdet sich ein Kreis mit einem Druchmesser von 4000px = ein Radius von 2000px
Dateigröße= 344 Byte

Der gleiche Kreis aber auf einer Arbeitsfläche von 500px x 500px in einem
Druchmesser von 400px = ein Radius von 200px
Dateigröße= 335 Byte

Grund dafür ist, dass der kleinere Kreis in den Koordinaten genau 9 Stellen weniger besitzt... Einfach nur weil die Bechreibung der Koordinaten weniger Platz in Anspruch nimmt.

Sollte der Unterschied jedoch enorm sein, solltes Du wirklich prüfen, ob nicht doch irgendwo noch Bildmaterial vorhanden ist. Außerdem solltest Du "Illustrator Bearbeitungsfunktion beibehalten" abschalten... Wenn ich diese beim Export aktiviert lasse steigt die Dateigröße in meinem Beispiel von 344 Byte auf 245.000 Byte

Nutzt Du nun die PNG Datei oder willst Du doch lieber SVG verwenden? Denk bitte daran, dass SVG nicht von allen Browsern unterstützt werden. Ich persönlich nutze einen Fallback auf PNG sollte die SVG Grafik versagen...

Gruß Carsten

JexX · 19.02.2016

Hi,

danke schon mal für alle Antworten, Erklärungen und Tipps!

Ich habe kein ausgeblendetes Bildmaterial mehr in der Datei.

Das mit den Kommastellen könnte natürlich sein. Das Logo hat ziemlich viele Ebenen mit Verläufen und Schattierungen, Kontur, etc. Ich habe allerdings schon bei der Erstellung darauf geachtet, möglichst „Punktgenau“ zu arbeiten um ungerade Positionen zu vermeiden.

Ich habe mit einem Online-Optimierer mal rumgespielt (https://jakearchibald.github.io/svgomg/) mit diesem kann man auch die Nachkommastellen korrigieren, bzw. verringern.

Diese Funktion verringert auch die Dateigröße! Allerdings auch nicht um ein vielfaches ;/.

Das mit dem PNG-Fallback ist eine gute Sache. Das werde ich natürlich mitbeachten! Danke auch dafür!

Viele Grüße, J

Polygon · 19.02.2016

Euch ist schon klar das SVG= XML-Dateien sind also reine Textdateien? Es spielt überhaupt keine Rolle wie groß oder klein die Grafik ist. Wenn ihr euch die mal als Text ansehen würdet, könntet ihr feststellen, dass Koordinaten/Positionen etc also die Vektoren 8-stellig aufgelöst sind und nur in dem das Komma anders ausgewertet wird entsteht keine andere (signifikante) Dateigröße. Klar lassen sich SVGs noch auf verschiedene Arten komprimieren (.svgz), optimieren (leere Definitionen löschen: .svg) oder komprimieren mit Medien (.zip), je nach Verwendungszweck.

Gruß
P.

ph_o_e_n_ix · 19.02.2016

@Polygon

In Illustrator ersteller Kreis mit 1 Nachkommastelle:

Javascript:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="423.1" cy="308.6" r="250"/>
</svg>

Skaliert um 99,789654321% mit 7 Nachkommastellen:

Javascript:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<g>
    <circle fill="#FFFFFF" cx="423.1474609" cy="308.5878906" r="249.4736328"/>
    <circle fill="none" stroke="#000000" stroke-miterlimit="10" cx="423.1474609" cy="308.5878906" r="249.4736328"/>
</g>
</svg>

Polygon · 19.02.2016

Und was will der Dichter mir damit sagen? Dass sich die Dateigrößen um 112Bytes unterscheiden? Ich habe doch schon erwähnt, dass sich SVGs optimieren lassen - aber es hat nichts mit der Größe der Grafik zu tun.

Gruß
P.

annettgrauel · 19.02.2016

Hallo, ich nutze auch nur noch SVG mit Fallback. Schau dir doch bitte mal diesen Compressor an. Mit dem bekommst du die Dateigröße signifikant verkleinert. Ich nutze den für alle Grafiken, die ich fürs Netz erstelle, auch PNG.
https://compressor.io/compress

Viele Grüße
Annett

Polygon · 19.02.2016

Genau das macht Inkscape wenn es optimierte SVGs ausgibt:

und kommt auf die gleiche Reduktion wie dieser Online-Kompressor - nur dass man hier nicht weiß, was er alles wegkürzt.

Gruß
P.

KapitaenNet · 19.02.2016

Hallo jexX,

wenn Du Schatteneffekte verwendest, werden diese als Image in die SVG Grafik eingefügt. Diese Images vergrößern die SVG Datei enorm. Deshalb bin ich dazu übergegangen, solche Schatteneffekte meistens durch Transparenzverläufe darzustellen. Bei Kreisen sieht man den Unterschied nicht und die Datei ist signifikant kleiner. Bei einem Quadrat macht diese Vorgehensweise keinen Sinn. Dort lege ich, wenn es nicht auffällt eine um einige Pixel vergrößerte und transparente graue Fläche darunter.

Ciao Jürgen

ph_o_e_n_ix · 19.02.2016

@Polygon

Dass sich SVG-Dateien optimieren lassen, steht außer Frage (da hat man in Illustrator schon entsprechende Funktionen)...

Mir geht es lediglich darum, dem TE mögliche Ursachen für die erhöhte Dateigröße aufzuführen ... und da kann nun mal eine in Illustrator vorgenommene Skalierung des Objektes (vor allem, wenn es komplex ist) eine mögliche Ursache sein.

Deine Behauptung, dass sich beim internen Skalieren/vergrößern/verkleinern von Objekten lediglich die Kommastelle verschiebt, ist schlichtweg falsch (das mag bei Faktoren, wie 10/100/1000/etc. zutreffen).

Im diesem Fall kann man das vielleicht beim exportieren durch das runden auf X Nachkommastellen teilweise kompensieren, weil keinerlei Referenzmaße eingehalten werden müssen, in anderen Fällen sieht das anders aus.