WordPress allows users to upload various types of image files, including common ones like PNG and JPG. However, integrating vector graphics can be a bit challenging. Thankfully, there are methods to include vector files on your website. Although not an inbuilt feature, Scalable Vector Graphics (SVG) files can be utilized for presenting two-dimensional images on WordPress sites. With some adjustments, you can enhance logos and other graphics using this file format.
In this article, we’ll delve into understanding SVG files and their potential benefits. We will also guide you through two techniques to enable their usage on your site while discussing crucial security measures to consider.
An SVG file represents a specific kind of vector image. Unlike typical image files, such as JPGs that consist of thousands of pixels, SVG files don’t operate in the same manner. Rather than containing pixel data to form an overall picture, vector images represent a set of directives. They incorporate a structured dataset that generates a two-dimensional graphic. Hence, SVGs offer several advantages. They are highly scalable, allowing for size adjustments without affecting image quality. Unlike JPGs, which quickly lose quality when enlarged, SVGs maintain their clarity. Although not suitable for traditional photos, SVGs are ideal for business logos, icons and simple graphics on your website.
Moreover, SVG files usually have a smaller file size than other image formats. This prevents your site from becoming sluggish due to heavy graphics. Importantly, Google indexes SVG files which can significantly boost your site’s Search Engine Optimization (SEO).
WordPress doesn’t natively support SVGs, so you’ll need to put in a bit more effort to include them on your site. The following sections will guide you through adding SVG files using a plugin and a manual method.
Method 1: Plugin Usage
Plugins can simplify the process of enabling SVG support on WordPress. You just need to choose the right tool and adjust some settings.
- Download and install an SVG plugin. We suggest using Safe SVG. After installation and activation, there will be a new menu option under “Settings > Safe SVG” in your WordPress dashboard where you’ll find instructions for styling your website’s SVG files. You’ll also have access to several crucial administrative settings, including limiting upload permissions for SVGs only to administrators. Subsequently, you can directly upload the SVG files into your Media Library. But before that, there are other important tasks that require attention.
- Activate GZip support for SVG files on your server. The execution of this step varies according to your web host and server configuration. We recommend reaching out to your web host support for assistance with this step.
- Mitigate security risks. A significant drawback of using SVG files, which prevents their integration into WordPress core, is security risks. Being XML-based makes SVG files susceptible to External Entity attacks and other threats. When setting up your SVG plugin, it’s advised that access to upload SVGs should only be given to administrators. A safer strategy is ‘sanitizing’ these files prior uploading them, eliminating any unnecessary XML code that could expose your site to potential attacks. The recommended Safe SVG plugin provides an automatic sanitization feature. You can also opt for installing a standalone sanitizer tool. The developer behind Safe SVG has shared its sanitizer code on GitHub available for public use. Having an independent sanitizer can be beneficial if you intend using the following method for enabling SVGS on your WordPress site.
Method 2: Enable SVG File Uploads Manually
If you’re comfortable with a hands-on approach rather than using a plugin, it’s possible to manually configure your WordPress site to accept SVG files. Let’s discuss how this can be done.
- Modify your site’s functions.php file. To begin, the functions.php file of your website needs editing. You can accomplish this by navigating to “Appearance > Edit Themes” in your dashboard and selecting the functions.php file.
- Insert a code snippet. Subsequently, incorporate the given code snippet into your functions.php file:
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '';
}
add_action( 'admin_head', 'fix_svg' );
Once completed, you will have the ability to upload SVG images to your Media Library where they can be viewed and manipulated like any other image file types.
Ensure Secure Access and Restrict SVG Upload Permissions
It is important to note that enabling SVG files comes with certain risks. To maintain site security, consider restricting upload permissions exclusively for administrators.
