注意:截至 4.7.1 版本,此方法不再完全按照此处发布的方式工作。 评论线程从这里开始。 一旦找到最佳处理方法,我将更新此内容。这是我目前找到的最佳方案。
适用于你的 functions.php 文件或功能插件
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
如果没有此代码,尝试通过媒体上传器上传 SVG 文件时会被拒绝。
在 WordPress 4.0 之前,你还可以让它们在媒体网格中正确显示。但现在这个功能坏了。如果有人知道如何修复,请告诉我!
function fix_svg_thumb_display() {
echo '
td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
width: 100% !important;
height: auto !important;
}
';
}
add_action('admin_head', 'fix_svg_thumb_display');
谢谢!
非常感谢。我有一个 WordPress 插件包含这些代码行
这与你的函数相同吗?或者它比你的函数做了更多的事情?
哈哈!那是我的插件:D
它做的事情相同。不过,他的插件旨在用于你的主题中。
我的插件功能非常简单 :P
它还会扫描 SVG 文件以查找安全风险。
你做的这个插件在哪里,给我们一个链接 :)
我找到了 :) https://wordpress.org/plugins/scalable-vector-graphics-svg/
很棒的插件顺便说一句
完美运行!刚刚使用 WordPress 构建了我的第一个基于 SVG 的网站,完全没有使用图像文件。你帮了大忙。非常感谢 :)
你能给我看看吗?
上传部分运行良好,但是,SVG 在 WordPress 后台的任何显示位置都显示得很大,有没有办法防止这种情况?
使用我在此处找到的另一个代码片段,一个简单的样式注入似乎可以修复 SVG 在后台的显示问题,这修复了媒体上传器和特色图像区域中的显示问题
关于 @Steve 代码片段的更新,用于在媒体库网格中显示 SVG 缩略图。这是我首选的方法,因为它不依赖于缩略图类。相反,我使用选择器
img[src$=".svg"]
针对具有.svg
文件扩展名的图像。它不起作用 :(
我是否只需将代码放入 functions.php 文件中?我使用的是响应式主题,将代码添加到末尾(但我还更改了它并添加到代码的末尾),但它不起作用?
我该怎么办?
顶
在最近更新的 WordPress 中,add_filter() 会抛出一个错误消息,指出它未定义(已弃用)。是否有更新的方法允许将 SVG 上传到媒体库?
谢谢!
已解决!
我将代码放在 WordPress 的核心 functions.php 文件中,这是错误的。
此代码需要添加到主题的 functions.php 中,位置为:/wp-content/themes/[theme]/functions.php
很容易弄错。
有没有办法禁用 WordPress 在媒体上传器中压缩 SVG 文件?我的 SVG 文件大小不到 1KB,而 WordPress 会将其“压缩”到 150KB。嗯……
CSS-Tricks 总是能有一篇关于我正在尝试做的事情的文章,真是太棒了。
非常感谢你提供这个!
是的,它允许我上传 svg 图片,但我无法在我的前端看到它们,不知道为什么 :\
我明白了,它默认将宽度和高度设置为 1px,我可以手动更改它,但不确定如何自动更改……有什么想法吗?
下面的问题包含你可以粘贴到 wp-includes/media.php 中的代码
https://core.trac.wordpress.org/ticket/26256
尽管我刚刚更改了同一文件中的 image_downsize() 函数,替换
为
你仍然无法看到 svg 文件的缩略图,但我没有时间修复它。
谢谢
2014 年我才发现这个代码片段 - 我一定睡着了!非常感谢 :)
我该如何调整 svg 图像的大小?
在 WP 3.8.1 上不起作用
我现在正在使用 3.8.1,它在我的系统上可以正常工作。有什么具体情况吗?
在我的系统上,3.8.1 也能正常工作。
我刚刚找到一个技巧,可以在图像标签中为旧版浏览器显示 SVG 和备用位图,网址为 http://lynn.ru/examples/svg/en.html。
并在 http://www.mediaevent.de/tutorial/svg-responsive.html 上使其具有响应性(德语)。
我使用此函数创建了一个插件,但无论如何都无法让 svg 图形显示。
它允许我上传 svg 文件,但在前端或后端都没有显示。
还有其他人遇到这个问题吗?
可能是这个? https://css-tricks.org.cn/snippets/htaccess/serve-svg-correct-content-type/
如果你使用的是 Adobe Illustrator CC,则必须更改规格以匹配Chris 上面提到的文章,否则它将无法工作。我通过反复试验发现了这一点。希望这有帮助,并感谢 Chris 创建了这个很棒的网站!:D
安全性方面呢?为什么 WordPress 最初会阻止 SVG 文件?这是否意味着对网站有危险?
这里有点杞人忧天了。他们阻止的是不规则文件。大多数 WordPress 用户都不是技术人员。他们中的一些人是社交媒体和博客管理员,所以他们不需要 SVG 之类的东西。执行这些操作不会带来任何安全风险。它只会让你比普通的 WordPress 用户更厉害。
这根本不是杞人忧天。SVG 存在大量的安全风险,这也是 WordPress 核心不允许上传 SVG 的主要原因。
https://core.trac.wordpress.org/ticket/24251
https://www.owasp.org/images/0/03/Mario_Heiderich_OWASP_Sweden_The_image_that_called_me.pdf
我阅读了所有评论,这段代码在 WordPress 3.8.2 上运行良好。
要使用前端的特色图片,您需要通过 CSS 为文章图片设置样式。
对于回退方案,可以使用 svgmagic,这是一个很酷的 jQuery 插件。
谢谢!对我来说运行良好。
也运行得非常好。
请注意:插入 SVG 图片后,WordPress 会将其设置为 1px x 1px 的尺寸,看起来像一个小点。如果遇到这种情况,请在文本编辑器中修改尺寸。(
在我的 WP 3.8.3 上不起作用。
在 functions.php 中,它运行得完美无缺 :)
在 WordPress 3.9.2 上仍然可以工作 - 非常感谢!我最终使用了这段代码
倒数第三行(echo)应该是在 http://pastie.org/9470273 的位置。评论框不允许我粘贴它。
运行得非常好。谢谢,节省了我的时间。
有没有人成功地在主题自定义器中使用 SVG?用例 - 允许最终用户通过主题自定义器上传 SVG 徽标。
上面的代码在媒体上传器中运行良好,但在自定义器中却不行。尝试上传时,SVG 文件呈灰色且无法选择。
感谢任何见解。
非常感谢……请继续提供好的代码 :) 上帝保佑你 :)
嘿!
谢谢这个。好吧,实际上是所有内容。你提供了很棒的东西。我今天在使用这个脚本,并注意到它没有正确打印 CSS。总之……我稍微添加了一些内容,似乎解决了我的问题。SVG 在列表视图中显示不正确。但添加后,它们就可以正确显示了。也许这可以帮助其他人。
嗯,这很奇怪。我在 td 之前添加了一个 ,并在 CSS 右括号之后添加了一个。看起来评论功能过滤掉了它。
“特色图片”显示在我的页面上不起作用,直到我添加了另一个 ID。
#postimagediv img[src$=".svg"]
你是对的,我发现你可以使用
不起作用……
为什么 WP 将 SVG 保存为“.png”文件?
如果 4.X 中的缩略图仍然无法正常工作,您可能需要确保代码作为实际的内联样式表插入。我认为代码显示不允许正确显示 <style> 元素,该元素应该在 echo 的开头之后。
所以它实际上应该像这样
注意:这仅在列表视图中显示。
你做对了,Gray!
到目前为止,这在 WordPress 4.0 上运行良好。
我添加了特色图片支持并删除了媒体列表视图中图片周围难看的边框。
关于媒体网格视图有什么新闻或解决方案吗?
传奇!
这主要说明了作为媒体上传。如果我想直接编写 SVG 或直接编写 MathML,如何让 WordPress 正确解析它?它会自动将其更改为丑陋的内容并删除所有标签。
为什么不能在 wp-includes/media-template.php 的核心代码中添加类似这样的内容……以便在管理端显示矢量图形的缩略图视图和附件显示?
有人可以解释这样做有什么不妥之处吗?安全风险?启发我!
嘿,
我偶然发现了这些很酷的交互式 SVG 圣诞动画。
这是一个 Google Chrome 实验。
请查看。
https://ihatetomatoes.net/svg-christmas/
这是为了支持 SVG 用户。
非常感谢,并祝您更加强大!
谢谢!!这真的帮了我很多 :)
我敢肯定,地狱里有一个特殊的地方是为我刚刚做的事情准备的,但这对所需内容有效。
使用 JavaScript 将代码手动推送到 wp 媒体模板中……
https://gist.github.com/mchiron/860d474afc27018327d9
解决了!
https://gist.github.com/Lewiscowles1986/44f059876ec205dd4d27
在 IE(边缘)、FF(边缘)或 Chrome(边缘)中不需要 CSS 编辑,原始代码的每个人都付出了辛勤的努力,让我们敦促 Mullenweg 在未来的核心 WP 中包含它!
他们只花了 1 年零几个月就搞砸了……
基本上是因为 mime 类型中的“image/”前缀,您永远无法上传成功。WordPress 特别地将所有具有此前缀的文件传递给可用的 gd 扩展
getimagesize
。我在 git 仓库 中有一个新的分支,它更改为“application/xml+svg”,以便文件上传。接下来需要发生的是在成功上传后将 mime 类型重命名为“image/svg+xml”(正在寻找一个钩子)。
这种情况真的很糟糕,但请给我一个星期左右的时间,我将再次修复它。
已修复,合并到主分支 https://github.com/Lewiscowles1986/WordPressSVGPlugin
此外,现在有一个提议的核心补丁提交给 WordPress,以允许其开箱即用地支持此功能 https://core.trac.wordpress.org/ticket/31973,任何人都可以查看它,如果可能,请尽力将其纳入核心(为什么它还没有被纳入核心???)
@LewisCowles1
你是个天才!!!
谢谢这个 :)
我借鉴了其中一小部分代码并将其添加到我的插件“SVG 支持”https://wordpress.org/plugins/svg-support/(仍将在未来几天内将最新更新推送到存储库)它实际上做得更多,因为它允许您在将 SVG 内联嵌入到页面中后,根据类对其进行样式设置。
从去年开始,我花了几个小时试图解决这个缩略图问题,所以非常感谢您展示了这一点!!!
干杯
嗨,Ben,
感谢您的提醒和链接;)。很高兴我能帮上忙,它确实应该在核心代码中,但如果您访问过核心代码并查看过代码,您就会明白为什么它不在其中……
不幸的是,从 WP 4.2.2 版本开始,这似乎不再有效。也许他们加强了安全性?我尝试将 SVG 上传到媒体库时收到此消息。
“logo-petco.svg”由于错误而无法上传。
抱歉,出于安全原因,不允许使用此文件类型。
嗨,Nathan,
即使在 4.2.2 版本中,我仍然可以使用这个 gist 中的代码进行上传。
https://gist.github.com/Lewiscowles1986/44f059876ec205dd4d27
我从 WP 核心团队得到的反馈是,可标记的格式可能被利用(WP 使用 HTML 和 JS 的讽刺意味我并没有忘记),查看 gist 中的代码,将其保存到插件目录并激活;)
Lewis – 谢谢你的回复。
我把你的 PHP 文件放到了我的插件目录中,我还将 Chris 上面的代码放在了我的 functions.php 中,但仍然无法将 SVG 文件上传到我的媒体库中。我被难住了。在 4.2.2 之前我能够上传 SVG 文件。
我可以给你发几张截图,让你看看发生了什么吗?
嗨,Nathan,
截图肯定不会帮助你、我(或任何其他人)解决这个问题。帮我个忙,关闭所有插件,除了我的 gist 插件,它需要保持激活状态;切换到一个新的原生主题,不要修改它,或者核心 WordPress(如果你修改了核心,你需要回滚到干净的安装,或重新安装);再试一次。听起来像是你的主题,或者一个,也许是多个插件导致了这个问题。我在 WP 的很多安装上测试过这个插件,并且可以确认它适用于标准部署、标准的显著主题和子主题网站、引人注目的主题和子主题网站、2012、2014 和 2015 主题,以及 Akismet、Google Analyticator、Disqus 评论系统,我所有定制的客户端插件、WooCommerce,也许还有一些我没有安装的插件……
基本上,这个插件不是很智能,它只是修改了上传类型数组和一些由 WP 非常粗糙地塞入 DOM 的代码。
还要注意,gist 需要从 GitHub 复制,CSS-Tricks 在评论中的嵌入似乎有错误(我之前提交了一个问题)。
如果以上方法不起作用,如果问题很关键,请找专业人士帮忙;我实际上现在不在,离家几千英里远,所以回复可能很少;)
祝你好运!
Lewis – 你说对了。显然一个叫做“媒体库助手”的插件导致了这个问题(真是不可思议)。我一开始就应该尝试停用所有插件。感谢你的帮助。在国外玩得开心 :)
lewis,这太棒了!
现在你可以在列表和网格视图中看到 svg 预览了!
特色图像也正常工作了!
但有些东西仍然无法正常工作
– 如果我像普通图片一样将 svg 添加到 tinymce 字段中,高度为 1 x 1 px
– 特色图像也没有显示在前端(你需要为此编写 CSS)
– 没有 svgmagic 支持
让我们把我们的插件整合在一起,以获得最佳效果,我愿意尝试。
嗨,T,
谢谢!说实话,我有点不喜欢 WP 作为平台……对于 1px x 1px 的错误,我有一些修复方法。我已经更新了 gist 以进行修复;尽管最好确保所有图像都在一个容器中以限制大小,并且在某些 Android 浏览器上,使用 img { width:100%; height:auto; } 时高度会严重偏离 :(。
我相信 CSS-Tricks 上有一篇关于它的文章,但至少目前看来,这是一个复杂的问题,没有永久的解决方案……
祝你在接下来的修改中好运,随时可以在这里或 gist 上保持联系,并链接任何有趣的东西;)。
你好,
谢谢 Chris。这个网站无数次地指引我走向正确的方向。
你真是太棒了!!
当然,也要感谢评论区的所有好人! :)
祝你编码愉快,
n3nad
这非常有效!
这与 4.7/4.7.1 版本的 WordPress 有什么问题吗?我一直在尝试使其工作,但每次我尝试上传 SVG 文件时都会出现错误信息。
谢谢,很棒的提示!!我对于新的 WP 4.7.1 更新也有同样的错误。
在 4.7.1 中(wp-includes/functions.php)对 mime 检查进行了更改,有没有好的代码片段可以启用 SVG 上传?之前我使用过
function custom_mtypes( $m ){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );
但现在这不再起作用了。我认为第 2514 行的
function wp_get_ext_types()
是新的
上次它对我有用的时候是 WP 4.6.2 版本。
我甚至尝试从头开始安装该版本,但它不起作用
从 4.7.1 开始,WP 处理 mime 类型的机制发生了变化。我找到了这个,它应该可以放在现有代码的前面。这不是理想的解决方案,但比我见过的其他建议要好。
它应该与我昨天建议的 Safe SVG 插件 一起使用。
无论你做什么,都不要使用建议你包含……
在你的
wp-config
文件中。**这非常不安全!**PHP 文件上传任何人!:-|
我测试了(我)建议的解决方法,以使用 Safe SVG 插件 添加 SVG 支持,它可以正常工作。
这仍然不是一个很好的解决方法,但这是我目前找到的最好的方法。
我确实发现了 wordpress.org 上的这个帖子,也许值得关注一下,看看是否有人回复它。
如果有人有更好的建议,我非常乐意听取 :-)
任何建议全局允许上传未过滤类型的人都没有完全查看代码。问题在于你使用以“image/”开头的 mime 类型进行上传,它被传递给 GD 扩展以获取尺寸和文件信息,对于 SVG 文件返回 false。只需将“image/svg+xml”更改为“application/svg+xml”,然后稍后使用钩子
wp_check_filetype_and_ext
将 mime 更改为正确的存储类型查看你的代码,你还需要添加
svgz
扩展名,但这意味着不必使任何其他上传不安全以绕过 4.7 过于简单的图像信息检查。在 https://github.com/Lewiscowles1986/WordPressSVGPlugin/ 处有一个参考插件,它适用于 4.7 版本,并支持网格、附件视图等
WordPress 4.7.1 显然破坏了此处描述的 SVG 上传。这显然是一个错误,应该在 v4.7.2 中得到纠正。要修复它,请将以下代码添加到你的 functions.php 中
完整功劳归于 SVG 支持插件
我注意到了这一点!感谢你的代码,它为我修复了更新问题!
在 4.7.2 中,XLSX 文件上传也已损坏。此代码修复了它。
例如消除一堆变量和函数调用的小优化。
SVG 本身存在安全问题,因此 WordPress 默认不支持 SVG 上传。作为文档格式的 SVG 易受跨站点脚本 (XSS) 攻击,因为很难编写防止它们的 SVG 净化器。Bjørn Johansen 在此处更深入地解释了原因,他提供了一个更好的示例:https://bjornjohansen.no/svg-in-wordpress
如果你确实需要在 WordPress 主题中支持 SVG 上传,Bjørn 建议使用 Safe SVG 插件。虽然它并不完美,但它至少提供了一些安全性。如果它用于客户工作,也许可以 捐赠 并向其开发者 Daryll Doyle 表示一些感谢。
如果我正在做一个我知道只有几个经验丰富的用户会使用的小型网站,我会通过函数、插件甚至直接添加到
functions.php
中添加该功能。在其他情况下,如果我不确定所有用例,我会建议我的客户使用 Safe SVG 插件。
无论哪种方式,如果你在主题或插件中使用它,我都建议在自述文件中添加一些文档,以突出启用 WordPress 中的 SVG 上传的潜在危险和风险。
感谢 Sakin Shrestha 最初向我指出了这一点。
无论出于何种原因,你都不应该允许未经过滤的文件上传。
即使现在工作量稍微大一点,也应该明确定义所有内容。“SVG 不安全”的说法毫无道理!
它遇到的问题并不比 HTML 或 XML 多,而且所有漏洞都可以由浏览器供应商和良好的实践来修复(例如,购买、内部生产和使用信誉良好的 SVG 内容供应商)。
我们对上述代码进行了小的修改。现在它可以工作了。
add_filter( ‘wp_check_filetype_and_ext’, function($data, $file, $filename, $mimes) {
global $wp_version; if( $wp_version == ‘4.7’ || ( (float) $wp_version < 4.7 ) ) { 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 ‘ .attachment-266×266, .thumbnail img { width: 100% !important; height: auto !important; } ‘; } add_action( ‘admin_head’, ‘fix_svg’ );
顺便说一句,如果您在之间(简单的 CSS)有一个空格,上面的代码片段将起作用
function fix_svg_thumb_display() {
echo '
td .media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
width: 100% !important;
height: auto !important;
}
';
}
add_action('admin_head', 'fix_svg_thumb_display');
我不想听起来像个新手,但是 Codepen 中的代码是否破坏了你的所有东西?我甚至无法进入 wp-admin…
原始代码在 4.7.3 版本上再次有效!太棒了!!
我无法在 WP 4.73 上使缩略图预览工作。
我一直在使用这个插件 https://wordpress.org/plugins/svg-support/
它允许我通过 CSS 完全控制图像。
为媒体库提供 SVG 支持。
与新的图像小部件 (WP 4.8-alpha +) 配合使用。
仅限管理员上传 SVG 文件。
并且使用起来非常简单。
大家好,我已经很久没有来这里看看了。
据我所知,我的代码片段仍然有效。
后端唯一 3 个不起作用的功能是
– 在媒体列表视图中显示 SVG
– 在媒体单个视图中显示 SVG(单击图像时)
– 在特色图像中显示 SVG
据我了解,所有其他插件都使用 JavaScript 来实现这些功能。
但是,由于我喜欢保持轻量级,是否有办法在不使用任何 JS 代码的情况下做到这一点?
好的,我通过将正确的内容组合在一起解决了所有问题。感谢 Lewis 和 Guenni007。
此外,在普通的 TinyMCE 编辑器中使用 SVG 图像时,它也能正常工作。最大的优点是,它非常小巧,并带有 PNG 备用方案。
如果操作不复杂,我将尝试编译一个插件压缩包并将其作为插件上传到 WordPress。
现在唯一的问题是,当使用新的图像小部件和 SVG 时,会出现此错误
警告:在 /wp-includes/media.php 的第 989 行和第 988 行中,非法字符串偏移量“height”。
欢迎提供任何解决方案。
只需使用这个 https://wordpress.org/plugins/enable-svg-uploads/
酷,我不知道 Lewis 已经制作了自己的插件。
无论如何,它目前不适用于新的图像小部件(无法在前端看到它们)。
此外,它包含许多 .json 文件,并且没有 PNG 备用方案,因此我将暂时坚持使用我的方案。
我发现这似乎是一个调整大小问题,但还没有人找到解决方案。
使用屏幕截图提出问题(或多个问题),只要它不是主题或插件特定的,就会得到修复。然后每个人都会受益。照目前的情况,我不确定我是否理解了你的要点。 https://github.com/Lewiscowles1986/WordPressSVGPlugin。如果你会坚持使用它,那么自己动手也很好,Lewis 从 2015 年发布 gist 时就一直在使用它。
是的,我了解这种感觉,正如您在时间轴中看到的那样,我在 2014 年开发了我的方案,但从未正式发布。
我无法相信 Lewis 的安装量不到 10 次,而 Benbodhi 的安装量却有 100000 次——在我看来这很不公平。
我通过添加一个函数来使媒体网格缩略图工作,该函数将尺寸元数据添加到上传的 SVG 中。我只是将其放在我的 functions.php 中。
我在此答案中找到了它 https://wordpress.stackexchange.com/questions/255687/set-media-metadata-i-e-dimensions-field-on-svg-file-after-extracting-it-wit
在 WordPress 中对 SVG 支持的这些方法中,我唯一缺少的是内联 SVG 中的标题和描述功能。是否可以分别从媒体库中读取“替代文本”和“描述”属性并将其插入到内联 SVG 的相应元素中?
对我有用的解决方案是覆盖 upload.php?mode=grid 页脚中编写的 backbone.js 模板。本教程帮助了我: https://www.ibenic.com/extending-wordpress-media-uploader-embed-options/。
在覆盖模板中(所有模板都写在 wp-includes/media-template.php 中,它们将打印到管理页脚)id=”tmpl-attachment” 中,您必须替换行
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
为
<img src="{{ data.size.url }}" class="thumbnail" draggable="false" alt="" />
你对第二个代码片段是认真的吗?它只是将 CSS 倾倒到管理页面!
在通过 wp hook 在 wordpress 5.0.3 上上传 svg 文件时,我遇到了与你们中的一些人相同的错误,但启用 SVG 上传的效果非常好,以防有人在 2019 年 1 月 21 日遇到同样的问题。
干杯,伙计。
将两者都粘贴到 functions.php 中。
嗨。我无法上传 webp。你有什么解决方案吗?