{"id":5902,"date":"2026-03-09T21:55:43","date_gmt":"2026-03-09T20:55:43","guid":{"rendered":"https:\/\/support.sparkles.io\/kennisbank\/how-to-eine-svg-erstellen\/"},"modified":"2026-05-05T10:16:09","modified_gmt":"2026-05-05T09:16:09","slug":"how-to-eine-svg-erstellen","status":"publish","type":"ht_kb","link":"https:\/\/support.sparkles.io\/de\/kennisbank\/how-to-eine-svg-erstellen\/","title":{"rendered":"How-to: Eine SVG erstellen"},"content":{"rendered":"\n

Eine korrekte SVG ist wichtig, um Probleme im Editor und im Druck-PDF zu vermeiden. In dieser Anleitung liest du, was eine gute SVG erf\u00fcllen muss, wie du diese in Illustrator speicherst und wie du Crop-Probleme l\u00f6sen kannst. <\/p>\n\n

Komponente<\/strong><\/td>Erkl\u00e4rung<\/td><\/tr>
Verwendung von Farbe<\/strong><\/td>Verwende eine Farbe, zum Beispiel Schwarz, wenn du die SVG im Editor umf\u00e4rben oder als Stanzform verwenden m\u00f6chtest.<\/td><\/tr>
Effekte und Transparenz<\/strong><\/td>Verwende keine Transparenz, Schlagschatten oder andere Effekte in einer SVG.<\/td><\/tr>
Farbmodus<\/strong><\/td>Lasse den Farbmodus auf RGB eingestellt.<\/td><\/tr>
Einzelne Elemente<\/strong><\/td>Gruppiere einzelne Elemente, aber erstelle daraus keine zusammengesetzte Form.<\/td><\/tr>
Bereinigen<\/strong><\/td>Entferne alle unn\u00f6tigen Elemente, auch au\u00dferhalb des Zeichenbereichs.<\/td><\/tr>
Bildposition<\/strong><\/td>Stelle die Bildposition beim Speichern auf Einbetten<\/strong> ein.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Anforderungen an eine gute SVG<\/h2>\n\n
    \n
  1. Zeichne die gew\u00fcnschte Form in Illustrator.<\/li>\n\n\n\n
  2. Erstelle die Illustration in einer Farbe, zum Beispiel Schwarz, wenn du sie im Editor umf\u00e4rben oder als Stanzform verwenden m\u00f6chtest.<\/li>\n\n\n\n
  3. Verwende in einer SVG keine Transparenz oder Effekte.<\/li>\n\n\n\n
  4. Lasse den Farbmodus auf RGB eingestellt.<\/li>\n\n\n\n
  5. Gruppiere mehrere einzelne Elemente, aber erstelle daraus keine zusammengesetzte Form.<\/li>\n\n\n\n
  6. \u00dcberpr\u00fcfe, ob keine unn\u00f6tigen Elemente vorhanden sind, auch nicht au\u00dferhalb des Zeichenbereichs.<\/li>\n\n\n\n
  7. Speichere die SVG-Datei mit den richtigen Einstellungen.<\/li>\n\n\n\n
  8. Stelle die Bildposition auf Einbetten<\/strong> ein. Wenn diese Einstellung nicht auf Einbetten steht, kann die SVG aus dem Druck-PDF verschwinden. <\/li>\n<\/ol>\n\n
    \"svg-instellingen<\/figure>\n\n

    SVG-Einstellungen beim Speichern in Illustrator.<\/em><\/p>\n\n

    Wichtig zu merken<\/h2>\n\n

    Versuche, in einem Kartendesign im Editor so wenig wie m\u00f6glich Gebrauch vom Zuschneiden (Croppen) und Drehen von SVGs zu machen. Dies kann zu unerwarteten Ergebnissen im Druck-PDF f\u00fchren. In vielen F\u00e4llen ist es besser, hierf\u00fcr eine neue SVG in Illustrator zu erstellen. <\/p>\n\n

    Crop-Probleme l\u00f6sen<\/h2>\n\n

    Es kann vorkommen, dass eine SVG im Editor zugeschnitten erscheint, im Druck-PDF jedoch vollst\u00e4ndig gedruckt wird. Dies geschieht meistens, weil noch Teile der Illustration vorhanden sind, die nicht wirklich entfernt wurden. <\/p>\n\n

      \n
    1. Gehe zu der Karte im Editor, bei der das Problem auftritt.<\/li>\n\n\n\n
    2. Lade das Druck-PDF dieser Karte herunter.<\/li>\n\n\n\n
    3. \u00d6ffne das Druck-PDF in Illustrator.<\/li>\n\n\n\n
    4. \u00dcberpr\u00fcfe, wie die SVG wirklich aufgebaut ist, indem du CMD + Y<\/strong> dr\u00fcckst oder Ansicht > Pfadansicht<\/strong> w\u00e4hlst. So siehst du, welche Teile noch vorhanden sind, auch wenn sie visuell nicht sichtbar erscheinen. <\/li>\n<\/ol>\n\n
      \"svg-croppen-issues-1024x291<\/figure>\n\n

      Beispiel einer SVG, die in der Pfadansicht mehr Elemente enth\u00e4lt, als auf der Karte sichtbar sind.<\/em><\/p>\n\n

        \n
      1. W\u00e4hle den wei\u00dfen Pfeil<\/strong> in der Werkzeugpalette; dies ist das Direktauswahl-Werkzeug.<\/li>\n\n\n\n
      2. W\u00e4hle nur die Teile aus, die du behalten m\u00f6chtest, und blende diese mit CMD + 3<\/strong> aus.<\/li>\n<\/ol>\n\n
        \"svg-croppen-issues-1-1024x308<\/figure>\n\n

        Blende zuerst die Teile aus, die du behalten willst.<\/em><\/p>\n\n

          \n
        1. Ziehe danach mit dem wei\u00dfen Pfeil \u00fcber den gesamten Zeichenbereich, um die \u00fcbrigen Teile auszuw\u00e4hlen.<\/li>\n\n\n\n
        2. Verwende hierbei nicht \u201eAlles ausw\u00e4hlen\u201c<\/strong>, da du sonst auch die ausgeblendeten Teile wieder mitnimmst.<\/li>\n\n\n\n
        3. Entferne die ausgew\u00e4hlten Teile mit der Backspace-Taste.<\/li>\n\n\n\n
        4. W\u00e4hle danach Objekt > Alle einblenden<\/strong>, um die ausgeblendeten Teile wieder sichtbar zu machen.<\/li>\n\n\n\n
        5. Passe anschlie\u00dfend den Zeichenbereich \u00fcber Objekt > Zeichenfl\u00e4chen > An Bildmaterialbegrenzungen anpassen<\/strong> an.<\/li>\n\n\n\n
        6. Speichere die Datei erneut als SVG.<\/li>\n\n\n\n
        7. Ersetze in der Karte die alte SVG durch diese neue Datei.<\/li>\n<\/ol>\n\n
          \"svg-croppen-issues-2<\/figure>\n\n

          Nach dem Bereinigen und erneuten Speichern kannst du die angepasste SVG neu im Entwurf hochladen.<\/p>\n\n

          H\u00e4ufige Ursachen f\u00fcr Probleme<\/h2>\n\n