{"id":55872,"date":"2024-09-23T07:00:00","date_gmt":"2024-09-23T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=55872"},"modified":"2025-10-07T13:45:40","modified_gmt":"2025-10-07T20:45:40","slug":"svg-dateien","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/","title":{"rendered":"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet"},"content":{"rendered":"\n<p>Einige Leute sagen, Elvis Presley war der gr\u00f6\u00dfte Performer aller Zeiten.<\/p>\n\n\n\n<p>Wir sagen, das SVG-Dateiformat ist ein enger Konkurrent.<\/p>\n\n\n\n<p>Sie sehen, Elvis hat immer geliefert. Sein pers\u00f6nliches Mantra war: &#8220;Sich um Gesch\u00e4fte k\u00fcmmern&#8221;, abgek\u00fcrzt als TCB auf seinem Schmuck.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1181\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp\" alt=\"Foto von Elvis bei George Kleins Hochzeit mit seiner TCB-Halskette\" class=\"wp-image-49627 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-300x221.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1024x756.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-768x567.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1536x1134.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-600x443.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1200x886.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-730x539.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1460x1078.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-784x579.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1568x1157.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-877x647.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1181;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.instagram.com\/p\/BwM33HqHAlW\/\" target=\"_blank\" rel=\"noreferrer noopener\">Quelle<\/a><\/figcaption><\/figure>\n\n\n\n<p>Und das Gleiche k\u00f6nnte man auch \u00fcber SVG-Dateien sagen.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SVG<\/h3>\n    <p>Eine SVG-Datei, oder Skalierbare Vektorgrafik-Datei, ist ein Dateiformat, das zweidimensionale Bilder rendert. Sie beschreibt, wie das Bild mithilfe eines XML-Textformats erscheinen soll.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/svg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Unabh\u00e4ngig davon, an welchem Projekt Sie arbeiten, wird dieses Bildformat die Arbeit erledigen. Diese Dateien sind leicht, skalierbar und gro\u00dfartig f\u00fcr <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/\" target=\"_blank\" rel=\"noreferrer noopener\">Barrierefreiheit<\/a>. Sie k\u00f6nnen sie sogar mit Code bearbeiten.<\/p>\n\n\n\n<p>Brauchen Sie noch \u00dcberzeugung? In diesem \u00e4u\u00dferst lesbaren Leitfaden werfen wir einen genaueren Blick auf das SVG-Format und erkl\u00e4ren, wie Sie diese Dateien in Ihren eigenen Projekten verwenden k\u00f6nnen.<\/p>\n\n\n\n<p>Bereit anzufangen? Weniger reden, mehr handeln!<\/p>\n\n\n\n<h2 id=\"h-die-abcs-von-svgs-verstandnis-von-bilddateien\" class=\"wp-block-heading\">Die ABCs von SVGs: Verst\u00e4ndnis von Bilddateien<\/h2>\n\n\n\n<p>Angenommen, Sie erstellen eine Website. Sie werden wahrscheinlich einige Bilder wollen.<\/p>\n\n\n\n<p>Welchen Dateityp sollten Sie verwenden?<\/p>\n\n\n\n<p>Ihr Instinkt k\u00f6nnte JPEG oder PNG sein. Vielleicht werden Sie wild und verwenden einige GIFs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExemYyMXZuMThmZXBseDJ4Ym5raTR0NXVtNDI0dnpsaDZ5Y3JhOWcyNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/l0IyqqiSuoOFBdZ7i\/giphy.webp\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/giphy.com\/gifs\/chuber-bears-elvis-l0IyqqiSuoOFBdZ7i\" target=\"_blank\" rel=\"noreferrer noopener\">Quelle<\/a><\/figcaption><\/figure>\n\n\n\n<p>Aber\u2026 was ist der Unterschied? Nun, hier ist ein Vergleich der \u00fcblichen Verd\u00e4chtigen:<\/p>\n\n\n\n<p><strong>JPEG (Joint Photographic Experts Group)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vorteile: Kleinere Dateigr\u00f6\u00dfen, gro\u00dfartig f\u00fcr komplexe Bilder.<\/li>\n\n\n\n<li>Nachteile: Verliert Qualit\u00e4t bei Komprimierung, keine Transparenz.<\/li>\n<\/ul>\n\n\n\n<p><strong>PNG (Portable Network Graphics)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vorteile: Verlustfreie Kompression, unterst\u00fctzt Transparenz.<\/li>\n\n\n\n<li>Nachteile: Gr\u00f6\u00dfere Dateien als JPEGs.<\/li>\n<\/ul>\n\n\n\n<p><strong>GIF (Graphics Interchange Format)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vorteile: Unterst\u00fctzt einfache Animationen, kleine Dateigr\u00f6\u00dfe.<\/li>\n\n\n\n<li>Nachteile: Begrenzte Farben, kann pixelig aussehen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/i.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExZnQyaXJnOTNjNGtrOThvcHoyNmdtemFqOXZyeGtxbjZ6OTVmaGo5YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/IxPS9xRu7TwYlrgBv4\/giphy.gif\" alt=\"\" style=\"width:500px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Diese Formate scheinen unterschiedlich zu sein. Sie sind jedoch alle Beispiele f\u00fcr Rasterbilder.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/bilder-fur-das-web-optimieren\/\" target=\"_blank\" rel=\"noreferrer noopener\">Raster- (oder Bitmap-)Bilder<\/a> sind mit pr\u00e4zise platzierten Pixeln gemalt. Sie haben feste Abmessungen, Farben und Formen.<\/p>\n\n\n\n<p>Diese Dateitypen eignen sich hervorragend zum Teilen von Bildern mit vielen Details, wie zum Beispiel <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/fotografie-portfolio-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">hochwertigen Fotos<\/a>.<\/p>\n\n\n\n<p>Der Nachteil ist, dass Sie das Originalbild niemals \u00e4ndern oder strecken k\u00f6nnen. Sie k\u00f6nnen nur dar\u00fcber malen oder mehr Pixel hinzuf\u00fcgen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Warum SVGs so n\u00fctzlich sind<\/h3>\n\n\n\n<p>Das SVG-Format (Scalable Vector Graphics) ist anders.<\/p>\n\n\n\n<p>Vektor-Dateien enthalten eine Reihe von Textanweisungen zum Erstellen eines Bildes. Diese Dateien sind in XML (Extensible Markup Language) geschrieben.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>XML<\/h3>\n    <p>XML ist die Abk\u00fcrzung f\u00fcr Extensible Markup Language. Diese Sprache verwendet Tags, um Informationen zu Dateien hinzuzuf\u00fcgen, die sowohl von Maschinen als auch von Menschen gelesen werden k\u00f6nnen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/xml\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Wenn Sie versuchen, eine SVG-Datei zu laden, betrachtet Ihr Ger\u00e4t die Anweisungen und erstellt das Bild nach Bedarf.<\/p>\n\n\n\n<p>Es gibt mehrere Vorteile dieses Systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SVGs k\u00f6nnen <strong>in jeder Gr\u00f6\u00dfe skaliert werden<\/strong> und sehen immer perfekt aus.<\/li>\n\n\n\n<li>Sie k\u00f6nnen auch <strong>wie Code-Dateien bearbeitet werden<\/strong>.<\/li>\n\n\n\n<li>Sie k\u00f6nnen sogar <strong>mit CSS gestaltet werden<\/strong>.<\/li>\n\n\n\n<li>Weil SVGs aus Text bestehen, <strong>haben sie wirklich kleine Dateigr\u00f6\u00dfen<\/strong>.<\/li>\n\n\n\n<li>Dies bedeutet, dass sie <strong>weniger Speicherplatz<\/strong> auf Ihrem Webserver beanspruchen<strong>.<\/strong><\/li>\n\n\n\n<li>Und sie k\u00f6nnen <strong>schneller laden<\/strong> als Rastergrafiken.<\/li>\n<\/ul>\n\n\n\n<p>Ein weiterer Vorteil der Verwendung von SVGs ist die <strong>verbesserte Zug\u00e4nglichkeit. <\/strong>Sie k\u00f6nnen diese Dateien lokal auf Ger\u00e4ten anpassen, entsprechend den Bed\u00fcrfnissen des Benutzers, und Bildschirmleser k\u00f6nnen sie interpretieren.<\/p>\n\n\n\n<p>Der Nachteil von SVGs ist, dass sie sehr gro\u00df werden k\u00f6nnen, wenn Sie viele Details einf\u00fcgen. Au\u00dferdem k\u00f6nnen sie nicht auf die gleiche Weise wie Rasterbilder optimiert werden. Wenn Sie Fotografie teilen m\u00f6chten, sind Sie wahrscheinlich mit einem JPEG besser beraten.<\/p>\n\n\n\n<p>Aber f\u00fcr die meisten anderen visuellen Inhalte ist das SVG-Format eine starke Option.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Merkmale<\/strong><\/td><td><strong>SVG<\/strong><\/td><td><strong>JPEG<\/strong><\/td><td><strong>PNG<\/strong><\/td><td><strong>GIF<\/strong><\/td><\/tr><tr><td>Skalierbarkeit<\/td><td>Stark \u2705<\/td><td>Nein \u274c<\/td><td>Nein \u274c<\/td><td>Nein \u274c<\/td><\/tr><tr><td>Dateigr\u00f6\u00dfe<\/td><td>Normalerweise klein \u2705<\/td><td>Kann klein sein \u2705<\/td><td>Oft gro\u00df \u274c<\/td><td>Klein f\u00fcr einfache Bilder \u2705<\/td><\/tr><tr><td>Transparenz<\/td><td>Ja \u2705<\/td><td>Nein \u274c<\/td><td>Ja \u2705<\/td><td>Ja, aber begrenzt \u26a0\ufe0f<\/td><\/tr><tr><td>Animation<\/td><td>Auf jeden Fall! ?<\/td><td>Nein \u274c<\/td><td>Nein \u274c<\/td><td>Nur einfach \u26a0\ufe0f<\/td><\/tr><tr><td>Am besten f\u00fcr<\/td><td>Grafiken, Icons, Logos&nbsp;<\/td><td>Fotos<\/td><td>Bilder, die Transparenz ben\u00f6tigen<\/td><td>Einfache Animationen<\/td><\/tr><tr><td>Editierbarkeit<\/td><td>Mit Code! ?<\/td><td>Nein \u274c<\/td><td>Nein \u274c<\/td><td>Nein \u274c<\/td><\/tr><tr><td>Browserunterst\u00fctzung<\/td><td>Die meisten modernen Browser \u2705<\/td><td>Alle Browser \u2705<\/td><td>Alle Browser \u2705<\/td><td>Alle Browser \u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">H\u00e4ufige Verwendungszwecke f\u00fcr SVG-Bilder<\/h3>\n\n\n\n<p>Obwohl SVGs ziemlich vielseitig sind, erscheinen sie meistens im Webdesign als:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icons:<\/strong> Von Social-Media-Links bis zu Einkaufswagen-Buttons sehen SVG-Icons auf jedem Ger\u00e4t scharf aus.<\/li>\n\n\n\n<li><strong>Logos:<\/strong> Wenn Sie Ihr <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/logo-online-kostenlos-erstellen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Markenlogo<\/a> als SVG speichern, wird es \u00fcberall perfekt aussehen \u2013 von kleinen Mobilbildschirmen bis zu riesigen Werbetafeln.<\/li>\n\n\n\n<li><strong>Illustrationen:<\/strong> Viele Websites verwenden jetzt SVG-Illustrationen anstelle von Stockbildern. Selbst wenn die Grafiken sehr detailliert sind, skalieren sie perfekt.<\/li>\n\n\n\n<li><strong>Animationen:<\/strong> Ja, SVGs k\u00f6nnen sich bewegen! Sie k\u00f6nnen sie animieren, um Ihrer Website das gewisse Extra zu verleihen, wie ein sich drehendes Logo oder eine tanzende Figur.<\/li>\n\n\n\n<li><strong>Infografiken<\/strong>: Da SVGs skalierbar sind, k\u00f6nnen Sie sie auch verwenden, um interaktive <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/ga4-erkundungen-vorlagengalerie\/\" target=\"_blank\" rel=\"noreferrer noopener\">Datenvisualisierungen<\/a> zu erstellen. Sehr cool!<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h2_working-with-svgs-create-or-copy\" class=\"wp-block-heading\">Mit SVGs arbeiten: Erstellen oder Kopieren?<\/h2>\n\n\n\n<p>Okay, das reicht an schw\u00e4rmerischem Lob. Es ist Zeit, an die Arbeit zu gehen.<\/p>\n\n\n\n<p>Wenn Sie SVGs in Ihre digitalen Projekte integrieren m\u00f6chten, m\u00fcssen Sie einige fertige Designs verwenden oder Ihre eigenen Grafiken von Grund auf erstellen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kostenlose SVGs finden<\/h3>\n\n\n\n<p>Die Verwendung von Designs anderer Personen ist die einfachere Option. Und gl\u00fccklicherweise sind Tausende von SVGs zum Herunterladen online verf\u00fcgbar.<\/p>\n\n\n\n<p>Viele sind kostenlos f\u00fcr pers\u00f6nliche Projekte, aber f\u00fcr kommerzielle Nutzung m\u00fcssen Sie m\u00f6glicherweise bezahlen.<\/p>\n\n\n\n<p>Hier sind einige unserer Lieblingsressourcen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome<\/a>: Ein beliebtes Paket von SVG-Symbolen.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freepik<\/a>: Riesige Datenbank mit Vektorgrafiken, Illustrationen und Symbolen.<\/li>\n\n\n\n<li><a href=\"https:\/\/lineicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lineicons<\/a>: Paket von \u00fcber 8.400 klaren, einfachen Symbolen.<\/li>\n\n\n\n<li><a href=\"https:\/\/freesvg.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free SVG<\/a>: Bibliothek mit vollst\u00e4ndig kostenlosen SVG-Illustrationen.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.opendoodles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Doodles<\/a>: Kostenlose, farbenfrohe, charakter\u00e4hnliche Illustrationen von Personen.<\/li>\n\n\n\n<li><a href=\"https:\/\/iconscout.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IconScout<\/a>: Durchsuchbare Bibliothek mit \u00fcber 9,5 Millionen Ressourcen, einschlie\u00dflich kostenloser und kostenpflichtiger Symbole, Illustrationen, Logos und mehr.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.drawkit.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DrawKit<\/a>: Mehrere Pakete von 2D\/3D-Illustrationen, kostenlos und Premium.<\/li>\n\n\n\n<li><a href=\"https:\/\/undraw.co\/illustrations\" target=\"_blank\" rel=\"noreferrer noopener\">unDraw<\/a>: Viele gro\u00dfartige, kostenlose SVG-Illustrationen.<\/li>\n<\/ul>\n\n\n\n<p>Denken Sie daran, dass Sie jede heruntergeladene SVG bearbeiten k\u00f6nnen. So k\u00f6nnen Sie kostenlose Dateien als Ausgangspunkt f\u00fcr Ihre eigenen Kreationen verwenden.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h2_how-to-create-and-edit-svg-files\" class=\"wp-block-heading\">Wie man SVG-Dateien erstellt und bearbeitet<\/h2>\n\n\n\n<p>K\u00f6nnen Sie nicht finden, was Sie online ben\u00f6tigen? Keine Sorge. Das Bearbeiten von SVGs ist ein Kinderspiel.<\/p>\n\n\n\n<p>Hier ist eine kurze Anleitung:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. W\u00e4hlen Sie Ihre Software<\/h3>\n\n\n\n<p>Der einfachste Weg, SVGs zu bearbeiten, ist mit einem Vektorgrafik-Editor. Hier sind einige beliebte Optionen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adobe Illustrator<\/strong> ($$$): Der Schwergewichtschampion. Teuer, aber leistungsstark.<\/li>\n\n\n\n<li><strong>Inkscape <\/strong>(kostenlos): Die kostenlose Alternative, die es in sich hat.<\/li>\n\n\n\n<li><strong>Figma <\/strong>($): Gro\u00dfartig f\u00fcr kollaboratives Design.<\/li>\n\n\n\n<li><strong>Sketch <\/strong>($): Eine leichtere Alternative zu Illustrator, beliebt bei Interface-Designern.<\/li>\n<\/ul>\n\n\n\n<p>Wir werden den Rest dieses Tutorials auf Inkscape basieren, aber der Prozess sieht in den meisten Vektorbearbeitungs-Apps sehr \u00e4hnlich aus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Richten Sie Ihre Leinwand ein<\/h3>\n\n\n\n<p>Wenn Sie ganz von vorne beginnen, m\u00fcssen Sie eine Leinwand f\u00fcr Ihre Arbeit erstellen. In Inkscape, besuchen Sie <strong>Datei <\/strong>&gt;<strong> Neu<\/strong> und w\u00e4hlen Sie die Abmessungen f\u00fcr Ihr neues Bild.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1020\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp\" alt=\"Screenshot der Option &quot;Neu&quot;, die sich unter Datei im oberen Navigationsmen\u00fc befindet\" class=\"wp-image-49636 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-300x191.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1024x653.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-768x490.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1536x979.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-600x383.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1200x765.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-730x465.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1460x931.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-784x500.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1568x1000.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-877x559.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1020;\" \/><\/figure>\n\n\n\n<p>Wenn Sie ein vorhandenes SVG-Dokument bearbeiten m\u00f6chten, gehen Sie zu <strong>Datei &gt; \u00d6ffnen<\/strong>, um den Editor zu starten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Entwerfen Sie Ihr Design<\/h3>\n\n\n\n<p>Das wichtigste Werkzeug in der Vektorbearbeitung ist das <strong>Bezier<\/strong>-Werkzeug. Sie k\u00f6nnen es aus der Werkzeugleiste links in Ihrem Arbeitsbereich ausw\u00e4hlen. Das Symbol sieht aus wie ein F\u00fcllfederhalter, der eine gekr\u00fcmmte Linie zeichnet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp\" alt=\"Screenshot Standort des Bezier-Werkzeugs, das wie eine Tintenstiftspitze neben einer gezeichneten Linie aussieht\" class=\"wp-image-49638 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Dieses Werkzeug erm\u00f6glicht es Ihnen, mit wenigen Klicks gerade Linien und perfekte Kurven zu erstellen.<\/p>\n\n\n\n<p>Jede Form, die Sie erstellen, enth\u00e4lt einzelne Pfade und Punkte, die im zugrundeliegenden XML-Code erfasst sind.<\/p>\n\n\n\n<p>Mit dem Bezier-Werkzeug k\u00f6nnen Sie diese Punkte und Pfade nach der Erstellung leicht zur\u00fcckgehen und anpassen. Wenn Sie mit der Struktur zufrieden sind, f\u00fcgen Sie Ihre <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/farbpaletten-fur-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\">eigenen Farben<\/a> \u00fcber das <strong>Objekteigenschaften<\/strong> Panel hinzu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp\" alt=\"Oberste Navigationsleiste mit Dropdown von \u201eObject\u201c zu \u201eObject properties\u201c\" class=\"wp-image-49640 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Objekteigenschaftenoptionen werden im rechten Men\u00fc angezeigt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp\" alt=\"Screenshot des jetzt ge\u00f6ffneten Eigenschaftenmen\u00fcs f\u00fcr Objekte im rechten Men\u00fc, das Farb- und Mustervariationen zeigt.\" class=\"wp-image-49642 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p><strong>Profi-Tipp:<\/strong> M\u00f6chten Sie tiefer in die Vektorbearbeitung eintauchen? Inkscape hat eine gro\u00dfartige Bibliothek mit kostenlosen Tutorials genau<a href=\"https:\/\/inkscape.org\/learn\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\"> hier<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Als SVG speichern<\/h3>\n\n\n\n<p>Sobald Sie mit Ihrer Grafik zufrieden sind, gehen Sie zu <strong>Datei &gt;<\/strong><strong>Speichern unter<\/strong>, und w\u00e4hlen Sie <strong>SVG<\/strong> als Ihr Format.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp\" alt=\"Dropdown-Men\u00fc von \u201eDatei\u201c bis \u201e\u00d6ffnen\u201c\" class=\"wp-image-49644 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Geben Sie ihm einen coolen Namen und speichern Sie!<\/p>\n\n\n\n<h2 id=\"h2_how-to-add-svgs-to-your-website\" class=\"wp-block-heading\">Wie man SVGs zur Ihrer Webseite hinzuf\u00fcgt<\/h2>\n\n\n\n<p>Sie haben Ihr Vektor-Meisterwerk erstellt. Jetzt verdient die Welt es zu sehen.&nbsp;<\/p>\n\n\n\n<p>Sie k\u00f6nnen SVGs in das HTML Ihrer Website einbetten. Alles, was Sie ben\u00f6tigen, ist ein <strong><code>&lt;img&gt;<\/code><\/strong> Tag, der auf Ihre Datei verweist. Es sollte ungef\u00e4hr so aussehen:<\/p>\n\n\n\n<p><code>&lt;img src=\"my-awesome-svg.svg\" alt=\"Mein tolles SVG\"&gt;<\/code><\/p>\n\n\n\n<p>Alternativ k\u00f6nnen Sie den XML-Code Ihrer SVG-Datei direkt in Ihre Webseite einf\u00fcgen, indem Sie den <strong><code>&lt;svg&gt;<\/code><\/strong> Tag verwenden.<\/p>\n\n\n\n<p>Hier ist ein Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"red\" stroke-width=\"2\" fill=\"green\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Dieser Code erzeugt einen sch\u00f6nen runden Knopf mit einem roten Umriss und einem gr\u00fcnen Inneren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SVG in WordPress aktivieren<\/h3>\n\n\n\n<p>Das Hinzuf\u00fcgen einzelner Bilder \u00fcber HTML ist ein sehr langsamer Prozess. Sie ziehen es m\u00f6glicherweise vor, SVGs \u00fcber Ihr CMS (Content-Management-System) hochzuladen.<\/p>\n\n\n\n<p>Aber es gibt ein Problem f\u00fcr WordPress-Nutzer.<\/p>\n\n\n\n<p>Standardm\u00e4\u00dfig unterst\u00fctzt WordPress keine SVG-Uploads. Dies liegt daran, dass b\u00f6swillige Akteure SVGs nutzen k\u00f6nnen, um Malware zu verbreiten.<\/p>\n\n\n\n<p>Der einfachste Weg, SVGs zu aktivieren, ist die Installation eines Plugins wie<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Safe SVG<\/a> oder<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noreferrer noopener\"> SVG Support<\/a>. Diese Tools \u00fcberpr\u00fcfen jeden Upload, um sicherzustellen, dass nichts Sch\u00e4dliches darin verborgen ist.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1362\" height=\"717\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp\" alt=\"Screenshot des Safe SVG Download-Bildschirms\" class=\"wp-image-49647 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp 1362w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-300x158.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1024x539.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-768x404.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-600x316.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1200x632.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-730x384.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-784x413.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-877x462.webp 877w\" data-sizes=\"(max-width: 1362px) 100vw, 1362px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1362px; --smush-placeholder-aspect-ratio: 1362\/717;\" \/><\/figure>\n\n\n\n<p>Sie k\u00f6nnen dann SVGs \u00fcber die WordPress-Medienbibliothek hochladen und einf\u00fcgen. Navigieren Sie einfach zu <strong>Medien &gt; Neu hinzuf\u00fcgen<\/strong> und w\u00e4hlen Sie die Grafiken aus, die Sie einbinden m\u00f6chten.<\/p>\n\n\n\n<h2 id=\"h2_styling-svgs-with-css\" class=\"wp-block-heading\">SVGs mit CSS stylen<\/h2>\n\n\n\n<p>Wenn Sie SVG-Dateien mit dem <strong><code>&lt;svg&gt;<\/code><\/strong> Tag einbetten, k\u00f6nnen Sie mithilfe von CSS \u00e4ndern, wie Ihre Bilder erscheinen.<\/p>\n\n\n\n<p>Angenommen, Sie haben eine gr\u00fcne Grafik erstellt, m\u00f6chten aber, dass sie auf Ihrer Website rot erscheint. Anstatt eine neue Kopie zu erstellen, k\u00f6nnen Sie einfach den folgenden Stil schreiben:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  stroke: red;\n  fill: blue;\n}<\/code><\/pre>\n\n\n\n<p>Das <strong><code>stroke<\/code><\/strong>-Attribut definiert, welche Farbe die Kontur Ihrer Grafik haben sollte. In der Zwischenzeit steuert das <strong><code>fill<\/code><\/strong>-Attribut die Farbe zwischen den Linien.<\/p>\n\n\n\n<p><strong>Profi-Tipp: <\/strong>Es gibt<a href=\"https:\/\/css-tricks.com\/svg-properties-and-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <em>viele<\/em><\/a> weitere Attribute, mit denen man spielen kann.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ihre SVG-Bilder responsiv machen<\/h3>\n\n\n\n<p>SVG-Dateien sind unendlich skalierbar, sodass sie in responsiven Designs verwendet werden k\u00f6nnen. Es erfordert nur ein wenig CSS-Magie.<\/p>\n\n\n\n<p>Hier ist eine Schritt-f\u00fcr-Schritt-Anleitung:<\/p>\n\n\n\n<p><strong>1. Binden Sie Ihr Bild mit dem <code>&lt;svg&gt;<\/code>-Tag ein.<\/strong> Das bedeutet, dass Sie \u00c4nderungen \u00fcber CSS vornehmen k\u00f6nnen.<\/p>\n\n\n\n<p><strong>2. Entfernen Sie die H\u00f6hen- und Breitenma\u00dfe. <\/strong>Dies wird Ihr SVG dazu bringen, sich an seinen Container anzupassen. Stellen Sie sicher, dass der <strong><code>viewBox<\/code> <\/strong>Teil erhalten bleibt. Es sollte ungef\u00e4hr so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg viewBox=\"0 0 20 20\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;!-- svg content here --&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p><strong>3. Legen Sie die maximale Gr\u00f6\u00dfe Ihres SVG fest.<\/strong> Dies verhindert, dass das Bild \u00fcber seinen Container hinausgeht. Zum Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  display: inline-block;\n  max-width: 100%;\n}<\/code><\/pre>\n\n\n\n<p>Und Sie sind fertig!<\/p>\n\n\n\n<p><strong>Profi-Tipp:<\/strong> Wenn dies alles etwas technisch klingt, versuchen Sie <a href=\"https:\/\/app.zipwp.com\/pricing\/?aff=933feb1e\" target=\"_blank\" rel=\"noreferrer noopener\">ZipWP<\/a>. Es ist ein KI-gesteuerter Website-Builder, der das Styling f\u00fcr Sie \u00fcbernimmt.<\/p>\n\n\n\n<h2 id=\"h2_svg-masterclass-4-advanced-tips\" class=\"wp-block-heading\">SVG-Meisterklasse: 4 Fortgeschrittene Tipps<\/h2>\n\n\n\n<p>Wir haben die Grundlagen der Erstellung und des Teilens von SVGs behandelt. Um diesen Leitfaden abzuschlie\u00dfen, werfen wir einen Blick auf einige fortgeschrittene Techniken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Animieren Sie Ihre SVG-Grafiken<\/h3>\n\n\n\n<p>Wussten Sie, dass Sie Ihre SVGs tanzen lassen k\u00f6nnen? Ja, <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Animation<\/a> funktioniert bei diesem Dateityp.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/loading-animation.gif\" alt=\"einfache Animation eines &quot;Laden&quot;-Knopfes, der sich auf dem einfarbigen schwarzen Hintergrundgrafik auf und ab bewegt\" class=\"wp-image-49653 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure>\n\n\n\n<p>Wie beim Originalbild k\u00f6nnen Sie Ihre Grafiken mit einfachem XML-Code animieren. F\u00fcgen Sie einfach ein <strong><code>&lt;animate&gt;<\/code> <\/strong>Element in Ihre Form ein, um Bewegung zu erzeugen.<\/p>\n\n\n\n<p>Es sollte ungef\u00e4hr so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"100%\" height=\"auto\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill:red;\"&gt;\n    &lt;animate\n      attributeName=\"cx\"\n      begin=\"0s\"\n      dur=\"5s\"\n      from=\"30\"\n      to=\"90%\"\n      repeatCount=\"indefinite\" \/&gt;\n  &lt;\/circle&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Sie k\u00f6nnen diese Technik verwenden, um Icons ein wenig Bewegung zu verleihen, einen Seitenladeindikator zu erstellen oder sogar animierte Werbung zu gestalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Verwenden Sie SVG-Sprites f\u00fcr schnellere Ladezeiten<\/h3>\n\n\n\n<p>SVG-Sprites sind wie ein Best-of-Album f\u00fcr Ihre Icons. Anstatt Dutzende einzelner Icon-Dateien zu haben, b\u00fcndeln Sie alle in einem SVG.<\/p>\n\n\n\n<p>Dies bedeutet, dass Sie nur eine HTTP-Anfrage pro Seite ben\u00f6tigen, egal wie viele Symbole Sie verwenden. Es ist eine gro\u00dfartige M\u00f6glichkeit, Ladezeiten zu reduzieren und Bandbreite zu sparen.<\/p>\n\n\n\n<p>Viele Icon-Pakete werden heutzutage in Sprite-Form geliefert. Sie k\u00f6nnen<a href=\"https:\/\/hackernoon.com\/how-to-create-svg-sprite-with-icons\" target=\"_blank\" rel=\"noreferrer noopener\"> auch Ihre eigenen erstellen<\/a>.<\/p>\n\n\n\n<p>Um ein bestimmtes Icon auf Ihrer Website einzubetten, markieren Sie einfach den Bereich der Sprite-Datei, in dem dieses Icon gespeichert ist. Dies k\u00f6nnen Sie mit einfachem CSS-Code tun:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#button {\n  width: 20px;\n  height: 20px;\n  background: url('sprite.svg') -128px 0;\n}<\/code><\/pre>\n\n\n\n<p><strong>Profi-Tipp: <\/strong>Wir empfehlen die Verwendung eines Online-Tools wie<a href=\"https:\/\/www.toptal.com\/developers\/css\/sprite-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\"> CSS Sprites Generator<\/a>, um die korrekten Abst\u00e4nde zu berechnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Optimieren Sie Ihre SVG-Dateien f\u00fcr eine bessere Leistung<\/h3>\n\n\n\n<p>Obwohl SVG-Dateien ziemlich klein beginnen, k\u00f6nnen Sie sie optimieren, um sie noch leichter zu machen.<\/p>\n\n\n\n<p>Hier ist, wie man es macht:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Verwenden Sie ein Tool wie<\/strong><a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> SVGOMG<\/strong><\/a>. Ja, das gibt es wirklich. Es ist eine gro\u00dfartige kleine Web-App, die es Ihnen erm\u00f6glicht, SVGs zu komprimieren, ohne an Qualit\u00e4t zu verlieren.<\/li>\n\n\n\n<li><strong>Vereinfachen Sie Pfade, wo m\u00f6glich<\/strong>. Komplizierte Formen k\u00f6nnen sich in riesige Mengen XML-Code verwandeln. Viele Vektorgrafik-Editoren haben Werkzeuge f\u00fcr diese Aufgabe. (Es befindet sich unter <strong>Pfad &gt; Vereinfachen<\/strong> in Inkscape).<\/li>\n\n\n\n<li><strong>Betrachten Sie Lazy Loading f\u00fcr SVGs weiter unten auf der Seite.<\/strong> Indem Sie das Laden von Bildern weiter unten auf der Seite verz\u00f6gern, k\u00f6nnen Sie die Auswirkungen mehrerer Bilder reduzieren.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Machen Sie Ihre Grafiken zug\u00e4nglich<\/h3>\n\n\n\n<p>Da SVGs textbasierte Dateien sind, sind sie leicht durch Bildschirmleser und andere unterst\u00fctzende Software zu verstehen.<\/p>\n\n\n\n<p>Das gesagt, gibt es noch Schritte, die Sie unternehmen k\u00f6nnen, um sie noch zug\u00e4nglicher zu machen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Binden Sie <code>&lt;title&gt;<\/code> und <code>&lt;desc&gt;<\/code> in Ihre SVG-Dateien ein<\/strong>. Diese Elemente liefern Beschreibungen der Grafik, die besonders n\u00fctzlich f\u00fcr Benutzer sind, die auf Bildschirmleser angewiesen sind.<\/li>\n\n\n\n<li><strong>F\u00fcgen Sie ein <code>role=\"img\"<\/code> Attribut hinzu<\/strong>. Dies informiert assistive Technologien, dass es sich bei dem SVG um ein Bild handelt.<\/li>\n\n\n\n<li><strong>F\u00fcllen Sie das <code>aria-labelledby<\/code> Attribut aus.<\/strong> Dies sollte die IDs der <code>&lt;title&gt;<\/code> und <code>&lt;desc&gt;<\/code> Elemente referenzieren und sie als Beschriftungen f\u00fcr das Bild verkn\u00fcpfen.<\/li>\n\n\n\n<li><strong>F\u00fcr komplexere SVGs, stellen Sie Alt-Text bereit<\/strong>. Beschreiben Sie das Bild, sodass Bildschirmleser weniger zu interpretieren haben.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"666\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp\" alt=\"einfache Animation eines \u201eLade\u201c-Knopfes, der sich auf einem einfarbigen schwarzen Hintergrund auf und ab bewegt\" class=\"wp-image-49649 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-300x125.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1024x426.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-768x320.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1536x639.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-600x250.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1200x500.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-730x304.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1460x608.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-784x326.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1568x653.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-877x365.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/666;\" \/><\/figure>\n\n\n\n<p>Ein zus\u00e4tzlicher Vorteil der barrierefreien Gestaltung von SVGs ist, dass sie dadurch auch f\u00fcr die Suche optimiert werden. SEO-Gewinn!<\/p>\n\n\n\n<h2 id=\"h2_taking-care-of-business\" class=\"wp-block-heading\">Sich um Gesch\u00e4fte k\u00fcmmern<\/h2>\n\n\n\n<p>Genau wie Elvis sich auf der B\u00fchne um das Gesch\u00e4ft k\u00fcmmerte, k\u00f6nnen SVGs Ihnen helfen, sich um das Gesch\u00e4ft auf Ihrer Website zu k\u00fcmmern. Diese vielseitigen, skalierbaren Grafiken bieten eine Welt voller M\u00f6glichkeiten f\u00fcr Webdesigner und Entwickler gleicherma\u00dfen.<\/p>\n\n\n\n<p>Von scharfen Logos und responsiven Icons bis hin zu interaktiven Animationen und zug\u00e4nglichen Visualisierungen, SVGs sind die unbesungenen Helden des <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/\" target=\"_blank\" rel=\"noreferrer noopener\">modernen Webdesigns<\/a>.<\/p>\n\n\n\n<p>Nachdem Sie diesen Leitfaden durchgesehen haben, sollten Sie sich ziemlich sicher f\u00fchlen, SVGs in Ihren Projekten zu verwenden. Aber ist Ihr Hosting der Herausforderung gewachsen?<\/p>\n\n\n\n<p>Wenn Sie sicherstellen m\u00f6chten, dass Ihre Website viele hochwertige Grafiken verarbeiten kann, sollten Sie einen Wechsel zu DreamHost in Betracht ziehen.<\/p>\n\n\n\n<p>Unsere<a href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Hosting-Pl\u00e4ne<\/a> kommen alle mit unbegrenzter Bandbreite (au\u00dfer Cloud-Hosting), was bedeutet, dass Sie sich keine Sorgen machen m\u00fcssen, wenn Ihre Website viele Besucher bekommt.<\/p>\n\n\n\n<h2 id=\"h2_fun-faqs-about-svgs\" class=\"wp-block-heading\">Lustige h\u00e4ufig gestellte Fragen \u00fcber SVGs<\/h2>\n\n\n\n<p>Wenn Sie immer noch neugierig auf SVGs sind, ist das v\u00f6llig in Ordnung. Wir haben noch mehr Wissen zu teilen. Hier ist eine kurze Zusammenfassung einiger Fragen, die wir m\u00f6glicherweise \u00fcbersehen haben:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wie konvertieren Sie SVG in JPEG?<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>Sie k\u00f6nnen dies schnell mit einem Desktop-Vektor-Editor oder einem Online-Tool wie<a href=\"https:\/\/cloudconvert.com\/svg-to-jpg\" target=\"_blank\" rel=\"noreferrer noopener\"> CloudConvert<\/a> durchf\u00fchren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-konnen-sie-svgs-direkt-in-einem-texteditor-bearbeiten\">K\u00f6nnen Sie SVGs direkt in einem Texteditor bearbeiten?<\/h3>\n\n\n\n<p>Ja! SVGs basieren auf XML, daher k\u00f6nnen Sie deren Code direkt \u00e4ndern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ist-svg-klarer-als-png\">Ist SVG klarer als PNG?<\/h3>\n\n\n\n<p>In den meisten F\u00e4llen, ja. Dies ist besonders auff\u00e4llig, wenn Sie versuchen, eine PNG-Datei zu skalieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-konnen-sie-svgs-mit-javascript-bearbeiten\">K\u00f6nnen Sie SVGs mit JavaScript bearbeiten?<\/h3>\n\n\n\n<p>Ja, k\u00f6nnen Sie. Das ist n\u00fctzlich f\u00fcr dynamische \u00c4nderungen basierend auf Benutzereingaben.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-werden-svgs-in-allen-browsern-unterstutzt\">Werden SVGs in allen Browsern unterst\u00fctzt?<\/h3>\n\n\n\n<p>SVGs werden in allen modernen Webbrowsern unterst\u00fctzt, einschlie\u00dflich Chrome, Firefox, Safari und Edge.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<p><em>Diese Seite enth\u00e4lt Affiliate-Links. Das bedeutet, dass wir eine Provision verdienen k\u00f6nnen, wenn Sie Dienstleistungen \u00fcber unseren Link kaufen, ohne dass Ihnen zus\u00e4tzliche Kosten entstehen.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>M\u00f6chten Sie scharfe, klare Grafiken, die Ihre Website in jeder Gr\u00f6\u00dfe gro\u00dfartig aussehen lassen? Erfahren Sie in unserem Leitfaden, wie Sie SVG-Dateien erstellen, optimieren und verwenden.<\/p>\n","protected":false},"author":1058,"featured_media":49599,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-the-abcs-of-svgs-understanding-image-files\",\"Die ABCs von SVGs: Verst\u00e4ndnis von Bilddateien\"],[\"h2_working-with-svgs-create-or-copy\",\"Mit SVGs arbeiten: Erstellen oder Kopieren?\"],[\"h2_how-to-create-and-edit-svg-files\",\"Wie man SVG-Dateien erstellt und bearbeitet\"],[\"h2_how-to-add-svgs-to-your-website\",\"Wie man SVGs zur Ihrer Webseite hinzuf\u00fcgt\"],[\"h2_styling-svgs-with-css\",\"SVGs mit CSS stylen\"],[\"h2_svg-masterclass-4-advanced-tips\",\"SVG-Meisterklasse: 4 Fortgeschrittene Tipps\"],[\"h2_taking-care-of-business\",\"Sich um Gesch\u00e4fte k\u00fcmmern\"],[\"h2_fun-faqs-about-svgs\",\"Lustige h\u00e4ufig gestellte Fragen \u00fcber SVGs\"]]","hide_toc":false,"footnotes":""},"categories":[14509],"tags":[],"class_list":["post-55872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet\" \/>\n<meta property=\"og:description\" content=\"M\u00f6chten Sie scharfe, klare Grafiken, die Ihre Website in jeder Gr\u00f6\u00dfe gro\u00dfartig aussehen lassen? Erfahren Sie in unserem Leitfaden, wie Sie SVG-Dateien erstellen, optimieren und verwenden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T20:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet - DreamHost Blog","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:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/","og_locale":"en_US","og_type":"article","og_title":"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet","og_description":"M\u00f6chten Sie scharfe, klare Grafiken, die Ihre Website in jeder Gr\u00f6\u00dfe gro\u00dfartig aussehen lassen? Erfahren Sie in unserem Leitfaden, wie Sie SVG-Dateien erstellen, optimieren und verwenden.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-09-23T14:00:00+00:00","article_modified_time":"2025-10-07T20:45:40+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/"},"wordCount":2505,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","articleSection":["Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/","name":"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:40+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","width":1460,"height":1095,"caption":"TCB With SVG: How To Create and Use SVG Files on Your Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/svg-dateien\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"TCB Mit SVG: Wie man SVG-Dateien auf Ihrer Website erstellt und verwendet"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"de","translations":{"de":55872,"es":49610,"en":49598,"ru":52725,"pt":55918,"pl":55924,"uk":55935,"it":68620,"fr":70813,"nl":70839},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=55872"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55872\/revisions"}],"predecessor-version":[{"id":76368,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55872\/revisions\/76368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/49599"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=55872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=55872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=55872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}