Skip to main content

How to Add SVG in WordPress (with 2 Simple Solutions)

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. In this article, we will show you how to easily 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 JPEGs.

If you take a png / jpeg 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 you zoom in, the image doesn’t pixelate.

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

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

As cool as they sound, SVG files are still 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.

Method 1. Upload SVG Files in WordPress Using SVG Support

This method offers complete support for adding SVG files in WordPress. It also allows you to display inline SVG in WordPress posts and pages.

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 file in WordPress.

SVG file embed in WordPress post

Method 2. 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 in WordPress. You may also want to see our article on most common image issues in WordPress and how to fix them.

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.

The post How to Add SVG in WordPress (with 2 Simple Solutions) appeared first on WPBeginner.

from: WPBeginner
via Editorial Staff

Source: How to Add SVG in WordPress (with 2 Simple Solutions) Via Business Advice.

Comments

Post a Comment

Popular posts from this blog

7 Ways to Grow Your SaaS Startup Faster

Every startup looks for ways to catapult a business to success. Here are some tips for accelerating growth for SaaS (software as a service) companies. 1. Start charging early SaaS startups are often hesitant about charging customers. They think that their product is not yet ready, that it’s necessary to get traction and focus on expanding their customer base rather than on growing revenue. Deep inside, however, they often don’t just have enough faith in their product and are not sure if someone will buy it at all. They prefer keeping hundreds or thousands of free users to attempting to win a few serious customers. Big numbers are comforting but the product remains an unverified idea. Building a product should imply increasing revenue. So don’t hesitate too much—put it to the test by charging and see if it works in the real conditions. This is one way to minimize your risk too. Instead of waiting to launch until you’ve invested huge amounts of time and money, launch early. If...
Post a Comment
Read more

How to Add Web Push Notification to Your WordPress Site

Do you want to add push notifications to your WordPress site? Push notifications allow you to send notifications to users even when they are not visiting your website. In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site. What is Push Notification? Push notifications are clickable messages displayed on top of user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open. Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers. Why Add Web Push Notifications to Your WordPress Site? We have already discussed tha...
Post a Comment
Read more

How to Create a Reusable Block in WordPress Block Editor (Gutenberg)

Do you often use the same content snippets in your WordPress posts? If you do, then you’ll love the Reusable Block feature in the new WordPress block editor. It allows you to save any content block and reuse them in other posts and pages on your website. In this article, we will show you how to easily create a reusable block in WordPress Block editor also known as Gutenberg. We will also show you how to add reusable blocks in your WordPress posts and export them to use on your other WordPress websites. What is a Reusable Block in WordPress Block Editor (Gutenberg)? A reusable block in WordPress editor is a content block saved individually to be used later. Many bloggers often add the same content snippets in multiple articles such as call-to-actions at the end of the blog post or links to follow the blog in social media. Most people just save their content snippets as text files on their computers and then copy and paste them when needed. The Gutenberg WordPress editor solves t...
1 comment
Read more