{"id":2487,"date":"2019-09-12T13:08:33","date_gmt":"2019-09-12T11:08:33","guid":{"rendered":"https:\/\/vielhuber.de\/?p=2487"},"modified":"2019-09-12T13:12:50","modified_gmt":"2019-09-12T11:12:50","slug":"svg-export-aus-illustrator","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/","title":{"rendered":"SVG Export aus Illustrator"},"content":{"rendered":"\n<p>Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via CSS oder JavaScript. Will man eine Vektorgrafik f\u00fcr das Web aus <a rel=\"noreferrer noopener\" aria-label=\"Adobe Illustrator (opens in a new tab)\" href=\"https:\/\/www.adobe.com\/de\/products\/illustrator.html\" target=\"_blank\">Adobe Illustrator<\/a> als SVG abspeichern, sind einige Einstellungen zu treffen, um Fallstricke zu vermeiden und Ladezeiten zu reduzieren, die ich im nachfolgenden Artikel vorstelle.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Die allgemeine Exportfunktion findet man unter \"<strong>Datei > Exportieren > Exportieren als...<\/strong>\". Schlie\u00dflich w\u00e4hlt man bei Dateityp \"<strong>SVG (*.SVG)<\/strong>\" aus. Will man transparente Bereiche nicht beschneiden und die Zeichenfl\u00e4che ber\u00fccksichtigen, setzt man einen Haken bei \"<strong>Zeichenfl\u00e4chen verwenden<\/strong>\", ansonsten nicht. Im nachfolgenden Dialog w\u00e4hlt man folgende Optionen aus:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"370\" height=\"297\" src=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png\" alt=\"\" class=\"wp-image-2488\"\/><\/figure><\/div>\n\n\n\n<p>Ist man mit dem Detailgrad der Pfade im Ergebnis nicht zufrieden, erh\u00f6ht man sukzessive die Dezimalstellen auf 3 oder 4.<\/p>\n\n\n\n<p>Interessant wird es, wenn man in der Vektordatei Schnittmasken eingebettet hat. Man kann diese ebenfalls eliminieren (das f\u00fchrt zu erneut geringeren Dateigr\u00f6\u00dfen sowie zu erh\u00f6hter Kompatibilit\u00e4t bei der Verwendung von Druck-Tools wie <a href=\"https:\/\/github.com\/dompdf\/dompdf\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"dompdf (opens in a new tab)\">dompdf<\/a>).<\/p>\n\n\n\n<p>Hier gibt es im Illustrator zwei bekannte Wege: Zun\u00e4chst markiert man alle Objekte mit STRG+A und w\u00e4hlt \"<strong>Objekt > Transparenz reduzieren...<\/strong>\" aus. Anschlie\u00dfend entfernt man \u00fcber \"<strong>Objekt > Schnittmaske > Zur\u00fcckwandeln<\/strong>\" die bestehenden Schnittmasken. Wenn das nicht klappt, macht man statt der beiden letzten Schritte folgendes: Zun\u00e4chst w\u00e4hlt man \"<strong>Objekt > Umwandeln... > OK<\/strong>\" aus und anschlie\u00dfend im Pathfinder-Dialog die Option \"<strong>\u00dcberlappungsbereich entfernen<\/strong>\":<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"244\" height=\"178\" src=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-4.png\" alt=\"\" class=\"wp-image-2489\"\/><\/figure><\/div>\n\n\n\n<p>Das finale SVG kann man dann nochmals mit Tools wie <a href=\"https:\/\/github.com\/svg\/svgo\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"svgo (opens in a new tab)\">svgo<\/a> (auf der Kommandozeile oder im <a rel=\"noreferrer noopener\" aria-label=\"Web-GUI (opens in a new tab)\" href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\">Web-GUI<\/a>) weiter optimieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via CSS oder JavaScript. Will man eine Vektorgrafik f\u00fcr das Web aus Adobe Illustrator als SVG abspeichern, sind einige Einstellungen zu treffen, um Fallstricke zu vermeiden und Ladezeiten zu reduzieren, die ich im nachfolgenden [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-2487","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>SVG Export aus Illustrator &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG Export aus Illustrator &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-12T11:08:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-12T11:12:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"SVG Export aus Illustrator\",\"datePublished\":\"2019-09-12T11:08:33+00:00\",\"dateModified\":\"2019-09-12T11:12:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/\"},\"wordCount\":256,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-3.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/\",\"name\":\"SVG Export aus Illustrator &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-3.png\",\"datePublished\":\"2019-09-12T11:08:33+00:00\",\"dateModified\":\"2019-09-12T11:12:50+00:00\",\"description\":\"Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via CSS\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-3.png\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-3.png\",\"width\":370,\"height\":297},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/svg-export-aus-illustrator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG Export aus Illustrator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"SVG Export aus Illustrator &#060; Vielhuber David","description":"Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/","og_locale":"de_DE","og_type":"article","og_title":"SVG Export aus Illustrator &#060; Vielhuber David","og_description":"Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via CSS","og_url":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/","og_site_name":"Vielhuber David","article_published_time":"2019-09-12T11:08:33+00:00","article_modified_time":"2019-09-12T11:12:50+00:00","og_image":[{"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png","type":"","width":"","height":""}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"SVG Export aus Illustrator","datePublished":"2019-09-12T11:08:33+00:00","dateModified":"2019-09-12T11:12:50+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/"},"wordCount":256,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png","articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/","url":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/","name":"SVG Export aus Illustrator &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#primaryimage"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png","datePublished":"2019-09-12T11:08:33+00:00","dateModified":"2019-09-12T11:12:50+00:00","description":"Im heutigen Web spielen SVGs eine zentrale Rolle. Sie haben nicht nur Iconfonts verdr\u00e4ngt, sondern bieten auch die M\u00f6glichkeit der Manipulation via CSS","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#primaryimage","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-3.png","width":370,"height":297},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/svg-export-aus-illustrator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"SVG Export aus Illustrator"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts\/2487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/comments?post=2487"}],"version-history":[{"count":6,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts\/2487\/revisions"}],"predecessor-version":[{"id":2495,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/posts\/2487\/revisions\/2495"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/media?parent=2487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/categories?post=2487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/haw\/wp-json\/wp\/v2\/tags?post=2487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}