Do you want to add SVG files to your WordPress site?
By default, WordPress allows you to upload all popular image, audio, and video file formats, but SVG is not among them. Potential security concerns exist, but there are ways to safely use them.
In this video, we will show you how to easily add SVG in WordPress.
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
SVG or scalable vector graphics is a Great image format to use on a website It's very small in size it's infinitely Scalable to any size you want and it has Great image quality at every given size So you should be using it on your Website right well there's only one Problem if you drag and drop an SVG file On your WordPress website like this You'll get an error like this because WordPress does not natively support SVG Files out of the box so in this video Let's fix that let's enable support for SVG files on your WordPress website in This video Let's Go Now typically if you want to add any Feature to your WordPress website all You have to do is go to the plugin Section go to add new find or add some Keywords and find a plugin that will Give you the functionality that you're Looking for exactly same thing happens When you search for SVG in the plugins Directory and you find tons of plugins That will provide you the SVG support That you're looking for however I would Not recommend any of these Solutions Even though they will work perfectly Fine why is that let me explain SVG Support inside WordPress is not a matter Of can't it's a matter of won't what This means is that WordPress does have The ability to support SVG files they Specifically have disabled or disallowed
This feature for some particular reasons Which I'll talk about later in this Video so make sure to watch till the end Now what does this mean for end users Like you who just want to enable the SVG Support on your website the answer is That you don't need to add the Functionality using a plugin you just Need to tell WordPress hey WordPress I Want to use SVG files on my website Please enable the functionality and Technically all these plugins will do The exact same thing they won't add the Functionality they'll just enable the Function reality now you might be Wondering WordPress is not my best Friend who'll just listen to me if I say The words enable SVG support how do I Communicate with WordPress and the Answer to that is using Code Snippets So in essence all you have to do is add A little bit of code snippet to your WordPress website which is easy I Promise and not have to install a plugin Which you'll have to manage update and Keep track of how do you do it let me Explain now so what we're gonna do is Instead of editing our WordPress files Manually and adding the code snippet There which can work but It's Tricky and Risky for beginners because they can Make errors we're going to install Plugin on a site which will help manage And add code snippets on our site and I
Might be wondering if you were just Suggesting not to have the SVG plugin But now you're saying let's install Another plugin what's the matter well Let me explain the SVG plugins that I Was recommending you not installed will All just add a small bit of Functionality to your site and of course You can also use the code snippet that I'm going to show you to have that Functionality on your website already But the ability to manage and add code Snippets on your website is a much more Powerful and much more useful Functionality that you should have on Your website because let's say today you Want to add SVG support to your website But tomorrow you might want to add Another code snippet to your site for Let's say example a marketing pixel from Google analytics from Google search Console Pinterest Baidu any other Marketing platform and then you might Want to add another custom functionality To your site and maybe another or you Want to might have add the Facebook Pixel to your site all of these Functionalities and many many more Functionalities will require you to have The ability to add code snippets on your Site and as a beginner if you have to Edit your WordPress files all the time Just to add these functionality can be Very risky that's why it's worthwhile to
Have a dedicated plugin on your site That helps you add and manage code Snippets on your site I hope that Explains let me explain now how will you Add the code snippet and which plugin I'm gonna recommend so what I want you To do is go to your site go to plugins Go to add new and search for a plugin Called WP code this is the plugin we'll Be using it has 1 million active Installs tons of five star agents is a Fantastic plugin and this plugin has a Bit of an extended functionality this is Going to be or which is going to be very Very useful so let's install the plugin First activate it and I'm going to Explain what that specific functionality Is so WP code is now installed on the Site and now we have the ability to add Code Snippets and manage them on a Website and you know you might be Wondering if charge where is the code Snippet that we want to install right we Need to have the code snippet for us to Paste the curse Nipper well this is Where WP code makes it really really Easy and interesting if you go to WP Codes code Snippets yeah or you can use This menu you'll see this is where you Manage the code Snippets there are a Couple of Snippets already demonstrate Or added for demonstration they are Disabled by the way these are not Enabled but if you go to add new the
Ability or where you'll add Snippets You'll see that apart from having the Ability to just add a blank code snippet This you have or WP code gives you tons Of different code Snippets already Created for you that you can just Install on the site good example you Have the code snippet for allow SVG Files upload right here you don't need To go to an external site and figure out Or just experiment with the Shady piece Of code it's all already created for you For example you also have the code Snippets for complete disabling comments Disabling attachment Pages disable Automatic updates this will automatic Update emails and at different very a Lot of different functionality Everything is already created for you The core Snippets already exist you just Have to import them on your site with Examples in this this video is about Having SVG support just click use Snippet and what WP code will do is Create a new code snippet for a site and Add the snippet automatically so this is The code snippet that's created you see The code snippet is already added to the Site you don't have to do anything but You also have some additional controls That if you want to configure the code Simple differently you can have Auto Insert or shortcode you can have Specific Pages where it runs but right
Now we want to have included everywhere You can choose device types conditional Logic there's tons of features here but Right now you just make simple we'll Just enable the code snippet and see if The functionality is now working so We'll make sure the plugin is active or The code snip is activated we'll click The update button And now the snippet is updated we can Double check by going into code Snippets Section and you see allow SVG files Upload is now added and it's also Enabled so technically now SVG file Should work on the site that's just that Theory let's go to Media let's go to add New I'm going to drag the same Plugin or Same SVG file that I showed you in the Beginning of the video Let's drag and Drop it here And it's done it works so let's go to Library and check it out So if you go to the library here now you See the SVG file you can see you can see The name of the file here is now added The site and now it's looking beautiful Right that's the benefit of having SVG Files so this is how you add the SVG Functionality but there's something that I discussed in the middle of the video That WordPress doesn't allow you to add SVG functionality for a particular Reason and that particular reason is
Security let me explain what this means So SVG files are not technically images They're not made of pixel they're Actually Vector files made of code let Me explain so this is the SVG file that I just uploaded it might look like a Regular image but it's not it's actually Made of code and this is the code of the Website or this is the code of this Exact SVG file yes this SVG file is Actually this piece of code now this is Where the problem happens with any piece Of code there is a chance of malicious Intent or malicious code making your way Through the website and that is why WordPress actually restricts SVG files In the first place but all is not lost You don't have to be scared and think oh I will not install NES or not upload any SVG file to my website because there's a Potential risk the solution is pretty Simple actually just treat your SVG Files like you would treat your plugins Or apps on your phone let me explain so Let's say you're browsing the internet And you reach a particular website and a Particular website is offering you a Plugin that you can install your website For very small costs are absolutely free And what they're promising is that it'll Add a specific functionality that you've Been looking for but there's only a few Different problems to overcome the Website that looks absolutely Shady
There's no ratings there's no reviews There's no quality control there's a User support Forum they don't have a Particularly free version that you can Install from the WordPress repository Which is a sign of trust and you have Absolutely no idea who the developer is Or if any other person in the world will Actually use the plugin and has gotten Good results now my question to you is Looking at all this information would You install that plugin on your website Well I hope so that you never install That plugin website because you Understand the risk of downloading a Plugin from a shared website and Installing it on your website similar Thing you will do on your computer and Your phone right you won't install apps From a shady developer or you would Install Apple applications on the Mac or Windows from a website you don't trust Because you understand the risks so Treat your SVG files not like images but Exactly like plugins if you find a SVG File from a publisher from a website Which you don't particularly trust then Don't install it on the first place so All you have to do is treat your SVG Files exactly how you treat plugins for Your WordPress website apps for your Phone or your computer make sure that The source of the Plugin or the file or The application or the SVG file is
Trustworthy and you will have no Problems whatsoever there are tons of Trusted websites where you can download SVG files and different assets for your Website and of course WordPress has its Open verse project as well which is Collection of 600 million creative works That you can download and use on your Website as you please so that's how you Add SVG support on your website while Keeping your website safe as well if you Learn something new hit the like button If you love the video make sure to Subscribe if any questions then the Comment Box is open my name is and I'll Catch you in the next video take care
