WordPress和SVG

Question

有人知道如何让 WordPress 允许通过主题自定义面板上传 SVG 文件吗？

将以下内容添加到主题 functions.php 文件中，可以允许上传 SVG 文件（但无法预览或设置特色图片）。

function custom_mtypes( $m ){
    $m['svg'] = 'image/svg+xml';
    $m['svgz'] = 'image/svg+xml';
    return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );

然而，这仍然无法让我从文件系统上传或选择SVG文件，也无法拖放文件。

- Richard Pearson

Answer 1

更新（Wordpress 5+）

确保每个SVG文件都以以下内容开头：

<?xml version="1.0" encoding="utf-8"?>

- Maciej K

Answer 2

如果你尝试通过媒体上传器直接上传SVG到WordPress，可能会遇到一些问题。

要么会出现错误并且无法上传文件，要么允许你上传.svg文件但是却不能显示它。无论哪种情况，以下是两个简单步骤，可以轻松启用WordPress中的SVG图像。

注意：为了使此方法生效，您需要能够编辑主题（或子主题）的functions.php文件和根目录下的.htaccess文件。

在functions.php中添加SVG MIME类型

function wpcontent_svg_mime_type( $mimes = array() ) {
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'wpcontent_svg_mime_type' );   

您应该将wpcontent_替换为自己的命名空间。此函数仅在WordPress中将SVG和SVGZ（压缩的SVG）添加到允许的上传文件类型中，并将其钩入upload_mimes() WordPress函数。

在.htaccess中添加SVG Mime类型

因此，请打开您的根.htaccess文件，并在#End WordPress行之后添加以下内容。

# Add SVG Mime Types
AddType image/svg+xml svg
AddType image/svg+xml svgz       

保存文件，完成！现在您可以从Illustrator或Inkscape保存SVG文件并在WordPress网站上使用它们。

来源在这里

- Alexandr_TT

---

这对性能有什么影响？根据类似的答案https://wordpress.stackexchange.com/a/72426，这种方法可能会更慢。 - Motivated

@Motivated 我没有注意到我网站上的速度限制。 - Alexandr_TT

@Motivated 没有进行任何特殊测试。加载大型SVG文件时没有明显的减速。 - Alexandr_TT

@Motivated 使用“object”标签加载一些大型SVG文件，查看渲染性能是否令您满意。 - Alexandr_TT

Answer 3

您可以通过将以下内容添加到当前主题的functions.php文件中来克服安全警告。

add_filter('upload_mimes', 'custom_upload_mimes');

function custom_upload_mimes ( $existing_mimes=array() ) {
    // add the file extension to the array
    $existing_mimes['svg'] = 'mime/type';
        // call the modified list of extensions
    return $existing_mimes;
}

那么你应该能够上传扩展名为.svg的文件。

- Daemon

---

也许在旧版本的WordPress中可以使用，但将“svg”数组键设置为“mime/type”不起作用。@Alexandr_TT下面的答案是有效的。 - Bart Klein Reesink

Answer 4

使用以下代码在WordPress中支持SVG。它将导入和导出.svg媒体文件。

    function theme_name_mime_types($mimes) {
        $mimes['svg'] = 'image/svg+xml';
        return $mimes;
    }
add_filter('upload_mimes', 'theme_name_mime_types');
    add_filter('mime_types',  'theme_name_mime_types');

- Deepak Kumar

Answer 5

注意到如果使用“保存为屏幕”功能，文件将无法上传，但是“另存为...”则可以（Illustrator）。

- artist learning to code