{"id":11741,"date":"2020-09-07T15:00:43","date_gmt":"2020-09-07T13:00:43","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=11741"},"modified":"2020-12-04T10:23:43","modified_gmt":"2020-12-04T09:23:43","slug":"add-svg-files-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-svg-files-to-wordpress\/","title":{"rendered":"How to Add SVG Files to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Images: you can&#8217;t have a website without them, but they sure can be a pain in the neck. For all the good they do in attracting attention and making your website more appealing, they can also be a cause of lots of trouble. Images that are too big can, for example, slow down your website&#8217;s loading speed, which is only one of the many reasons you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">optimize your images<\/a> before uploading them to your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But not all images are made the same. More precisely, not all types of image files pose the same challenges when you try to use them on your website. Anyone who ever tried to add SVG files to WordPress knows that these files come with a unique set of advantages, as well as obstacles.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we&#8217;ll show you:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-svg-files\">What Are SVG Files<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-you-can't-just-upload-an-svg-file\">Why You Can&#8217;t Just Upload an SVG File<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#safe-way-to-add-svg-files-to-wordpress\">A Safe Way to Add SVG Files to WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-svg-files\"><\/a>What Are SVG Files?<\/h2>\n<p>[\/vc_column_text][vc_column_text]SVG files are a type of vector image files \u2014 SVG stands for Scalable Vector Graphics. Vector files are composed in a completely different way than your raster image files such as JPEG or PNG. The raster files use lots and lots of tiny units of color \u2013 pixels \u2013 to create an image. <strong>Vector files, on the other hand, use mathematical formulas that instruct how they should be displayed<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The S in SVG \u2014 scalable \u2014 is one of the main reasons why SVG files are great. <strong>With an SVG, you can increase the size of the image without having to compromise any of the image quality<\/strong>. With JPEGs, you get the same effect you can see when you zoom in a JPEG photo on any device \u2014 a fast loss of quality.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And while it&#8217;s true that SVG files can&#8217;t display the same type of images as your run of the mill image files, <strong>they can come in incredibly handy for things such as logos<\/strong>. And you can also find lots of vector art images that can look remarkably interesting on a website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, maybe the best thing about SVG files is how lite they are. They are not nearly as big as other image files. <strong>And not only does that mean that you can get images that can scale up to large sizes without the added bulk, but it also means Google will need less time to index them<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-you-can't-just-upload-an-svg-file\"><\/a>Why Can&#8217;t You Just Upload an SVG File?<\/h2>\n<p>[\/vc_column_text][vc_column_text]But if SVG files are that great, how come you get this message when you try to upload an SVG file in your website&#8217;s Media Library?[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/SVG-Fail-Upload.jpg\" class=\"attachment-full size-full\" alt=\"SVG Fail Upload\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/SVG-Fail-Upload.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/SVG-Fail-Upload-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/SVG-Fail-Upload-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The problem with SVG files, and the reason why WordPress doesn&#8217;t regularly give you a chance to upload them, is in the very way they&#8217;re built. <strong>It&#8217;s possible to inject malicious code into the file, and they&#8217;re also vulnerable to different kinds of attacks<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>In short \u2014 SVG files can be dangerous, and the WordPress community knows it<\/strong>. There have long been talks about including support for SVG files into core WordPress, but it&#8217;s still up to you to take on the risk.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"safe-way-to-add-svg-files-to-wordpress\"><\/a>What&#8217;s a Safe Way to Add SVG Files to WordPress?<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>The good news is that there are ways you can upload an SVG file to your WordPress website and do it safely<\/strong>. As always, when you can&#8217;t do something with a core WordPress feature, you can rely on a plugin to help you do it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time, however, you should look beyond the plugins that make your website take up SVG files. You can do that on your own by adding a couple of lines of code to the <em>functions.php<\/em> file. <strong>It would help if you made sure the plugin you use can also sanitize the image, making it safe to upload<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Safe SVG<\/a> is a WordPress plugin that can do both \u2014 sanitize your files, and let you upload them to WordPress. So head over to <em><strong>Plugins &gt; Add New<\/strong><\/em>, and search for the plugin. <strong>After you&#8217;ve found it in the search results, install and activate it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Safe SVG Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Plugin.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After installing and activating the plugin, you can head back to <em><strong>Media &gt; Add New<\/strong><\/em>, and try uploading the SVG file again. <strong>You&#8217;ll see a different result this time, as you&#8217;ll soon upload the sanitized version of the file to your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Files.jpg\" class=\"attachment-full size-full\" alt=\"Safe SVG Upload Files\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Files.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Files-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Files-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you head to the media library, you&#8217;ll be able to preview the file you&#8217;ve uploaded just like any other file.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Image.jpg\" class=\"attachment-full size-full\" alt=\"Safe SVG Upload Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Safe-SVG-Upload-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That&#8217;s pretty much all you can do with the free version of Safe SVG. <strong>The plugin also has a paid, Pro version, that gives you further controls you might use to enhance your website&#8217;s security<\/strong>. For example, the Pro version will allow you to optimize the images and restrict who can upload them.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let&#8217;s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]SVG files can be a great way to include additional, scalable, visual elements to your WordPress website. But if you want to add SVG files to WordPress, you need to make sure you do it safely and responsibly.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To cover the corners \u2014 enable the upload and make the file safe \u2014 the Safe SVG plugin is a great choice. If you want more control and additional safety features, you should either consider the Pro version of the plugin or a combination of tools that handle sanitization and uploading separately.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need a quick and easy way to add SVG files to your WordPress website? We&#8217;ll show you the quickest one \u2014 just be sure you sanize the files first.<\/p>\n","protected":false},"author":9295,"featured_media":11906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-11741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=11741"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/11906"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=11741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=11741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=11741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}