How to Upload SVG to WordPress: 2 Safe Methods

SVG (Scalable Vector Graphics) is a powerful image format that can be used to create stunning visuals for your WordPress website. It’s lightweight, scalable, and can be used to create logos, icons, and other graphics.

Unfortunately, WordPress doesn’t natively support SVG images. But don’t worry, there are two safe methods you can use to upload SVG to WordPress.

1. Use a Plugin

The easiest way to upload SVG to WordPress is to use a plugin. There are several plugins available that allow you to upload SVG images to your WordPress site.

One of the most popular plugins is SVG Support. This plugin allows you to upload SVG images to your WordPress media library and use them in posts and pages. It also provides a simple interface for resizing and cropping your images.

2. Upload SVG Directly to Your Server

If you don’t want to use a plugin, you can also upload SVG images directly to your server. To do this, you’ll need to access your server via FTP or SFTP.

Once you’ve connected to your server, you’ll need to navigate to the “wp-content/uploads” folder. This is where all of your WordPress media is stored.

Once you’re in the “uploads” folder, you can upload your SVG images. Make sure to give them a descriptive name so you can easily find them in the media library.

Once you’ve uploaded your SVG images, you can use them in posts and pages just like any other image.

Conclusion

SVG images can be a great way to add visual interest to your WordPress site. Unfortunately, WordPress doesn’t natively support SVG images. But you can easily upload SVG to WordPress using a plugin or by uploading them directly to your server.

Whichever method you choose, make sure to follow best practices for security and performance. This will ensure that your SVG images are safe and won’t slow down your site.
[ad_1]

Web admins and web designers are bound to use different media file formats in their work. Today, one of the most popular formats is SVG, an XML-based vector format. Unfortunately, not all browsers and platforms support SVG and you need to enable SVG support manually beforehand.

This article will cover the steps of uploading SVG files on a WordPress website using the SVG Support plugin. We will also answer some questions concerning the security issues surrounding this particular media file format and why SVG is worth using.

To begin, let’s familiarize ourselves with SVG and how it works.

Scalable Vector Graphics (SVG) is a vector graphic image format based on the XML text. While common image formats like JPG and PNG are made up of tons of tiny squares called pixels, this format relies on the XML markup language to describe image attributes.

As of January 2022, 42% of all websites worldwide use SVG. This percentage has increased since January 2021, when only 29.4% of websites utilized it. Similar to PNG and JPG formats, SVG is popular among high traffic websites like Google, Wikipedia, and YouTube.

Another great thing about SVG is that it is widely supported by all major browsers. The following is a list of browsers that support the SVG file format:

Browser Partial Support Full Support
Edge Version 12-18, 79-96, 97
Firefox Version 2 Version 3-94, 95, 96-97
Firefox for Android Version 95
Chrome Version 4-96, 97, 98-100
Chrome for Android Version 96
Safari Version 3.1 Version 3.2-15.1, 15.2, TP
Opera Version 10-81, 82
Opera Mini All versions
Opera Mobile Version 12-12.1, 64
Safari on iOS Version 3.2-15.1, 15.2
Android Browser Version 3-4.3 Version 4.4-4.4.4, 96
UC Browser for Android Version 12.12
Samsung Internet Version 4-14.0, 15.0
QQ Browser Version 10.4
Baidu Browser Version 7.12
KaiOS Browser Version 2.5

How Does SVG Work

Scalable vector graphics utilize XML to produce two-dimensional vector images. Unlike JPG and PNG, vector graphics don’t comprise pixels. Instead, their behavior is described in XML text files.

For this reason, scalable vector graphics can be searched, indexed, scripted, edited, and compressed like code. Accordingly, anyone can create them using a text editor or vector graphics software.

Does WordPress Support SVG

There’s no SVG support in WordPress by default due to the security risks it imposes ‒ we will cover the security issues surrounding SVG in more depth later.

The following is an error message that appears when uploading an SVG graphic to a WordPress website:

The error message that appears when a user tries to upload an SVG file to a WordPress site.

There’s a discussion about making SVG a part of WordPress core features. Until then, we have to get creative and use other solutions to upload SVG images to WordPress.

Why Use WordPress SVG

A comparison of simple and complex SVGs.

Despite its security issues, many users still use this image format as it has various benefits. Here are some of the advantages of using SVG files:

  • Scalability ‒ since SVG is a vector image format, SVG files retain the same quality across all screen resolutions. This benefit is also present after enlarging them, which is why many people use this scalable image format for icons and logos.
  • Smaller file size ‒ using SVG files makes improving website performance with scaled images easier as they take less of your web storage space and load way faster than raster images.
  • SEO-friendly ‒ Google indexes SVG files, allowing them to show up on Google Image Search and improving your SEO efforts. With raster images, you’re limited to optimizing their alt attributes.
  • Code-based ‒ SVGs are modifiable using a text editor or vector graphics editing software. You can optimize SVG image files for websites or even add animations to make the graphics interactive.

WordPress SVG and Security

Since SVG is basically an XML text file, it has exploitable vulnerabilities that don’t affect other image formats. Consequently, people can easily hijack it with malicious code to launch cross-site scripting (XSS) and XML external entity (XXE) attacks on your system.

For this reason, you need to be careful when handling SVG files and adding them to WordPress.

To minimize security risks, make sure to sanitize SVG files before uploading them to the WordPress media library. This process removes suspicious code and errors, making the images safe for your site.

You can sanitize SVG file uploads using an SVG plugin ‒ we will cover the steps to do so later. However, we recommend double-sanitizing it with the SVG Sanitizer Test ‒ it’s an online tool by Darryll Doyle, a WordPress developer.

Another way to secure your WordPress website is by limiting SVG uploads to trusted users only. The selected users should be aware of the security concerns surrounding the SVG format ‒ this will discourage them from obtaining SVG files from dubious sources.

How to Upload SVG Files to WordPress in 2 Secure Methods

Technically, there are two ways to add SVG support to WordPress ‒ using a plugin or enabling it manually. Regardless of your choice, we strongly suggest limiting upload privileges to administrators and trusted users only to minimize malicious uploads.

Use a Plugin

In this tutorial, we will be using SVG Support. This plugin uses an SVG sanitizer library that will automatically activate upon uploading SVG files to the media library. It’s also easy to set up and free to use.

Here are the steps to set up SVG Support:

  1. Install the plugin and activate it.
The SVG Support plugin in the official WordPress directory.
  1. Navigate to Settings -> SVG Support from your WordPress dashboard.
SVG Support being accessed from the WordPress dashboard.
  1. Check the box next to the Restrict to Administrator option to limit the upload privileges. Do the same to the Enable Advanced Mode option if you want access to advanced features, such as inline SVG rendering and CSS styling.
The settings of the SVG Support plugin.
  1. After saving the changes, you can start uploading SVG files safely to the media library.

Pro Tip

The option to render featured images inline will appear on WordPress posts that use SVG files as featured images if you enable the advanced mode.

Manually Add WordPress SVG Support

This method involves editing the functions.php file of your WordPress website. Therefore, we strongly recommend following these steps if you’re familiar with PHP and fully understand the issue of SVG security.

The following steps will explain how to enable SVG in WordPress manually via Hostinger File Manager. That said, you can also use an FTP client like FileZilla instead.

  1. Access hPanel and go to Files -> File Manager.
  2. Navigate to public_html -> wp-includes. Scroll down until you locate functions.php.
Functions.php being accessed via hPanel's File Manager.
  1. Double-click the file to open it and paste the following code snippet in there:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
  1. Save the changes and try uploading an SVG file type. If the process is successful, your media library should accept the file upload.

Conclusion

The many benefits of SVG files contribute to this file type’s rising popularity. Unfortunately, XML text files are prone to code injection, which is the main reason why WordPress doesn’t include SVG support by default.

That said, there are two ways to make your WordPress site accept SVG files ‒ by using a WordPress plugin or modifying the site’s functions.php file. Along with limiting upload privileges, you’ll get to safely upload SVG files to the site’s media library.

We hope this WordPress tutorial has given you insight into the benefits and risks of uploading SVG files to a WordPress website. Good luck.

Upload SVG to WordPress FAQ

The following are some answers about having SVG in WordPress.

Is SVG Better Than PNG For a Website?

SVGs are better for scalable images, smaller file sizes, and animated graphics, while PNGs are better for images with lots of detail and transparency. The choice depends on your specific needs.

Should I Use an SVG logo on My WordPress Website?

Yes, using an SVG logo in your WordPress website can improve scalability, reduce file size, allow for customization, and ensure compatibility with all modern devices and browsers.

Why Can’t I Upload My SVG files to WordPress?

WordPress may not allow the uploading of SVG files due to security concerns. SVG files can contain malicious code that could harm your website. To solve this, you can use a plugin or convert the SVG to a PNG or JPG before uploading it to WordPress.

[ad_2]

How to Upload SVG to WordPress: 2 Safe Methods

SVG (Scalable Vector Graphics) is a powerful image format that can be used to create stunning visuals for websites. It is an XML-based vector image format that is supported by all modern web browsers. However, WordPress does not natively support SVG images, so you need to use a plugin or other methods to upload them.

Method 1: Use a Plugin

The easiest way to upload SVG images to WordPress is to use a plugin. There are several plugins available that allow you to upload SVG images to your WordPress site. Some of the most popular plugins include:

These plugins allow you to easily upload SVG images to your WordPress site. Once installed, you can upload SVG images just like any other image file. The plugins also provide additional features such as resizing, cropping, and optimizing the images.

Method 2: Use a CDN

Another way to upload SVG images to WordPress is to use a content delivery network (CDN). A CDN is a network of servers that deliver content to users based on their geographic location. By using a CDN, you can host your SVG images on a separate server and then embed them into your WordPress site.

To use a CDN, you will need to sign up for an account with a CDN provider. Once you have an account, you can upload your SVG images to the CDN and then embed them into your WordPress site using an <img> tag. This method is more complicated than using a plugin, but it can be a good option if you need to host large SVG images.

Conclusion

Uploading SVG images to WordPress can be a bit tricky, but it is possible. The easiest way to do it is to use a plugin, but you can also use a CDN if you need to host large images. Whichever method you choose, make sure to follow best practices to ensure your images are secure and optimized for the web.

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

GSTIN is 03EGRPS4248R1ZD.

Contact
Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00