{"id":3033,"date":"2021-08-09T15:51:19","date_gmt":"2021-08-09T13:51:19","guid":{"rendered":"https:\/\/vielhuber.de\/?p=3033"},"modified":"2021-08-09T17:23:58","modified_gmt":"2021-08-09T15:23:58","slug":"mit-clip-path-svgs-aus-bildern-ausstanzen","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/","title":{"rendered":"Mit clip-path SVGs aus Bildern ausstanzen"},"content":{"rendered":"\n<p>Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/clip-path\" target=\"_blank\" rel=\"noreferrer noopener\">clip-path<\/a>. Das folgende Script l\u00f6st etwas holprigen Barrieren: Die SVGs k\u00f6nnen mit Hilfe von Illustrator abgespeichert werden, man kann die (relative oder absolute) URL eines SVGs angeben (Chrome <a href=\"https:\/\/caniuse.com\/css-clip-path\" target=\"_blank\" rel=\"noreferrer noopener\">unterst\u00fctzt<\/a> bis dato nativ ausschlie\u00dflich Inline-SVGs) und der Ausschnitt ist au\u00dferdem komplett responsive.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Zun\u00e4chst legt man in Adobe Illustrator eine <a href=\"https:\/\/helpx.adobe.com\/de\/illustrator\/using\/clipping-masks.html\" target=\"_blank\" rel=\"noreferrer noopener\">Schnittmaske<\/a> an und exportiert das SVG mit den folgenden Einstellungen:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"298\" src=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.png\" alt=\"\" class=\"wp-image-3034\"\/><\/figure><\/div>\n\n\n\n<p>Dabei sollte die Seitenverh\u00e4ltnisse des SVGs und des Bildes gleich sein. Schlie\u00dflich referenziert man am Bild z.B. im Attribut <strong>data-clip<\/strong> die externe SVG:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"1.html\">1e4823ee95525ce0e04bb693c48e0e35<\/p>\n\n\n\n<p>Nun bindet man folgendes Script ein:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"2.js\">1e4823ee95525ce0e04bb693c48e0e35<\/p>\n\n\n\n<p>Als Resultat erh\u00e4lt man damit:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"500\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-slug-hash=\"OJmrVEE\" data-user=\"vielhuber\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vielhuber\/pen\/OJmrVEE\">\n  clip-path and SVGs<\/a> by David Vielhuber (<a href=\"https:\/\/codepen.io\/vielhuber\">@vielhuber<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen Barrieren: Die SVGs k\u00f6nnen mit Hilfe von Illustrator abgespeichert werden, man kann die (relative oder absolute) URL eines SVGs angeben (Chrome unterst\u00fctzt bis dato nativ ausschlie\u00dflich Inline-SVGs) und der Ausschnitt ist au\u00dferdem komplett [&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-3033","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Mit clip-path SVGs aus Bildern ausstanzen &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen\" \/>\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\/mit-clip-path-svgs-aus-bildern-ausstanzen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mit clip-path SVGs aus Bildern ausstanzen &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-09T13:51:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-09T15:23:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.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\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Mit clip-path SVGs aus Bildern ausstanzen\",\"datePublished\":\"2021-08-09T13:51:19+00:00\",\"dateModified\":\"2021-08-09T15:23:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/\"},\"wordCount\":151,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-28.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/\",\"name\":\"Mit clip-path SVGs aus Bildern ausstanzen &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-28.png\",\"datePublished\":\"2021-08-09T13:51:19+00:00\",\"dateModified\":\"2021-08-09T15:23:58+00:00\",\"description\":\"Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-28.png\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/image-28.png\",\"width\":372,\"height\":298},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mit-clip-path-svgs-aus-bildern-ausstanzen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mit clip-path SVGs aus Bildern ausstanzen\"}]},{\"@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":"Mit clip-path SVGs aus Bildern ausstanzen &#060; Vielhuber David","description":"Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen","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\/mit-clip-path-svgs-aus-bildern-ausstanzen\/","og_locale":"de_DE","og_type":"article","og_title":"Mit clip-path SVGs aus Bildern ausstanzen &#060; Vielhuber David","og_description":"Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen","og_url":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/","og_site_name":"Vielhuber David","article_published_time":"2021-08-09T13:51:19+00:00","article_modified_time":"2021-08-09T15:23:58+00:00","og_image":[{"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.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\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Mit clip-path SVGs aus Bildern ausstanzen","datePublished":"2021-08-09T13:51:19+00:00","dateModified":"2021-08-09T15:23:58+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/"},"wordCount":151,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.png","articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/","url":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/","name":"Mit clip-path SVGs aus Bildern ausstanzen &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#primaryimage"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.png","datePublished":"2021-08-09T13:51:19+00:00","dateModified":"2021-08-09T15:23:58+00:00","description":"Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script l\u00f6st etwas holprigen","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#primaryimage","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.png","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/image-28.png","width":372,"height":298},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/mit-clip-path-svgs-aus-bildern-ausstanzen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Mit clip-path SVGs aus Bildern ausstanzen"}]},{"@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\/hu\/wp-json\/wp\/v2\/posts\/3033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/comments?post=3033"}],"version-history":[{"count":7,"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/posts\/3033\/revisions"}],"predecessor-version":[{"id":3042,"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/posts\/3033\/revisions\/3042"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/media?parent=3033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/categories?post=3033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/hu\/wp-json\/wp\/v2\/tags?post=3033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}