{"id":70839,"date":"2024-09-23T07:00:00","date_gmt":"2024-09-23T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70839"},"modified":"2025-10-07T13:46:21","modified_gmt":"2025-10-07T20:46:21","slug":"tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/","title":{"rendered":"TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website"},"content":{"rendered":"\n<p>Sommige mensen zeggen dat Elvis Presley de grootste artiest aller tijden was.<\/p>\n\n\n\n<p>We zeggen dat het SVG-bestandsformaat een geduchte concurrent is.<\/p>\n\n\n\n<p>Zoals je ziet, leverde Elvis altijd. Zijn persoonlijke mantra was &#8220;Zorg dragen voor zaken,&#8221; afgekort als TCB op zijn sieraden.<\/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 van Elvis op de bruiloft van George Klein met zijn TCB-ketting\" 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\">Bron<\/a><\/figcaption><\/figure>\n\n\n\n<p>En dat zou je ook kunnen zeggen voor SVG-bestanden.<\/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>Een SVG-bestand, of Scalable Vector Graphic bestand, is een bestandsformaat dat tweedimensionale afbeeldingen weergeeft. Het beschrijft hoe de afbeelding eruit moet zien met behulp van een XML-tekstformaat.<\/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                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n\n<p>Ongeacht aan welk project je werkt, dit beeldformaat zal het werk doen. Deze bestanden zijn licht, schaalbaar en uitstekend voor <a href=\"https:\/\/www.dreamhost.com\/blog\/make-your-website-accessible\/\" target=\"_blank\" rel=\"noreferrer noopener\">toegankelijkheid<\/a>. Je kunt ze zelfs bewerken met code.<\/p>\n\n\n\n<p>Heb je nog overtuiging nodig? In deze zeer leesbare gids nemen we een kijkje naar het SVG-formaat en leggen we uit hoe je deze bestanden in je eigen projecten kunt gebruiken.<\/p>\n\n\n\n<p>Klaar om te beginnen? Laten we wat minder praten en meer actie ondernemen!<\/p>\n\n\n\n<h2 id=\"h-de-abc-s-van-svg-s-het-begrijpen-van-afbeeldingsbestanden\" class=\"wp-block-heading\">De ABC&#8217;s Van SVG&#8217;s: Het Begrijpen Van Afbeeldingsbestanden<\/h2>\n\n\n\n<p>Stel je bouwt een website. Je wilt waarschijnlijk wat afbeeldingen hebben.<\/p>\n\n\n\n<p>Welk bestandstype moet je gebruiken?<\/p>\n\n\n\n<p>Je instinct is misschien JPEG of PNG. Misschien ga je los en gebruik je wat 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\">Bron<\/a><\/figcaption><\/figure>\n\n\n\n<p>Maar&#8230; wat is het verschil? Nou, hier is een vergelijking van de gebruikelijke verdachten:<\/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>Voordelen: Kleinere bestandsgroottes, geweldig voor complexe afbeeldingen.<\/li>\n\n\n\n<li>Nadelen: Verliest kwaliteit bij comprimeren, geen transparantie.<\/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>Voordelen: Verliesvrije compressie, ondersteunt transparantie.<\/li>\n\n\n\n<li>Nadelen: Grotere bestanden dan 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>Voordelen: Ondersteunt eenvoudige animaties, kleine bestandsgrootte.<\/li>\n\n\n\n<li>Nadelen: Beperkte kleuren, kan er gepixeld uitzien.<\/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>Deze formaten lijken divers. Het zijn echter allemaal voorbeelden van rasterafbeeldingen.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Raster- (of bitmap)afbeeldingen<\/a> zijn geschilderd met nauwkeurig geplaatste pixels. Ze hebben vaste afmetingen, kleuren en vormen.<\/p>\n\n\n\n<p>Deze bestandstypes zijn uitstekend voor het delen van afbeeldingen met veel details, zoals <a href=\"https:\/\/www.dreamhost.com\/blog\/photography-portfolio-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">foto&#8217;s van hoge kwaliteit<\/a>.<\/p>\n\n\n\n<p>Het nadeel is dat je het originele beeld nooit kunt veranderen of uitrekken. Je kunt er alleen overheen schilderen of meer pixels toevoegen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Waarom SVG&#8217;s Zo Nuttig Zijn<\/h3>\n\n\n\n<p>Het SVG (Scalable Vector Graphics)-formaat is anders.<\/p>\n\n\n\n<p>Vectorbestanden bevatten een reeks tekstuele instructies over hoe een afbeelding op te bouwen. Deze bestanden zijn geschreven in XML (Extensible Markup Language).<\/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 is een afkorting voor Extensible Markup Language. Deze taal gebruikt tags om informatie aan bestanden toe te voegen, die zowel door machines als mensen gelezen kan worden.<\/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                            Lees Meer                    <\/a>\n\n<\/div>\n\n\n\n<p>Wanneer je een SVG-bestand probeert te laden, bekijkt je apparaat de instructies en bouwt op aanvraag de afbeelding.<\/p>\n\n\n\n<p>Er zijn verschillende voordelen aan dit systeem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SVG&#8217;s kunnen naar <strong>elke grootte worden geschaald<\/strong> en zien er nog steeds perfect uit.<\/li>\n\n\n\n<li>Ze kunnen ook <strong>net als codebestanden worden bewerkt<\/strong>.<\/li>\n\n\n\n<li>Je kunt ze zelfs <strong>stylen met CSS<\/strong>.<\/li>\n\n\n\n<li>Omdat SVG&#8217;s uit tekst bestaan, <strong>hebben ze echt kleine bestandsgroottes<\/strong>.<\/li>\n\n\n\n<li>Dit betekent dat ze <strong>minder opslagruimte<\/strong> op je webserver innemen<strong>.<\/strong><\/li>\n\n\n\n<li>En ze kunnen <strong>sneller laden<\/strong> dan rasterafbeeldingen.<\/li>\n<\/ul>\n\n\n\n<p>Een ander voordeel van het gebruik van SVG&#8217;s is <strong>verbeterde toegankelijkheid. <\/strong>Je kunt deze bestanden lokaal op apparaten aanpassen, volgens de behoeften van de gebruiker, en schermlezers kunnen ze interpreteren.<\/p>\n\n\n\n<p>Het nadeel van SVG&#8217;s is dat ze erg groot kunnen worden als je veel details toevoegt. Bovendien kun je ze niet op dezelfde manier optimaliseren als rasterafbeeldingen. Als je fotografie wilt delen, kun je waarschijnlijk beter een JPEG gebruiken.<\/p>\n\n\n\n<p>Maar voor de meeste andere visuele inhoud is het SVG-formaat een sterke optie.<\/p>\n\n\n<figure class=\"wp-block-table\">\n<table class=\"has-fixed-layout\">\n<tbody>\n<tr>\n<td><strong>Functie<\/strong><\/td>\n<td><strong>SVG<\/strong><\/td>\n<td><strong>JPEG<\/strong><\/td>\n<td><strong>PNG<\/strong><\/td>\n<td><strong>GIF<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Schaalbaarheid<\/td>\n<td>Sterk \u2705<\/td>\n<td>Nee \u274c<\/td>\n<td>Nee \u274c<\/td>\n<td>Nee \u274c<\/td>\n<\/tr>\n<tr>\n<td>Bestandsgrootte<\/td>\n<td>Meestal klein \u2705<\/td>\n<td>Kan klein zijn \u2705<\/td>\n<td>Vaak groot \u274c<\/td>\n<td>Klein voor eenvoudige afbeeldingen \u2705<\/td>\n<\/tr>\n<tr>\n<td>Transparantie<\/td>\n<td>Jazeker \u2705<\/td>\n<td>Nee \u274c<\/td>\n<td>Jazeker \u2705<\/td>\n<td>Ja, maar beperkt \u26a0\ufe0f<\/td>\n<\/tr>\n<tr>\n<td>Animatie<\/td>\n<td>Zeker weten! ?<\/td>\n<td>Nee \u274c<\/td>\n<td>Nee \u274c<\/td>\n<td>Alleen basis \u26a0\ufe0f<\/td>\n<\/tr>\n<tr>\n<td>Geschikt voor<\/td>\n<td>Grafieken, iconen, logo&#8217;s&nbsp;<\/td>\n<td>Foto&#8217;s<\/td>\n<td>Afbeeldingen die transparantie vereisen<\/td>\n<td>Eenvoudige animaties<\/td>\n<\/tr>\n<tr>\n<td>Bewerkbaarheid<\/td>\n<td>Met code! ?<\/td>\n<td>Nee \u274c<\/td>\n<td>Nee \u274c<\/td>\n<td>Nee \u274c<\/td>\n<\/tr>\n<tr>\n<td>Browserondersteuning<\/td>\n<td>De meeste moderne browsers \u2705<\/td>\n<td>Alle browsers \u2705<\/td>\n<td>Alle browsers \u2705<\/td>\n<td>Alle browsers \u2705<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n<h3 class=\"wp-block-heading\">Veelvoorkomend Gebruik Voor SVG-Afbeeldingen<\/h3>\n\n\n\n<p>Hoewel SVG&#8217;s vrij veelzijdig zijn, verschijnen ze meestal in webdesign als:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pictogrammen:<\/strong> Van sociale media links tot winkelwagenknoppen, SVG-pictogrammen zien er scherp uit op elk apparaat.<\/li>\n\n\n\n<li><strong>Logo&#8217;s:<\/strong> Als je jouw <a href=\"https:\/\/www.dreamhost.com\/blog\/make-logo-online-free\/\" target=\"_blank\" rel=\"noreferrer noopener\">merklogo<\/a> als een SVG opslaat, ziet het er perfect uit overal \u2014 van kleine mobiele schermen tot enorme reclameborden.<\/li>\n\n\n\n<li><strong>Illustraties:<\/strong> Veel websites gebruiken nu SVG-illustraties in plaats van stockafbeeldingen. Zelfs wanneer de grafische afbeeldingen zeer gedetailleerd zijn, schalen ze perfect.<\/li>\n\n\n\n<li><strong>Animaties:<\/strong> Ja, SVG&#8217;s kunnen bewegen! Je kunt ze animeren voor die extra flair op je website, zoals een draaiend logo of een dansend karakter.<\/li>\n\n\n\n<li><strong>Infographics:<\/strong> Omdat SVG&#8217;s schaalbaar zijn, kun je ze ook gebruiken om interactieve <a href=\"https:\/\/www.dreamhost.com\/blog\/ga4-explorations-template-gallery\/\" target=\"_blank\" rel=\"noreferrer noopener\">datavisualisaties<\/a> te bouwen. Heel gaaf!<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h2_working-with-svgs-create-or-copy\" class=\"wp-block-heading\">Werken Met SVG&#8217;s: Cre\u00ebren Of Kopi\u00ebren?<\/h2>\n\n\n\n<p>Oke, dat is genoeg lofzang. Het is tijd om aan het werk te gaan.<\/p>\n\n\n\n<p>Als je SVG&#8217;s wilt integreren in je digitale projecten, moet je kant-en-klare ontwerpen pakken of je eigen grafische ontwerpen vanaf nul maken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gratis SVG&#8217;s Vinden<\/h3>\n\n\n\n<p>Het gebruiken van iemand anders zijn ontwerpen is de makkelijkere optie. En gelukkig zijn er duizenden SVG&#8217;s beschikbaar om online te downloaden.<\/p>\n\n\n\n<p>Veel zijn gratis voor persoonlijke projecten, maar voor commercieel gebruik moet je mogelijk betalen.<\/p>\n\n\n\n<p>Hier zijn enkele van onze favoriete bronnen:<\/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>: Een populair pakket van SVG-iconen.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freepik<\/a>: Enorme database van vectorafbeeldingen, illustraties en iconen.<\/li>\n\n\n\n<li><a href=\"https:\/\/lineicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lineicons<\/a>: Pakket van meer dan 8.400 eenvoudige, schone iconen.<\/li>\n\n\n\n<li><a href=\"https:\/\/freesvg.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free SVG<\/a>: Bibliotheek van volledig gratis SVG-illustraties.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.opendoodles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Doodles<\/a>: Gratis kleurrijke, karakter-achtige illustraties van mensen.<\/li>\n\n\n\n<li><a href=\"https:\/\/iconscout.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IconScout<\/a>: Doorzoekbare bibliotheek van meer dan 9,5 miljoen assets, inclusief gratis en betaalde iconen, illustraties, logo&#8217;s en meer.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.drawkit.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DrawKit<\/a>: Meerdere pakketten van 2D\/3D-illustraties, gratis en premium.<\/li>\n\n\n\n<li><a href=\"https:\/\/undraw.co\/illustrations\" target=\"_blank\" rel=\"noreferrer noopener\">unDraw<\/a>: Veel geweldige, gratis SVG-illustraties.<\/li>\n<\/ul>\n\n\n\n<p>Onthoud dat je alle SVG&#8217;s die je downloadt kunt bewerken. Dus, je kunt gratis bestanden gebruiken als een startpunt voor je eigen creaties.<\/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\">Hoe SVG-Bestanden Te Maken en Bewerken<\/h2>\n\n\n\n<p>Kun je niet vinden wat je online nodig hebt? Maak je geen zorgen. Het bewerken van SVG&#8217;s is een fluitje van een cent.<\/p>\n\n\n\n<p>Hier is een snelle doorloop:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Kies Je Software<\/h3>\n\n\n\n<p>De gemakkelijkste manier om SVG&#8217;s te bewerken is met een vectorafbeeldingen-editor. Hier zijn enkele populaire opties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adobe Illustrator<\/strong> ($$$): De zwaargewicht kampioen. Prijzig, maar krachtig.<\/li>\n\n\n\n<li><strong>Inkscape<\/strong> (gratis): Het gratis alternatief dat indruk maakt.<\/li>\n\n\n\n<li><strong>Figma<\/strong> ($): Geweldig voor samenwerkend ontwerpwerk.<\/li>\n\n\n\n<li><strong>Sketch<\/strong> ($): Een lichter alternatief voor Illustrator, populair bij ontwerpers van interfaces.<\/li>\n<\/ul>\n\n\n\n<p>We baseren de rest van deze handleiding op Inkscape, maar het proces ziet er in de meeste vectorbewerkingsapps heel vergelijkbaar uit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Stel Je Canvas In<\/h3>\n\n\n\n<p>Als je helemaal opnieuw begint, moet je een canvas voor je werk maken. In Inkscape, ga naar <strong>Bestand <\/strong>&gt;<strong> Nieuw<\/strong> en kies de afmetingen voor je nieuwe afbeelding.<\/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 van de optie &quot;Nieuw&quot; onder Bestand in het bovenste navigatiemenu\" 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>Als je een bestaand SVG-document wilt bewerken, ga dan naar <strong>Bestand &gt; Openen<\/strong> om de editor te starten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Teken Je Ontwerp<\/h3>\n\n\n\n<p>Het belangrijkste gereedschap bij vectorbewerking is het <strong>Bezier<\/strong>-gereedschap. Je kunt het selecteren uit de werkbalk aan de linkerkant van je werkruimte. Het pictogram ziet eruit als een vulpen die een gebogen lijn tekent.<\/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=\"schermafbeelding locatie van het Bezier-gereedschap dat lijkt op een inktpenvuller naast een getrokken lijn\" 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>Deze tool stelt je in staat om met een paar klikken rechte lijnen en perfecte bochten te maken.<\/p>\n\n\n\n<p>Elke vorm die je maakt bevat individuele paden en punten, die worden opgenomen in de onderliggende XML-code.<\/p>\n\n\n\n<p>Met de Bezier-tool kun je eenvoudig teruggaan en deze punten en paden aanpassen nadat je ze hebt gemaakt. Zodra je tevreden bent met de structuur, voeg je <a href=\"https:\/\/www.dreamhost.com\/blog\/website-color-schemes\/\" target=\"_blank\" rel=\"noreferrer noopener\">je eigen kleuren<\/a> toe via het <strong>Objecteigenschappen<\/strong> paneel.<\/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=\"bovenste navigatiebalk met uitklapmenu van &quot;Object&quot; naar &quot;Eigenschappen van object&quot;\" 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>Eigenschappen van objecten verschijnen in het rechtermenu.<\/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 van het eigenschappenmenu van het object nu geopend in het rechter menu met kleur- en patroonvariaties.\" 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>Pro tip:<\/strong> Wil je dieper duiken in vectorbewerking? Inkscape heeft een geweldige bibliotheek met gratis tutorials recht<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. Opslaan Als SVG<\/h3>\n\n\n\n<p>Zodra je tevreden bent met je grafische ontwerp, ga naar <strong>Bestand &gt;<\/strong><strong>Opslaan als<\/strong>, en kies <strong>SVG<\/strong> als je formaat.<\/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=\"Uitklapmenu van &quot;file&quot; naar &quot;open&quot; \" 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>Geef het een coole naam en klik op opslaan!<\/p>\n\n\n\n<h2 id=\"h2_how-to-add-svgs-to-your-website\" class=\"wp-block-heading\">Hoe Voeg Je SVG&#8217;s Toe Aan Je Website<\/h2>\n\n\n\n<p>Je hebt je vector-meesterwerk gemaakt. Nu verdient de wereld het om het te zien.&nbsp;<\/p>\n\n\n\n<p>Je kunt SVG&#8217;s in de HTML van je website insluiten. Alles wat je nodig hebt is een <strong><code>&lt;img&gt;<\/code><\/strong> tag die naar je bestand wijst. Het zou er ongeveer zo uit moeten zien:<\/p>\n\n\n\n<p><code>&lt;img src=\"my-awesome-svg.svg\" alt=\"Mijn Geweldige SVG\"&gt;<\/code><\/p>\n\n\n\n<p>Als alternatief kun je de XML-code van je SVG-bestand rechtstreeks in je webpagina invoegen met behulp van de <strong><code>&lt;svg&gt;<\/code><\/strong> tag.<\/p>\n\n\n\n<p>Hier is een voorbeeld:<\/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>Deze code zal een mooie ronde knop maken, met een rode omtrek en een groen interieur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SVG Inschakelen In WordPress<\/h3>\n\n\n\n<p>Het toevoegen van afzonderlijke afbeeldingen via HTML is een zeer langzaam proces. Je zou er de voorkeur aan kunnen geven om SVG&#8217;s te uploaden via je CMS (contentmanagementsysteem).<\/p>\n\n\n\n<p>Maar er is een probleem voor WordPress-gebruikers.<\/p>\n\n\n\n<p>Standaard ondersteunt WordPress geen SVG-uploads. Dit is omdat kwaadwillende gebruikers SVG&#8217;s kunnen gebruiken om malware te verspreiden.<\/p>\n\n\n\n<p>De gemakkelijkste manier om SVG&#8217;s te activeren is door een plugin te installeren zoals<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Safe SVG<\/a> of<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noreferrer noopener\"> SVG Support<\/a>. Deze tools controleren elke upload om er zeker van te zijn dat er niets vervelends verborgen zit.<\/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 van het Safe SVG downloadscherm\" 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>Je kunt dan SVG&#8217;s uploaden en invoegen via de WordPress Media Bibliotheek. Navigeer simpelweg naar <strong>Media &gt; Nieuw toevoegen<\/strong>, en kies de afbeeldingen die je wilt opnemen.<\/p>\n\n\n\n<h2 id=\"h2_styling-svgs-with-css\" class=\"wp-block-heading\">SVG&#8217;s Stijlen Met CSS<\/h2>\n\n\n\n<p>Als je SVG-bestanden insluit met de <strong><code>&lt;svg&gt;<\/code><\/strong> tag, kun je met CSS aanpassen hoe je afbeeldingen eruit zullen zien.<\/p>\n\n\n\n<p>Stel je hebt een groene afbeelding gemaakt, maar je wilt dat deze rood lijkt op je website. In plaats van een nieuwe kopie te maken, kun je gewoon de volgende stijl schrijven:<\/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>Het <strong><code>stroke<\/code><\/strong>-attribuut bepaalt welke kleur de omtrek van je grafiek moet zijn. Ondertussen regelt het <strong><code>fill<\/code><\/strong>-attribuut de kleur tussen de lijnen.<\/p>\n\n\n\n<p><strong>Pro tip: <\/strong>Er zijn<a href=\"https:\/\/css-tricks.com\/svg-properties-and-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <em>veel meer<\/em><\/a> attributen om mee te spelen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Je SVG Afbeeldingen Responsive Maken<\/h3>\n\n\n\n<p>SVG-bestanden zijn oneindig schaalbaar, dus je kunt ze gebruiken in responsieve ontwerpen. Het vereist slechts een beetje CSS-magie.<\/p>\n\n\n\n<p>Hier is een stapsgewijze handleiding:<\/p>\n\n\n\n<p><strong>1. Voeg je afbeelding in met de <code>&lt;svg&gt;<\/code>-tag.<\/strong> Dit betekent dat je wijzigingen kunt aanbrengen via CSS.<\/p>\n\n\n\n<p><strong>2. Verwijder de hoogte- en breedteafmetingen. <\/strong>Hierdoor past je SVG zich aan zijn container aan. Zorg ervoor dat het <strong><code>viewBox<\/code> <\/strong>gedeelte behouden blijft. Het zou er ongeveer zo uit moeten zien:<\/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. Stel de maximale grootte van je SVG in.<\/strong> Dit voorkomt dat de afbeelding buiten zijn container valt. Bijvoorbeeld:<\/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>En je bent klaar!<\/p>\n\n\n\n<p><strong>Professionele tip:<\/strong> Als dit allemaal wat technisch klinkt, probeer dan <a href=\"https:\/\/app.zipwp.com\/pricing\/?aff=933feb1e\" target=\"_blank\" rel=\"noreferrer noopener\">ZipWP<\/a>. Het is een door AI aangedreven websitebouwer die de styling voor je regelt.<\/p>\n\n\n\n<h2 id=\"h2_svg-masterclass-4-advanced-tips\" class=\"wp-block-heading\">SVG Masterclass: 4 Gevorderde Tips<\/h2>\n\n\n\n<p>We hebben de basis van het maken en delen van SVG&#8217;s behandeld. Om deze gids af te ronden, laten we eens kijken naar enkele geavanceerde technieken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Animeer Je SVG-Grafieken<\/h3>\n\n\n\n<p>Wist je dat je jouw SVG&#8217;s kunt laten dansen? Ja, <a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">animatie<\/a> werkt op dit bestandstype.<\/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=\"eenvoudige animatie van een &quot;Laden&quot; knop die op en neer beweegt op de effen zwarte achtergrondafbeelding\" 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>Zoals bij de originele afbeelding, kun je je grafieken animeren met eenvoudige XML-code. Voeg gewoon een <strong><code>&lt;animate&gt;<\/code> <\/strong>element toe binnen je vorm om de beweging te starten.<\/p>\n\n\n\n<p>Het zou er ongeveer zo uit moeten zien:<\/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>Je kunt deze techniek gebruiken om een beetje beweging aan iconen toe te voegen, een pagina-laadindicator te cre\u00ebren of zelfs geanimeerde advertenties te ontwerpen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Gebruik SVG-sprites Voor Snellere Laadtijden<\/h3>\n\n\n\n<p>SVG sprites zijn als een &#8216;greatest hits&#8217;-album voor je iconen. In plaats van tientallen losse icoonbestanden, bundel je ze allemaal in \u00e9\u00e9n SVG.<\/p>\n\n\n\n<p>Dit betekent dat je slechts \u00e9\u00e9n HTTP-verzoek per pagina hoeft te maken, ongeacht hoeveel iconen je gebruikt. Het is een geweldige manier om laadtijden te verminderen en bandbreedte te besparen.<\/p>\n\n\n\n<p>Veel iconenpakketten worden tegenwoordig in spritevorm geleverd. Je kunt <a href=\"https:\/\/hackernoon.com\/how-to-create-svg-sprite-with-icons\" target=\"_blank\" rel=\"noreferrer noopener\">ook je eigen maken<\/a>.<\/p>\n\n\n\n<p>Om een specifiek pictogram op je site te integreren, lokaliseer je eenvoudig het gebied van het sprite-bestand waar dat pictogram is opgeslagen. Dit kun je doen met behulp van basis CSS-code:<\/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>Professionele tip: <\/strong>We raden aan om een online tool zoals<a href=\"https:\/\/www.toptal.com\/developers\/css\/sprite-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\"> CSS Sprites Generator<\/a> te gebruiken om de juiste afstanden te berekenen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Optimaliseer Je SVG-bestanden Voor Betere Prestaties<\/h3>\n\n\n\n<p>Hoewel SVG-bestanden vrij klein beginnen, kun je ze optimaliseren om ze nog lichter te maken.<\/p>\n\n\n\n<p>Zo doe je het:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gebruik een tool zoals<\/strong><a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> SVGOMG<\/strong><\/a>. Ja, dat bestaat echt. Het is een geweldige kleine web app die je toestaat SVG&#8217;s te comprimeren zonder kwaliteitsverlies.<\/li>\n\n\n\n<li><strong>Vereenvoudig paden waar mogelijk<\/strong>. Ingewikkelde vormen kunnen veranderen in grote hoeveelheden XML-code. Veel vectorafbeeldingseditors hebben gereedschappen voor deze taak. (Het bevindt zich onder <strong>Pad &gt; Vereenvoudigen<\/strong> in Inkscape).<\/li>\n\n\n\n<li><strong>Overweeg lazy loading voor SVG&#8217;s onderaan de pagina<\/strong>. Door het laden van afbeeldingen lager op de pagina uit te stellen, kun je de impact van meerdere afbeeldingen verminderen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Maak Je Grafische Elementen Toegankelijk<\/h3>\n\n\n\n<p>Omdat SVG&#8217;s op tekst gebaseerde bestanden zijn, zijn ze gemakkelijk te begrijpen voor schermlezers en andere hulpsoftware.<\/p>\n\n\n\n<p>Met dat gezegd, zijn er nog stappen die je kunt nemen om ze nog toegankelijker te maken:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Voeg <code>&lt;title&gt;<\/code> en <code>&lt;desc&gt;<\/code> toe aan je SVG-bestanden<\/strong>. Deze elementen bieden beschrijvingen van de grafiek, wat vooral handig is voor gebruikers die afhankelijk zijn van schermlezers.<\/li>\n\n\n\n<li><strong>Voeg een <code>role=\"img\"<\/code> attribuut toe<\/strong>. Dit informeert ondersteunende technologie\u00ebn dat de SVG een afbeelding is.<\/li>\n\n\n\n<li><strong>Vul het <code>aria-labelledby<\/code> attribuut in.<\/strong> Dit moet verwijzen naar de ID&#8217;s van de <code>&lt;title&gt;<\/code> en <code>&lt;desc&gt;<\/code> elementen, en ze koppelen als labels voor de afbeelding.<\/li>\n\n\n\n<li><strong>Voor complexere SVG&#8217;s, geef alt-tekst<\/strong>. Beschrijf de afbeelding, zodat schermlezers minder te interpreteren hebben.<\/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=\"eenvoudige animatie van een &quot;Laden&quot; knop die op en neer beweegt op de effen zwarte achtergrondafbeelding\" 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>Een extra voordeel van het super-toegankelijk maken van SVG&#8217;s is dat je ze ook optimaliseert voor zoekopdrachten. SEO-overwinning!<\/p>\n\n\n\n<h2 id=\"h2_taking-care-of-business\" class=\"wp-block-heading\">Zorg Voor De Zaak<\/h2>\n\n\n\n<p>Net zoals Elvis zorgde voor zaken op het podium, kunnen SVG&#8217;s je helpen zaken te regelen op je website. Deze veelzijdige, schaalbare grafieken bieden een wereld aan mogelijkheden voor webontwerpers en ontwikkelaars.<\/p>\n\n\n\n<p>Van strakke logo&#8217;s en responsieve iconen tot interactieve animaties en toegankelijke visuals, SVG&#8217;s zijn de onbezongen helden van<a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\"> modern webdesign<\/a>.<\/p>\n\n\n\n<p>Nadat je deze gids hebt bekeken, moet je je behoorlijk zelfverzekerd voelen over het gebruik van SVG&#8217;s in je projecten. Maar is jouw hosting wel opgewassen tegen de test?<\/p>\n\n\n\n<p>Als je wilt garanderen dat je site een hoop hoogwaardige grafische afbeeldingen aankan, overweeg dan over te schakelen naar DreamHost.<\/p>\n\n\n\n<p>Onze<a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\"> hosting plannen<\/a> komen allemaal met ongemeten bandbreedte (uitgezonderd cloud hosting), wat betekent dat je je geen zorgen hoeft te maken als je site veel bezoekers krijgt.<\/p>\n\n\n\n<h2 id=\"h2_fun-faqs-about-svgs\" class=\"wp-block-heading\">Leuke Veelgestelde Vragen Over SVG&#8217;s<\/h2>\n\n\n\n<p>Als je nog steeds nieuwsgierig bent naar SVG&#8217;s, is dat helemaal prima. We hebben meer kennis om te delen. Hier is een snel overzicht van enkele vragen die we mogelijk hebben gemist:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hoe converteer je SVG naar JPEG?<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>Je kunt dit snel doen met een desktop vector editor of een online tool zoals<a href=\"https:\/\/cloudconvert.com\/svg-to-jpg\" target=\"_blank\" rel=\"noreferrer noopener\"> CloudConvert<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-kun-je-svg-s-direct-bewerken-in-een-teksteditor\">Kun je SVG&#8217;s direct bewerken in een teksteditor?<\/h3>\n\n\n\n<p>Ja! SVG&#8217;s zijn op XML gebaseerd, dus je kunt hun code rechtstreeks aanpassen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-is-svg-duidelijker-dan-png\">Is SVG duidelijker dan PNG?<\/h3>\n\n\n\n<p>In de meeste gevallen wel. Dit is vooral merkbaar als je probeert een PNG-bestand te vergroten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-kun-je-svg-s-bewerken-met-javascript\">Kun je SVG&#8217;s bewerken met JavaScript?<\/h3>\n\n\n\n<p>Ja, dat kan je. Dit is handig voor dynamische wijzigingen op basis van gebruikersinvoer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-worden-svg-s-ondersteund-in-alle-browsers\">Worden SVG&#8217;s ondersteund in alle browsers?<\/h3>\n\n\n\n<p>SVG&#8217;s worden ondersteund in alle moderne webbrowsers, inclusief Chrome, Firefox, Safari en 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>Deze pagina bevat affiliate links. Dit betekent dat we een commissie kunnen verdienen als je diensten koopt via onze link zonder extra kosten voor jou.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wil je scherpe, duidelijke graphics die jouw website er op elke schaal fantastisch uit laten zien? Leer hoe je SVG-bestanden kunt maken, optimaliseren en gebruiken met onze gids.<\/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":"Wil je scherpe, duidelijke afbeeldingen die je website er op elke schaal prachtig uit laten zien? Leer hoe je SVG-bestanden maakt, optimaliseert en gebruikt met onze gids.","toc_headlines":"[[\"h-the-abcs-of-svgs-understanding-image-files\",\"De ABC's Van SVG's: Het Begrijpen Van Afbeeldingsbestanden\"],[\"h2_working-with-svgs-create-or-copy\",\"Werken Met SVG's: Cre\u00ebren Of Kopi\u00ebren?\"],[\"h2_how-to-create-and-edit-svg-files\",\"Hoe SVG-Bestanden Te Maken en Bewerken\"],[\"h2_how-to-add-svgs-to-your-website\",\"Hoe Voeg Je SVG's Toe Aan Je Website\"],[\"h2_styling-svgs-with-css\",\"SVG's Stijlen Met CSS\"],[\"h2_svg-masterclass-4-advanced-tips\",\"SVG Masterclass: 4 Gevorderde Tips\"],[\"h2_taking-care-of-business\",\"Zorg Voor De Zaak\"],[\"h2_fun-faqs-about-svgs\",\"Leuke Veelgestelde Vragen Over SVG's\"]]","hide_toc":false,"footnotes":""},"categories":[14942],"tags":[],"class_list":["post-70839","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-nl"],"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 met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Wil je scherpe, duidelijke afbeeldingen die je website er op elke schaal prachtig uit laten zien? Leer hoe je SVG-bestanden maakt, optimaliseert en gebruikt met onze gids.\" \/>\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\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website\" \/>\n<meta property=\"og:description\" content=\"Wil je scherpe, duidelijke afbeeldingen die je website er op elke schaal prachtig uit laten zien? Leer hoe je SVG-bestanden maakt, optimaliseert en gebruikt met onze gids.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/\" \/>\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:46:21+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 met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website - DreamHost Blog","description":"Wil je scherpe, duidelijke afbeeldingen die je website er op elke schaal prachtig uit laten zien? Leer hoe je SVG-bestanden maakt, optimaliseert en gebruikt met onze gids.","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\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/","og_locale":"en_US","og_type":"article","og_title":"TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website","og_description":"Wil je scherpe, duidelijke afbeeldingen die je website er op elke schaal prachtig uit laten zien? Leer hoe je SVG-bestanden maakt, optimaliseert en gebruikt met onze gids.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/","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:46:21+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\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:46:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/"},"wordCount":2419,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","articleSection":["Websiteontwerp"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/","name":"TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#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:46:21+00:00","description":"Wil je scherpe, duidelijke afbeeldingen die je website er op elke schaal prachtig uit laten zien? Leer hoe je SVG-bestanden maakt, optimaliseert en gebruikt met onze gids.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#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\/nl\/tcb-met-svg-hoe-svg-bestanden-te-maken-en-te-gebruiken-op-je-website-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website"}]},{"@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":"nl","translations":{"nl":70839,"es":49610,"en":49598,"ru":52725,"de":55872,"pt":55918,"pl":55924,"uk":55935,"it":68620,"fr":70813},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70839","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=70839"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70839\/revisions"}],"predecessor-version":[{"id":76378,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70839\/revisions\/76378"}],"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=70839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}