Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add SVG Image Files in WordPress (3 Simple Solutions)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add SVG files to your WordPress site?

By default, WordPress allows you to upload almost all popular image, audio, and video file formats. However, SVG is not among them. That’s because there are potential security concerns with the image format, but there are safe ways to use them.

In this article, we will show you how to easily and safely add SVG in WordPress.

Easily add SVG files in WordPress

What is SVG?

SVG or Scalable Vector Graphics is a file format that defines vector graphics using the XML markup language. The main benefit of SVG is that it allows you to enlarge images without losing quality or having any pixelation.

How does SVG work?

Scalable Vector Graphics (SVG) is a technology that displays two-dimensional drawings using XML. They are different than the commonly used image formats like PNG, GIF, or JPG.

If you take a PNG or JPG image file and zoom in, then you will notice that the image will start to blur and become pixelated.

Vector graphics don’t use pixels.

Instead, they use a two-dimensional map that defines the graphic you are viewing as coordinates. As you zoom in, the image doesn’t pixelate because it simply can’t.

This enables you to enlarge vector graphics without losing quality. Most importantly, SVG images can be way smaller in filesize than a PNG or JPG file.

Vector graphics are commonly used for icons, icon fonts, website logos, and branding images. You may want to add SVG files to WordPress for your company logo, icons, or other graphics.

As cool as they sound, however, SVG files can be a bit unsafe. That’s why WordPress doesn’t support SVG file uploads by default.

If you upload an SVG image in WordPress, then you will see the following error message:

Sorry, this file type is not permitted for security reasons.

SVG security error in WordPress

Security Issues Concerning SVG in WordPress

SVG files contain code in the XML markup language which is similar to HTML. Your browser or SVG editing software parses the XML markup language to display the output on the screen.

However, this opens up your website to possible XML vulnerabilities. It can be used to gain unauthorized access to user data, trigger brute force attacks, or cross-site scripting attacks.

The methods we will share in this article will try to sanitize SVG files to improve their security. However, these plugins cannot totally prevent malicious code from being uploaded or injected.

The best solution is to only use SVG files that are created by reliable sources and to restrict SVG uploads to trusted users only.

To learn more about security, check out our complete WordPress security guide for beginners.

That being said, let’s take a look at how to easily and safely use SVG files in WordPress using one of 3 methods.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just keep reading.

Method 1. Allow SVG Files in WordPress Using WPCode (Recommended)

The simplest and easiest way to safely allow SVG uploads to WordPress is by using WPCode, the most powerful code snippets plugin available.

WPCode comes with a large library of pre-configured code snippets that can replace many single-use plugins on your site, from disabling attachment pages, using the Classic Post Editor, or allowing SVG file uploads.

First, you will need to install and activate the free WPCode plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you should navigate to Code Snippets » Add Snippet in your WordPress admin panel. Just search for ‘svg’ and hover your mouse over ‘Allow SVG Files Upload.’

Then, you can click on ‘Use snippet.’

The snippet to allow SVG upload from WPCode's library

Next, you will be taken to the ‘Edit Snippet’ page where WPCode has already configured all the settings the code needs to run.

All you need to do is click the switch to ‘Active’ and then press the ‘Update’ button.

Activate the snippet and click update in WPCode

Now, you will be able to upload SVG files without being given an error or warning message by WordPress.

You can then treat it as you would any other image on your WordPress website.

It's a kitty svg that was uploaded thanks to WPCode's library snippet

By default, the WPCode snippet only allows users with the Administrator role to add SVGs to WordPress.

You can also grant permission to all other user roles by simply deleting Lines 14-16 of the code snippet you see in the image below.

You can also ‘comment them out’ by adding two slashes ‘//’ to the beginning of each of those lines, turning them a light tan color. WPCode won’t execute any part of the snippet that it sees as a comment rather than code.

You can see an example of this in Lines 11-13 in the image below.

Give all users permission with WPCode to upload SVG files

Either way, with the code removed, all users will be able to upload SVG files to your WordPress site. Just be sure to click ‘Update’ to save any changes you make.

Method 2. Upload SVG Files in WordPress Using SVG Support

This method uses the SVG Support plugin and allows you to display inline SVGs in WordPress posts and pages, as well as control who has permission to upload them.

First, you need to install and activate the SVG Support plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » SVG Support page to configure plugin settings.

SVG support settings

On the settings page, you need to check the box next to ‘Restrict to Administrators?’ option. This will allow only a site administrator to upload SVG files in WordPress.

The next option is to turn on the advanced mode. You only need to check this option if you want to use advanced features like CSS animations and inline SVG rendering.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

You can now create a new post or edit an existing one. In the post editor, you will upload your SVG file like you would upload any other image file. Simply add an image block to the editor and then upload the SVG file.

You will now be able to upload and embed SVG files in WordPress.

SVG file embed in WordPress post

Method 3. Upload SVG Files in WordPress Using Safe SVG

This method also uses a plugin and allows you to perform sanitization of SVG files uploaded to WordPress.

The first thing you need to do is install and activate the Safe SVG plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

The plugin works out of the box, and there are no settings for you to configure. You can simply go ahead and start uploading SVG files.

The downside is that this plugin allows SVG uploads by all users who can write posts on your WordPress site. In order to control who can upload files, you will need to purchase the premium version of the plugin.

We hope this article helped you learn how to safely add SVG files in WordPress. You may also want to see our article on how to fix the most common image issues in WordPress and the best SEO plugins and tools.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

26 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Eugene Velasquez says

    I have added all the SVG plugins but still am being blocked from adding SVGs, which I have created on my own so there is no risk or malicious code. Is there another way to add the SVG files to wordpress?

    • WPBeginner Support says

      If even the plugins do not allow you to add SVGs to your site, we would recommend reaching out to your hosting provider to ensure they do not have a security setting that may be overriding your WordPress.

      Admin

  3. Felix Krusch says

    Since the inception of Blocks you can just add SVG code in a “Custom HTML Block”. No snippet plugin necessary anymore.

    • WPBeginner Support says

      If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean :)

      Admin

  4. sn says

    Hi,
    Thanks for your articles.
    Usually I refer to you website and I learn many things from it.
    Here you wrote using svg files in websites is not safe.

    My question is that if I create the svg file myself from adobe illustrator or similar software,
    is it again unsafe to put it in my website?
    and should I use safe svg plugin?

    Thanks!

    • WPBeginner Support says

      If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin. :)

      Admin

  5. Amandine says

    Hi, I have successfully uploaded the SVG plugin and can upload my SVG file but at the point of cropping the logo, I cannot crop it and therefore it does not appear on my website. It appears nice and crisp on the side customising panel on the left but not on the website. Whereas if I upload a PNG file, the cropping works and it appears on the customising panel as well as the website. Please could you let me know if there’s anything I need to do for my SVG logo to appear on the website? Thank you

    • WPBeginner Support says

      You would need to edit your SVG using something other than your WordPress site to crop it to the size you’re wanting

      Admin

  6. pushkraj says

    I want to upload a svgz (svg compressed) but I get an error of security reasons. Although I can upload SVG. format without any problem but I need svgz in order to reduce the file size. Please help me with my query.
    Thank you.

  7. Brian says

    Hello WPBeginner,

    I added the plugin Safe SVG to my website but it seems my SVG files get broken uploaded. I cannot use them. How is this possible?

    • WPBeginner Support says

      You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist :)

      Admin

    • WPBeginner Support says

      So long as your theme does not specifically override this, you should be able to.

      Admin

  8. Scott says

    I understand the complexity of converting pixel images to mathematical.

    Has there come along a fairly simple or automated method or program to convert jpegs and .png images to SVG?

    • Cactoos says

      As far as I tried, inkscape can do exactly that. It’s free and it works in windows, Mac, and Linux.

      Gimp, illustrator, and I’m not that sure, but maybe krita can do this also.

      Gimp and krita are also free and multi OS.

      Indeed I converted a pretty heavy and high quality photo to svg (previous jpg image direct from the photo camera) and it worked flawlessly, it took his time, but it works. It might be because I’m in a pretty weak system.

    • Salman Ravoof says

      Almost all vector editing software have that functionality. Both Inkscape and Illustrator can do it. However, the results won’t be as good if you have complex shapes and a lot of colours (all real life images come under this) . This functionality is best used for images which have less than 4 colours, the lesser the better.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.