Would you like to upload SVG files on your WordPress website?
WordPress by default lets you post nearly any type of pictures, music, and video file. SVG, though, is not one of them. This is due to the fact that although there are secure ways to use the image format, there are possible security problems.
We’ll walk you through the simple and safe process of adding SVG to WordPress in this article.
What is an SVG?
One kind of vector image is an SVG file. Compared to more popular picture file formats, vector files have a different composition. A JPG, for instance, is composed of thousands of pixels. That is not the case, however, with an SVG file.
A set of written instructions is more akin to vector graphics. They lack the pixels that make up a bigger image. Alternatively, they incorporate a set of data that resembles a schema and generates a two-dimensional image. Thus, utilizing SVG files has certain special advantages.
How does SVG work?
Two-dimensional drawings can be displayed using XML thanks to a technology called Scalable Vector Graphics (SVG). Compared to popular image formats like PNG, GIF, or JPG, they are distinct.
An image file in PNG or JPG format will begin to exhibit pixelation and blurriness when you enlarge it.
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.
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.
Security issues concerning SVG in WordPress
Code in SVG files is written in the XML markup language, which is related to HTML. To see the output on the screen, your browser or SVG editing program must parse the XML markup language.
This exposes your website to potential XML vulnerabilities, though. It can be used as a springboard for cross-site scripting, brute force, or unwanted access to user data.
Through sanitization, we hope to increase the security of SVG files using the techniques we shall discuss in this article. Nevertheless, the uploading or injection of malicious code cannot be completely stopped by these plugins.
Using SVG files only from reputable sources and limiting SVG uploads to verified users is the best course of action.
Why allow SVG in WordPress?
SVGs offer several benefits. You can adjust the size as needed without sacrificing the image’s quality because they are quite scalable. As you may already be well aware, attempting to enlarge a JPG rapidly results in the quality rapidly deteriorating to an unplayable degree.
SVGs can be useful in this situation. They work well for business logos, icons, and other straightforward visuals on your website, but they aren’t designed to display regular photos.
How to add an SVG to WordPress?
Since WordPress doesn’t include support for SVGs out of the box, you’ll have to work a little harder to include them on your website. In the next few sections, we’ll go over how to add SVG files to your website with a plugin and via a manual process.
We’re following two methods to upload SVG files in the WordPress directory.
Method 1: Use a plugin
As with many WordPress tasks, plugins can make enabling SVG support simple. All you have to do is pick the right tool and configure a few settings.
First, you’ll need to download and install an SVG plugin. We recommend Next3 Offload plugin for support to upload SVG files:
Once you’ve installed and activated the plugin, you’ll have a new menu option in your WordPress dashboard under Next3 Offload > Storage Settings > SVG File.
There, you will receive instructions on how to style SVG files for your website:
Now, enable this switch and click on to save button.
Method 2: Manually enable SVG file uploads
If you prefer getting your hands dirty to using a plugin, you can manually enable your WordPress site to accept SVG files. Next, we’ll take a look at how that process works.
Step 1: Edit your site’s functions.php file
To get started, you’ll need to edit your website’s functions.php file. To do this, you can go to Appearance > Theme File Editor in your dashboard, and select the functions.php file:
Either way, it’s best to create a child theme or switch to a development environment before doing any major work on your website. This will keep your live site safe from harm while you’re making changes.
Step 2: Add a Code Snippet
Next, you’ll need to add the following snippet of code to your functions.php file:
// Allow SVG
function allow_mime_types( $mimes ){ $mimes['svg'] = 'image/svg+xml'; $mimes['svgz'] = 'image/svg+xml'; return $mimes;
}
add_filter( 'upload_mimes', 'allow_mime_types' );
// add svg ext support
function allow_mime_types_ext($data, $file, $filename, $mimes) { $ext = isset( $data['ext'] ) ? $data['ext'] : ''; if ( strlen( $ext ) < 1 ) { $exploded = explode( '.', $filename ); $ext = strtolower( end( $exploded ) ); } if ( 'svg' === $ext ) { $data['type'] = 'image/svg+xml'; $data['ext'] = 'svg'; } elseif ( 'svgz' === $ext ) { $data['type'] = 'image/svg+xml'; $data['ext'] = 'svgz'; } return $data;
}
add_filter( 'wp_check_filetype_and_ext', 'allow_mime_types_ext', 10, 4 );
// fix features image
function featured_image_fix( $content, $post_id, $thumbnail_id ){ $mime = get_post_mime_type( $thumbnail_id ); if ( 'image/svg+xml' === $mime ) { $content = sprintf( '<span class="svg">%s</span>', $content ); } return $content;
}
add_filter( 'admin_post_thumbnail_html', 'featured_image_fix', 10, 3 );
// disable srcset
function disable_srcset( $image_meta, $size_array, $image_src, $attachment_id ){ if ( $attachment_id && 'image/svg+xml' === get_post_mime_type( $attachment_id ) ) { $image_meta['sizes'] = array(); } return $image_meta;
}
add_filter( 'wp_calculate_image_srcset_meta', 'disable_srcset', 10, 4 );
// add style in wp_head
function fix_svg_style() { echo '<style type="text/css"> #postimagediv .inside .svg img { width: 100%; } .attachment-266x266, .thumbnail img { width: 100% !important; height: auto !important; } </style>';
}
add_action( 'admin_head', 'fix_svg_style' );Step 3: Save code and check to upload
After copying and paste those codes into the functions.php page. Click on the Upload File button to save.
After that, you’ll be able to upload SVG images to your Media Library. There, you can view and interact with them just like with other image file types.
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Â
You may connect with us on Facebook and X. Also, check out our YouTube channel to view videos.
