WordPress SVG Support: How to Enable SVGs in WordPress
Vector images are becoming increasingly common on the web. SVGs provide a scalable, responsive and fast alternative to standard images with the primary benefit being that they look crisp and sharp across any device and they are typically smaller in file size.
Cross-browser support is also now comprehensive, with all modern browsers supporting SVGs when used with the image tag or in CSS as part of the background property .
If you’re using WordPress, you’re probably familiar with the Media Library and how it works as a central repository for your media assets. The manager which handles uploading of files is initially restricted to a listing of approved file types .
Today’s tutorial will focus on how we can add SVG media support and also improve WordPress’ processing, handling and display of SVGs overall.
More from this author Extend the Quick Edit Actions in the WordPress Dashboard Transfer Data between Activities with Android ParcelableBackstory Why No SVG Support in WordPress?
You’re probably wondering why SVGs never made it onto the list of supported file types in WordPress, the answer is entirely about security.
WordPress core developers have been discussing SVG inclusion for a very long time (3 4 years) and the main sticking point is the potential security risks it could pose. The media manager is used across several levels, from full site administrators to editors and contributors, what this means is that there are several groups who could potentially upload (unwittingly or intentionally) malicious SVG files to a site.
There most likely won’t be any movement on this for a while and sadly that means SVGs won’t be a default upload option anytime soon.
Adding the SVG Format to the Allowed File Types
Thankfully, because WordPress is highly flexible, we can adjust the file types allowed to be uploaded to the media library. We need only to hook into the upload_mimes filter and add our SVG support. You can add this code to either your functions.php file in your child theme or create it as a plugin.//add SVG to allowed file uploads
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
What we’re doing is hooking into the array of allowed file types and adding the SVG extension (which is image/svg+xml ) as an accepted file type.
That’s all we need to do to enable WordPress to upload these images. Now when you go to the media library you can drag and drop your SVGs straight into the library and they’ll appear as a standard file.
Improving SVG Display in the Media Library
Because SVGs aren’t a default file type, the display and processing of them is provided ‘as is’, meaning that they will all work in the admin dashboard, but you won’t necessarily have the most streamlined user experience.
One such area where SVG optimisation is lacking is the ‘Grid View’ of the library.
When viewing SVGs in this view, each SVG appears as the generic placeholder, showing a default icon and the name of the file (as seen in the previous image). While this still all works, it doesn’t really help you much as unless you memorized the file names of your SVGs you won’t know which is which. What it should display is the image itself, not a placeholder.
That’s what we’re going to look at now, optimising the ‘Grid’ so that we get something more visually useful.Manually Updating SVGs in the Grid View
What we’re looking for is to replace the default icon and wording displayed for SVGs with the image itself. Doing this will make managing a library of SVGs much simpler.
The plan to is execute a function on each attachment in the media library. This function will execute only for applicable SVG images and will trigger an AJAX call to a customphp function. Inside this function we will return the SVG image URL to replace our default icon.Mutation Observers
One of the first complexities with the media library is that it’s all built dynamically. We can’t trigger a function on page load or reliably with a setTimeout because we’ll never be sure when it’s ready. What we need to do is trigger our function when the DOM has been updated and our attachments added to the page.
This is a perfect use case to implement Mutation Observers
‘Mutation Observers’ provide a way for developers to react to changes in the DOM and to get a listing of all changes (mutations) that have happened for it’s nodes. These observers replace the deprecated mutation events and have fairly comprehensive browser support, working on all modern systems, even back to IE11.Admin CSS Tweaks to Improve SVG Display
There are several places we need to apply some light styling to ensure our SVG images look great across the whole WordPress backend. The only real note is that in older browsers (IE8-IE10) SVGs don’t like to be resized and require a set height and width attribute when displayed as an image. For our purposes and for the majority of browsers, these CSS tweaks will be enough.
The main issue we will run into is that no height or width values are assigned to the SVGs, causing them to collapse (and becoming invisible). Setting the SVGs width to 100% and it’s height will solve this.Media Library Grid Layout
The newer default grid layout provides an easy to use interface for managing and viewing your attachments. While it’s great and works well, it doesn’t do a very good job of showcasing your SVGs, defaulting them to an icon with their filename.
What we need is for the SVG image itself to be shown as the preview, making it easier for us to manage collections of SVGs.The difficulty with this is that the library is built dynamically, meaning that
本文开发（php）相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师
本文标题：WordPress SVG Support: How to Enable SVGs in WordPress