svg 中插入svg_WordPress SVG支持：如何在WordPress中启用SVG

svg 中插入svg

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.

矢量图像在网络上变得越来越普遍。 SVG提供了可伸缩，响应Swift的替代标准图像的功能，主要优点是它们在任何设备上看起来都清晰明快，并且文件大小通常较小。

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.

跨浏览器的支持现在也得到了全面的支持，所有现代浏览器在与image标记一起使用或在CSS中作为background属性的一部分时都支持SVG。

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.

如果您使用的是WordPress，则可能熟悉媒体库及其作为媒体资源的中央存储库的工作方式。 最初，处理文件上传的管理器仅限于已批准文件类型的列表 。

Today’s tutorial will focus on how we can add SVG media support and also improve WordPress’ processing, handling and display of SVGs overall.

今天的教程将重点介绍如何添加SVG媒体支持，以及改善WordPress对SVG的整体处理，处理和显示。

背景故事-为什么WordPress中不支持SVG？ (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.

您可能想知道为什么SVG从未进入WordPress支持的文件类型列表，答案完全是关于安全性的。

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 Bjørn 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.

SVG不是像其他格式(例如png ， jpg ， gif )那样的光栅图像，它们实际上是矢量，因此，它们有可能被用来携带恶意JavaScript。 比约恩·约翰森(BjørnJohansen)有一篇很棒的文章 ，指出了这一切的工作原理。 它的简短之处就是可以将JavaScript注入其中，并在显示SVG时执行它。

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.

WordPress核心开发人员已经讨论了SVG包含时间很长 (3-4年)，主要的问题是它可能带来的潜在安全风险。 从整个站点管理员到编辑者和贡献者，媒体管理器可用于多个级别，这意味着有多个组可以潜在地(不经意或有意地)将恶意SVG文件上传到站点。

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.

暂时不会出现任何动静，可悲的是，这意味着SVG不会很快成为默认的上传选项。

将SVG格式添加到允许的文件类型 (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.

值得庆幸的是，由于WordPress具有高度的灵活性，因此我们可以调整允许上传到媒体库的文件类型。 我们只需要挂接到upload_mimes过滤器并添加我们的SVG支持即可。 您可以将此代码添加到子主题中的functions.php文件中，也可以将其创建为插件。

//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_mimes', '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.

我们正在做的是挂接到允许的文件类型数组中，并添加SVG扩展名(即image/svg+xml )作为可接受的文件类型。

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直接拖放到库中，它们将显示为标准文件。

改善媒体库中的SVG显示 (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 m