未加星标

WordPress SVG Support: How to Enable SVGs in WordPress

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

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 Parcelable

Backstory 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.

SVGs are not raster images like other formats (such as png , jpg , gif ), they are actually vectors and because of that they can potentially be used to carry malicious javascript. There’s a great article from Bjrn Johansen which pinpoints how this all works. The short and sweet of it is that JavaScript can be injected into it and it’s executed when the SVG is displayed.

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.


WordPress SVG Support: How to Enable SVGs in WordPress
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
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_action('upload_mines', 'add_file_types_to_uploads');

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.


WordPress SVG Support: How to Enable SVGs in WordPress
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

WordPress’ media library is built dynamically, fetching all of the uploaded files asynchronously as the page loads and fetching more as you scroll. That being the case there isn’t really any filter or action that you can hook into to adjust how files are displayed. You need to use JavaScript to do your changes manually.

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开发工程师 软件开发流程 软件开发工程师

主题: JavaScriptCSSJavaWordAndroidPHP
分页:12
转载请注明
本文标题:WordPress SVG Support: How to Enable SVGs in WordPress
本站链接:http://www.codesec.net/view/480336.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(34)