kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

SVG-Grafiken erstellen, exportieren und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken im Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit CSS oder JavaScript animieren oder verändern.

In diesem Artikel fassen wir zusammen, was ihr beim Erstellen von SVGs beachten solltet.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

SVG-Grafiken erstellen

Da das SVG-Format ein Vektor-Format ist, verwenden wir i.d.R. Adobe Illustrator zum Erstellen von SVG-Grafiken. Mit SVG können viele Effekte umgesetzt werden die mit Illustrator möglich sind, jedoch nicht alle. Bei komplexen Verläufen und Filtern solltet ihr mit abweichender SVG-Darstellung im Browser rechnen. Wichtig ist auch, dass ihr die Pfade sauber zeichnet. Selbst minimale Überlappungen können im Browser später zu sichtbaren Farbsäumen führen. Dieses Verhalten ist insbesondere bei skalierten Grafiken zu beobachten.

In Illustrator gezeichnete Vektor-Grafik mit übergroßer Zeichenfläche
In Illustrator gezeichnete Vektor-Grafik mit übergroßer Zeichenfläche

Das Pixelraster beachten

Auch wenn es sich bei SVGs um Vektorgrafiken handelt, solltet ihr das Pixelraster beachten. Wenn horizontale oder vertikale Linien auf halben Pixeln gezeichnet werden, führt das schnell zu unscharfen Kanten, da der Browser semitransparente Pixel erzeugt um die halben Pixel zu simulieren. Dieses Verhalten könnt ihr euch in Illustrator simulieren lassen, indem ihr die Pixelvorschau über »Ansicht > Pixelvorschau« einblendet.

Die Kanten des Hamburger-Icons wurden in der rechten Abbildung am Raster ausgerichtet
Die Kanten des Hamburger-Icons wurden in der rechten Abbildung am Raster ausgerichtet

Pixelgenaue Grafiken zeichnen

Seit Adobe Illustrator CC 2016 gibt es die Optionen zum Ausrichten an Pixeln. Das Bedienfeld findet ihr standardmäßig oben rechts in der Steuerungsleiste.

an-pixelraster-ausrichten-80
Ausrichtungsoptionen in der Steuerungsleiste von Illustrator

Hier könnt ihr einstellen, dass Pfade direkt beim Zeichnen, Verschieben und/oder Skalieren an den nächstgelegenen Pixeln ausgerichtet werden.

Zeichnet die SVG-Grafik in Illustrator am besten in der Größe, in der sie später auch auf der Website erscheint. Die Abmessung der Grafik hat zwar keine Auswirkung auf die Dateigröße, diese Vorgehensweise führt aber häufig zu besseren Ergebnissen im Browser. Auch wenn moderne Browser Grafiken gut skalieren können, gibt es immer noch ältere Browser die unscharfe Kanten etc. produzieren.

an pixeln ausrichten menu-80
Neues Menü in Illustrator CC für pixelgenaues Ausrichten

Vektor-Objekte korrigieren

Zum nachträglichen Korrigieren einer Zeichnung mit unscharfen Kanten markiert ihr das entsprechende Objekt und wählt »Objekt > Pixelgenaue Darstellung anwenden«. Sollten dabei unerwünschte Verschiebungen entstehen, könnt ihr die entsprechenden Pfade auch mit dem Direktauswahl-Werkzeug auf ganze Pixel verschieben. Damit die Pfade automatisch auf ganzen Pixeln einrasten setzt ihr einen Haken bei »Ansicht > An Pixeln ausrichten«.

auf-pixel-korrigiert
Auf halben Pixeln endende Objekte (links) sollten korrigiert werden (rechts)

Zeichenflächen richtig einstellen

Es ist nicht nur wichtig, dass die Vektor-Form sauber angelegt wurde, auch die Zeichenflächen (engl. Artboards) sollten angepasst werden.
Über »Objekt > Zeichenflächen > An ausgewähltes Objekt anpassen« verkleinert ihr die Zeichenfläche auf die Größe des markierten Objekts. Das ist u.a. wichtig, da Illustrator ansonsten einen Freiraum um die Grafik herum mit in die Datei speichert. Insbesondere im Responsive Design ist das häufig unerwünscht. Beachtet, dass eure Vektor-Form vor dem Anpassen der Zeichenfläche am Pixelraster ausgerichtet ist. Sonst kann es beim Export passieren, dass ihr ungewollt Teile eurer Zeichnung abschneidet.

Vektor-Grafik mit exakter Zeichenfläche
Vektor-Grafik mit exakter Zeichenfläche

Darüber hinaus solltet ihr darauf achten, nicht versehentlich mehrere Zeichenflächen mit in die SVG zu speichern. Auch wenn nach dem Export nur die gewünschte Zeichenfläche sichtbar ist, kann es durchaus passieren, dass weitere Zeichenflächen existieren. Das merkt ihr u.a. an der üppigen Dateigröße, oder ihr seht die Zeichenflächen wenn ihr die SVG-Datei nach dem Export noch einmal in Illustrator öffnet.

Ankerpunkte reduzieren

Achtet ebenfalls darauf, überflüssige Ankerpunkte zu vermeiden oder die Anzahl der Knoten nachträglich zu reduzieren. Viele Ankerpunkte erhöhen die Komplexität und somit die Dateigröße der SVG. Innerhalb von Illustrator habt ihr in diesem Zusammenhang u.a. die Möglichkeit Pfade zu vereinfachen (Objekt > Pfad > Vereinfachen). Auf das Zeichnen in Illustrator gehe ich hier nicht detailliert ein, dazu haben die Kollegen schon einiges an Fachliteratur veröffentlicht.

Der Vereinfachen-Dialog von Illustrator
Der Vereinfachen-Dialog von Illustrator

SVG-Dateien exportieren

Es gibt in Illustrator verschiedene Herangehensweisen um SVG-Grafiken zu exportieren. Wir beschreiben in diesem Artikel die empfehlenswerten Wege, die zu den besten Ergebnissen führen. Die verschiedenen Optionen, die es beim SVG-Export zu beachten gibt, beschreiben wir anschließend.

SVG-Export über den Dialog »Für Bildschirme exportieren«

Wählt  »Datei > Exportieren > Für Bildschirme exportieren«. Es öffnet sich das entsprechende Bedienfeld. Hier habt ihr zwei Möglichkeiten: Entweder ihr exportiert Zeichenflächen oder Elemente.

fuer-bildschirme-exportieren-80
Illustrator CC 2017 Für Bildschirme exportieren

Exportieren von Zeichenflächen

Wenn ihr eine Zeichenfläche inkl. aller Elemente exportieren wollt, entscheidet euch für diese Option. Wählt anschließend die entsprechenden Zeichenflächen aus, die ihr exportieren möchtet. Je ausgewählter Zeichenfläche wird eine SVG-Datei erstellt. Der Name der Zeichenfläche entspricht dem Namen der exportierten SVG-Datei. Dann legt ihr einen Speicherort fest, wählt SVG als Format aus und geht auf »Zeichenfläche exportieren«.

Die exportierte Datei entspricht den Abmaßen der Zeichenfläche inklusive des angelegten Weißraums.

Exportieren von Elementen

Entscheidet euch für diese Option, wenn ihr Elemente oder Gruppen von Elementen – unabhängig von den Abmaßen und der Positionierung auf ihrer Zeichenfläche – exportieren möchtet. Anstatt eine Zeichenfläche auszuwählen Zieht ihr die gewünschten Elemente via drag-and-drop in das Dialogfeld. Hier entspricht der Name eines Elements dem späteren Namen der exportierten SVG-Datei – je Element wird eine SVG-Datei erstellt.

Copy-and-Paste

Die wohl simpelste Möglichkeit, die Illustrator bietet, um SVG-Code zu erzeugen ist, die entsprechenden Pfade zu markieren und über »Bearbeiten > Kopieren« (Cmd + C/Strg + C) in die Zwischenablage zu kopieren. Von hier aus könnt ihr den SVG-Code direkt in einen Texteditor einfügen und als HTML- oder SVG-Datei abspeichern.
Allerdings gibt es hierfür keine Einstellungen und der Code kann noch stark optimiert werden.

Beachtet das diese Funktion in den Voreinstellungen unter »Dateien verarbeiten und Zwischenablage« aktiviert sein muss. Das ist sie im Normalfall aber standardmäßig.

SVG Export-Einstellungen von Illustrator

Beim SVG-Export stehen euch verschiedene Optionen zur Verfügung. Ihr erreicht die Optionen innerhalb des Dialogfensters »Für Bildschirme exportieren« über das kleine Zahnrad neben »iOS und Android«. Es erscheint folgender Dialog:

svg-sxport
SVG-Optionen zum exportieren von SVGs in Illustrator

Stil

Hiermit ist gemeint, in welchem Stil das CSS in der SVG-Datei untergebracht werden soll. Welche ihr wählt, ist abhängig von euren Anforderungen. Z.B ob die Dateigröße möglichst gering sein muss oder eure Zeichnung animiert werden soll, etc. Es gibt drei Möglichkeiten.

Interne CSS

Illustrator lagert die Stile in einen <style>-Abschnitt aus.

<style type="text/css"> .st0{fill:#FF0000;stroke:#000000;stroke-width:5;stroke-miterlimit:10;} </style> <circle class="st0" cx="412.1" cy="411.7" r="157.2"/>

Inline-Format

Illustrator schreibt Inline-CSS zur Definition von Gestaltungsmerkmalen.

<circle style="fill:#FF0000;stroke:#000000;stroke-width:5;stroke-miterlimit:10;" cx="412.1" cy="411.7" r="157.2"/>

Präsentationsattribute

Illustrator erstellt SVG-Attribute zur Definition von Gestaltungsmerkmalen.

<circle fill="#FF0000" stroke="#000000" stroke-width="5" stroke-miterlimit="10" cx="412.1" cy="411.7" r="157.2"/>

Schrift

Texte sollten als »SVG« exportiert werden, wenn sie später verändert werden sollen. Achtet darauf, dass bei der Verwendung von nicht websicheren Schriften auch der Webfont geladen werden muss.

Durch die Option »In Konturen umwandeln« werden Schriften in Pfade umgerechnet. Diese Option solltet ihr immer wählen, wenn Texte nicht mehr nachträglich editiert werden müssen. Die Dateigröße wird i.d.R. deutlich geringer als bei editierbaren Schriften.

Bilder

Es ist auch möglich Pixelgrafiken (Bitmap-Grafiken) innerhalb von SVG-Dateien zu verwenden. Dabei habt ihr die Wahl ob die Pixelgrafik »verknüpft« oder »eingebettet« werden soll.

Verknüpfte Pixelgrafik in Illustrator
Verknüpfte Pixelgrafik in Illustrator

Beibehalten

Bilder werden je nach ihrem Status in eurer Illustrator-Datei auch in die SVG-Datei mit übernommen. Liegen Bilder als Verknüpfung vor, werden sie verknüpft. Sind Bilder eingebettet, werden sie auch als Base64 in die SVG-Datei eingebettet.

Einbetten

Eingebettete Grafiken werden Bestandteil des Dokuments und Illustrator codiert eingebettete Pixelgrafiken beim Export als Base64.

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 126 126" style="enable-background:new 0 0 126 126;" xml:space="preserve">
<image style="overflow:visible;" width="126" height="126" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMsaHR0cDov
L25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVna

[…]

6qPabtZAYjOmn/e42CGf/mVdBNtA0DQNA0DQNA0DQNA0DQNA0DQNA0DQNA0DQNB//9k=">
</image>
</svg>

Verknüpfen

Verknüpfte Pixelgrafiken werden als separate Datei gespeichert und können später auch außerhalb von Illustrator bearbeitet werden. Die SVG-Datei enthält dabei lediglich den Verweis auf die externe Datei. Insbesondere was die Kompression und die nachträgliche Bearbeitung angeht, empfiehlt es sich die Pixelgrafik außerhalb von Illustrator zu optimieren. Achtet bei verknüpften Grafiken auf den Pfad innerhalb der SVG. Der Pfad kann nachträglich mit einem Code-Editor angepasst werden.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 126 126" style="enable-background:new 0 0 126 126;" xml:space="preserve">
<image style="overflow:visible;" width="126" height="126" xlink:href="../kulturbanause-logo.jpg" >
</image>
</svg>

Objekt-IDs

Die einzelnen Objekte eurer SVG bekommen IDs und Klassen, über die sie angesprochen werden können.

Ebenennamen

IDs und Klassen entsprechen den Namen der Ebenen in Illustrator. Ihr könnt also die Objekte vor dem export selbst benennen.

Minimal

IDs und Klassen werden automatisch und so kurz wie möglich generiert. Illustrator beginnt bei »a« und zählt hoch. Dies ist die beste Option, um die Dateigröße möglichst gering zu halten.

Eindeutig

Illustrator generiert automatisch 36-stellige Zeichenketten, damit die Elemente eindeutig identifizierbar sind.

Dezimalstellen

Die Anzahl der Dezimalstellen hat Auswirkung auf die Genauigkeit der Vektoren. Die Funktion ist also vom Effekt vergleichbar mit dem »Vereinfachen«-Dialog. Ich empfehle die Dezimalstellen auf 1 herabzusetzen. Wenn das Ergebnis sichtbare Defizite aufweisen sollte, erhöht die Anzahl der Dezimalstellen langsam. Auch diese Einstellung hat Auswirkung auf die Dateigröße.

Defekte Grafik aufgrund zu weniger Dezimalstellen. Oben das Ergebnis mit einer Nachkommastelle, in der Mitte das optimale Ergebnis mit zwei Nachkommastellen. Unten sind die Unterschiede rot eingefärbt.
Defekte Grafik aufgrund zu weniger Dezimalstellen. Oben das Ergebnis mit einer Nachkommastelle, in der Mitte das optimale Ergebnis mit zwei Nachkommastellen. Unten sind die Unterschiede rot eingefärbt.

Minifizieren

Setzt ihr einen Haken bei der Option »Minifizieren« entfernt Illustrator unnötige Gruppen und Leerzeichen. Wählt diese Option, um die Datei möglichst klein zu halten.

Responsive (Interaktives) SVG in Illustrator CC (ab 17.1)

In Illustrator CC steht ab Version 17.1 eine SVG-Funktion namens »interaktiv« zur Verfügung. Die englische Original-Formulierung lautet »responsive SVG« und beschreibt besser was hier passiert.
Wenn ihr den Haken aktiviert, entfernt Illustrator die Höhen- und Breitenangaben aus dem SVG-Code bzw. aus der exportierten Grafik. Dadurch passt sich die SVG-Grafik automatisch dem zur Verfügung stehenden Platzbedarf an.

Demo anzeigen

Bis zu Illustrator 17.1 wurde die SVG-Grafik immer in der Größe exportiert, in der sie auch gezeichnet wurde. Wenn ihr eine ältere Illustrator-Version verwendet, könnt ihr die SVG-Datei nach dem Export auch in einem Texteditor öffnen und dort die Attribute height und width aus dem Code entfernen. Das führt zum identischen Ergebnis. Für die Code-Ausgabe gilt natürlich das Gleiche.

Im direkten Vergleich: Normale SVG-Grafik in Originalgröße (links) und interaktives SVG (rechts)
Im direkten Vergleich: Normale SVG-Grafik in Originalgröße (links) und interaktives SVG (rechts)

SVG-Grafiken mit Photoshop erstellen und exportieren

Photoshop ist eigentlich ein pixelbasiertes Bildbearbeitungsprogramm und daher nicht die ideale Grundlage für ein Vektor-Format wie SVG. Dennoch kamen in den neueren PS-Versionen einige Vektor-Funktionen und der sog. Generator hinzu mit dessen Hilfe es möglich ist echte Vektoren zu zeichnen und als SVG zu exportieren. Wir haben den SVG-Export von Photoshop in einem eigenen Artikel detailliert beschrieben.

SVG-Grafiken in die Website einbinden

Es gibt zahlreiche Möglichkeiten wie SVG-Grafiken oder SVG-Code in eine Website integriert werden kann. Die verschiedenen Möglichkeiten haben wir mit ihren jeweiligen Vor- und Nachteilen detailliert in folgendem Beitrag beschrieben: SVG-Grafiken in Websites/HTML-Seiten einbinden

SVG-Bibliotheken und Frameworks

Wie eingangs erwähnt, können SVG-Grafiken recht unkompliziert animiert und interaktiv eingesetzt werden. Dazu existieren diverse Frameworks und JavaScript-Bibliotheken die vorgefertigte Animationen beinhalten oder SVG-Grafiken live rendern. Eine stets aktuelle Liste aller mir bekannten Tools zu diesem Thema findet ihr hier: Tools zum Thema SVG – Best Web Design Tools

Links & Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

34 Kommentare

  1. Stefan

    Verfasst am 18. Februar 2014 um 16:42 Uhr.

    Danke für diese tolle Zusammenfassung!
    Bezüglich der Browserkompatibilität hätte ich das gleich einmal eine Frage: bei Wikipedia werden SVG-Dateien auch im Internet Explorer 8 angezeigt. Wie machen die das?

    • Jonas Hellwig

      Verfasst am 19. Februar 2014 um 22:44 Uhr.

      Soweit ich das erkennen kann, verlinkt Wikipedia nur die SVG-Datei. Die sichtbare Grafik ist in Wirklichkeit eine auf Basis der SVG automatisch umgerechnete PNG-Version. Wenn ich in irgendeinem Browser (auch im IE8) den Dateipfad zur Grafik untersuche finde ich Pfade nach folgendem Muster (siehe Dateiendung): http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ZDF.svg/800px-ZDF.svg.png

      Ich denke da arbeitet im Hintergrund ein System das vergleichbar ist mit SVG Magic.

      • Stefan

        Verfasst am 20. Februar 2014 um 11:23 Uhr.

        Ach so ist das. Recht herzlichen Dank für deine Antwort und deine Bemühungen!

  2. Sandra

    Verfasst am 20. Mai 2014 um 15:48 Uhr.

    Hallihallo,

    wir sind dabei einen neuen Webservice zu entwicklen und nachdem die PNG-Grafiken auf dem iPad sehr unschön aussahen, haben wir uns dafür entschieden auf SVG-Grafiken umzusteigen.

    Ich habe die SVG-Grafiken im Illustrator CS6 in Originalgröße für die Desktop-Anwendung erstellt. Auf dem iPad sehen sie super aus, nur auf dem Desktop bin ich damit nicht richtig zufrieden. Hier wirken sie etwas matschig, obwohl ich die Linien exakt am Raster ausgerichtet, runde Pixelwerte verwendet und beim Speichern die Dezimalstellen auf 1 gestellt habe.

    Auch beim größerskalieren der Ansicht im Browser sehen sie mal gut aus, mal unscharf. Ist das normal? Ich dachte, da es sich um Vektoren handelt sollten sie immer gut aussehen. Was für eine Möglichkeit habe ich das ganze noch zu optimieren so dass sie mit 100% auch auf dem Desktop ein passabeles Ergebnis liefen?

    Viele Grüße
    Sandra

    • Jonas Hellwig

      Verfasst am 21. Mai 2014 um 8:51 Uhr.

      Hallo Sandra,

      das Problem mit unscharfen Kanten besteht bei allen Vektoren, also beispielsweise auch bei Webfont-Icons. Je nach Skalierungsgröße und je nach Browser liegt die Kante auf einem halben Pixel und wird dann unscharf gerendert. Das ist in der Tat unschön. Hier ist die Empfehlung das Icon in einer Größe X (z.B. 16 Pixel) anzulegen, und anschließen immer nur in einer vielfachen Größe von X auf der Website anzuzeigen (z.B. in 32 oder 64 Pixeln). Dadurch vermeidest du unscharfe Kanten.

      In Bezug auf Webfonts erklärt dieser Artikel die Problematik sehr gut: Font Smoothing

  3. Kathy

    Verfasst am 4. Juni 2014 um 16:32 Uhr.

    Hallo!
    Vielen Dank für den tollen Beitrag! Gibt es auch schon eine Erklärung wie interaktive SVGs funktionieren? Ganz speziell würde ich gerne wissen wie man bewegte Linien, die sich zu einem Logo zusammenfügen (wie beim Zeichnen)erstellt.

    Viele Grüße
    Kathy

    • Jonas Hellwig

      Verfasst am 4. Juni 2014 um 20:15 Uhr.

      Hallo Kathy, im Moment habe ich keinen Beitrag zum Thema »Animierte SVGs« geplant. Vielleicht hilft dir eine der SVG-Animation-Bibliotheken weiter.

      • Kathy

        Verfasst am 5. Juni 2014 um 9:26 Uhr.

        Okay danke!

  4. Jan

    Verfasst am 11. Juli 2014 um 11:08 Uhr.

    Komisch: In der Illustrator Version CC 2014 wird die Einstellung „Interaktiv“ bei mir einfach ignoriert. Egal ob die Checkbox mit Haken versehen ist oder nicht, bekomme ich eine Height und Width Angabe mitgeliefert. Löschen ich diese Angaben im Code, sehe ich das SVG auf der Website nicht = Das SVG passt sich nicht dem Container an.

    Mache ich etwas falsch? Hat jemand ähnliche Erfahrungen?

  5. Jan

    Verfasst am 11. Juli 2014 um 11:18 Uhr.

    Ich noch einmal: Ich habe es nun interaktiv hinbekommen. Obwohl im Quellcode immer noch rect id=“SVGID_1_“ width=“362.5″ height=“130.1″ steht … Aber das scheint wohl nicht weiter schlimm zu sein :)

  6. Maik

    Verfasst am 23. Juli 2014 um 15:05 Uhr.

    Bild-Assets als .SVG speichern?
    Funktioniert bei mir leider nicht. Weder eine einzelne Ebene, noch eine Ordner mit Elementen (nur Formen)

    Photoshop und Webdesign?
    Adobe tut sich meiner Meinung nach mit Verbesserungen in diesem Bereich sehr schwer. Ich habe dazu längst zu SKETCH gewechselt.
    GRANATE

    Viel Spaß
    Maik

  7. Suse die Beste

    Verfasst am 30. Juli 2014 um 22:27 Uhr.

    Jonas,
    Sie haben mir die Angst vor SVG auf der Website genommen, sensationell,
    vielen Dank und hören Sie auf zu tun, was Sie tun….
    Suse

  8. Steffi

    Verfasst am 19. Februar 2015 um 11:29 Uhr.

    Jonas – danke danke danke! : )

  9. Harald Rautenberg

    Verfasst am 20. März 2015 um 16:07 Uhr.

    Hallo Jonas!
    Ich habe das Problem, dass beim Speichern einer Illustrater-Datei (RGB) als SVG danach die Farben anders aussehen – sehr anders. Eine Option zum Einbetten von Farbprofilen (CS5) ist mir noch nicht begegnet. Gibt es da eine Lösung?

    • Jonas Hellwig

      Verfasst am 20. März 2015 um 16:43 Uhr.

      Von einem Problem dieser Art habe ich bisher noch nicht gehört. Öffnet die SVG mal im Code-Editor und schau nach ob der dort angegebene Farbcode korrekt ist oder ob er sich beim speichern verändert. Vielleicht hilft dir das bei der Suche nach dem Fehler weiter.

  10. Osiris

    Verfasst am 4. Mai 2015 um 16:46 Uhr.

    Hallo,
    ich habe folgendes Problem: ich optimiere die Grafik im Illustrator und schneide die Zeichenfläche auf die Größe der Grafik zu unter Berücksichtigung des Pixelrasters. Wenn ich die Grafik dann schließe und wieder öffne, hat sich die Zeichenfläche verschoben. Was mache ich denn falsch? Trotz der empfohlenen Optimierungen werden die Grafiken im Browser auch nicht annähernd scharf dargestellt…
    Danke und Grüße!

  11. Jan

    Verfasst am 5. Mai 2015 um 10:38 Uhr.

    @Osiris
    Genau dieses Problem mit der verschobenen Zeichenfläche habe ich auch. Echt ein wenig nervig. Ich habe mich aber noch nicht weiter damit beschäftigt, da meine SVGs wenigstens korrekt im Browser dargestellt werden.

  12. Tamara

    Verfasst am 19. August 2015 um 18:06 Uhr.

    Hi Zusammen

    Ich habe ein Problem. Und zwar muss ich ein Logo aufbereiten fürs Web. Wenn ich das eps nun als svg abspeicher sind meine Rundungen total verpixelt, auch die Verläufe zeigt es mir unsauber an.

    Ich habe den Vektor auf das Pixelraster gesetzt. Auch die Beta-Version SVG Now habe ich ausprobiert

    Was kann ich noch tun?

    Lg
    Tamara

  13. Nils

    Verfasst am 9. September 2015 um 12:08 Uhr.

    Hallo,
    ich benutze WordPress und die Einbettung mit klappt im Editor nicht. Als Bild klappt es, aber da ich viele svgs habe und diese auch relativ groß sind, würde ich sie gerne inline einbinden, da es dann keine zusätzlichen requests gibt. Kannst Du mir sagen, wie man dazu vorgehen muss? Ich habe das noch nicht so ganz verstanden.

    • Jonas Hellwig

      Verfasst am 10. September 2015 um 9:20 Uhr.

      Hallo Nils, du versuchst wahrscheinlich den SVG-Code direkt in den Editor zu kopieren. Wenn du die Textansicht dafür benutzt klappt es – aber du darfst dann nicht mehr zurück in die visuelle Ansicht wechseln. Wenn es auch bei reiner Verwendung der Textansicht nicht funktioniert, schreibe den SVG-Code komplett in eine Zeile, also ohne Umbrüche etc. Das hat bei meinem Test gerade einwandfrei funktioniert.
      In einem Code-Editor wie Sublime kannst du übrigens »Edit > Lines > Join Lines« wählen. Dann fasst Sublime alles in einer Zeile zusammen. Ich hoffe das hilft dir weiter!

  14. Franz

    Verfasst am 22. Dezember 2015 um 10:25 Uhr.

    HI,
    super Artikel! Wenn sich noch jemand intensiever mit dem Thema beschäftigen möchte kann er mal hier vorbei schauen: http://www.data2type.de/xml-xslt-xslfo/svg/

  15. Jérôme Meier

    Verfasst am 24. Juni 2016 um 10:34 Uhr.

    Hallo Jonas

    Danke für deinen Beitrag, der hat mir grad recht schön geholfen beim Exportieren eines SVG’s aus Illustrator. Hierzu gäbe es noch ein Update: Illustrator bietet nun via Datei -> Exportieren -> Format SVG einen vereinfachten SVG-Export an, quasi bereits für’s Web optimiert.

    Für IE8 und ältere Browser stelle ich kein zusätzliches PNG bereit. Wie sieht es aber für Twitter, Facebook und andere Dienste aus die die Website crawlen? Können die SVG lesen?

    Liebe Grüsse
    Jérôme

  16. Alex

    Verfasst am 17. August 2016 um 9:00 Uhr.

    Hallo,

    super erklärt! Bei meinem Mac klappt das auch, aber wo muss ich die jason einfügen bei einem Win-System?

    Grüße
    Alex

    • Jonas Hellwig

      Verfasst am 23. August 2016 um 13:41 Uhr.

      Hallo Alex, ich kann dir leider nicht sagen wo die Datei bei Windows hingehört. Aber in der aktuellen Version von Photoshop ist der SVG-Export auch längst automatisch aktiviert. Die JSON wird nur für bestimmte Zwischenversionen (s.o.) benötigt.

  17. Tomas

    Verfasst am 30. August 2016 um 15:14 Uhr.

    Danke für den tollen Beitrag und gleich ne Frage.
    Bei folgender grafik -> http://www.directupload.net/file/d/4463/9bddx3o5_jpg.htm <- würde ich gerne jeden punkt beschriften und mit einem link versehen. Normalerweise würde ich das mit einer imagemap lösen, da jedoch eine responsive website damit bestückt werden soll hab ich bedenken das A) die grafik scharf bleibt und B) die imagemap nicht mit-skalieren würde.
    Ist es möglich dies mit einer svg-grafik um-zu-setzen?

    gruß Tomas

    • Jonas Hellwig

      Verfasst am 1. September 2016 um 10:10 Uhr.

      Hallo Tomas, ja das ist möglich. Du kannst in Illustrator die Grafik entsprechend anlegen und dann die SVG-Grafik sogar mit Media Queries versehen um die responsive Anpassung herzustellen.

      • Tomas

        Verfasst am 1. September 2016 um 10:13 Uhr.

        Hallo Jonas,

        danke für die Antwort! Jetzt heisst es Illustrator benutzen lernen :D

        Schönen Tag noch :)

        Gruß Tomas

  18. Olga Scheifele

    Verfasst am 20. September 2016 um 15:32 Uhr.

    Hallo :)

    Ein sehr hilfreicher Beitrag, vielen Dank!

    Ich habe alle Schritte befolgt und habe hinterher bemerkt, dass Illustrator die Pixel gar nicht auf volle Pixel abspeichern kann. Jedes mal wenn ich das Icon auf volle Pixel aufrunde, die Datei nochmals öffne, sind es wieder krumme Werte. Mach ich was falsch? Hast du da einen Rat für mich?
    Nochmals vielen Dank für deine Hilfe! :)

    Olga

  19. Enrico Reinsdorf

    Verfasst am 22. Oktober 2016 um 11:38 Uhr.

    Hallo Jonas,
    ist das nur bei mir so oder sehen alle die Bilder nicht :-( Ich würde gern deinen Artikel weiterempfehlen allerdings ohne Bilder ist er nur halb so gut ;-)

    LG
    Enrico

    • Jonas Hellwig

      Verfasst am 22. Oktober 2016 um 15:04 Uhr.

      Hallo Enrico, ich kann den Fehler nicht rekonstruieren. Bei mir sind alle Bilder da. Allerdings fällt dein Kommentar zeitlich in ein Fenster in dem wir Probleme mit dem Sicherheitszertifikat unserer Seite hatten. Ggf. lag es daran. lg Jonas

  20. Martin K.

    Verfasst am 24. Februar 2017 um 15:13 Uhr.

    Hallo,

    vielen Dank für Euren — nun schon etwas länger bestehenden — Artikel. Ich habe da gleich zwei Fragen zu und hoffe, dass Ihr darüber mehr wisst:

    1. Eigentlich wollte ich gerne ein SVG mit verlinktem Image als background-image nutzen. Wenn ich das SVG direkt im Browser aufrufe, ist alles gut. Sobald ich es über CSS einbinde, wird das verlinkte Bild nicht angezeigt. Das gilt auch dann, wenn ich einen absoluten Pfad angebe (was ich ohnehin nicht gerne tun würde).

    2. Alternativ habe ich mich entschieden, das Bild einzubetten. Dann wird aber mit einem Schlag das SVG von 7KB zu 190KB groß, obwohl das eingebettete PNG „nur“ 130KB groß ist … Gibt es Möglichkeiten, das eingebettete Bild zu komprimieren?

    Danke und Grüße
    Martin

  21. Janine Salier

    Verfasst am 23. Oktober 2017 um 9:41 Uhr.

    Hallo Jonas,
    danke für den Beitrag! Mir ist nun einiges klarer über das svg – wurde es in meiner Ausbildung doch immer etwas unter den Tisch gekehrt und als nicht so relevantes Vektor Dateiformat abgetan. Denn warum svg nutzen, wenn wir eps, ai, pdf und Co zur Verfügung haben? :-D
    Ich komme aus der Druckbranche, deswegen ist das svg etwas weiter entfernt bei meiner täglichen Arbeit. Arbeite ich mit Vektoren, verwende ich tatsächlich nur noch ai, pdf und vielleicht einmal ganz selten eps.
    Keep on rocking!

    Cheerio und einen schönen Montag
    Janine vom Team SalierDruck :-)

  22. Alexander Say

    Verfasst am 10. November 2017 um 2:36 Uhr.

    Ich habe immer das Problem, dass unter Ai, die SVG nicht exportiert werden kann. Nachdem ich auf Zeichenfläche exportieren geklickt habe, öffnet Ai zwar den Ordern, speichert mir die SVG aber nicht ab. An was könnte das liegen?

  23. Karl

    Verfasst am 16. November 2017 um 16:55 Uhr.

    Ich habe das selbe Problem wie „Alexander Say“. Wenn ich eine Vektordatei in Illustrator mit „Speichern unter“ als SVG abspeichern möchte, dann klappt das. Wenn ich jedoch den Weg via „exportieren“ gehe, dann wird *keine* Datei abgespeichert. Woran kann das liegen? Vor dem letzten Illustrator (cc) Update lief alles bestens.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.