什么是 SVG 文件
SVG 或可缩放矢量图形文件是一种独特的图像格式，它依赖于“矢量”数据来形成可视图像。 它是一种基于 XML 的矢量图像格式，甚至可以使用文本编辑器进行操作。
虽然目前不常见，但 SVG 正随着 Google、Dropbox 和 Reddit 等网站的使用呈指数级增长。
为什么我们应该使用 SVG 文件
也许使用 SVG 的最大优势在于它能够扩展到任何分辨率。 与其他图像格式（如 PNG 或 JPG）不同，它们在没有像素化的情况下无法缩放。
SVG 可以放大无数倍，使其成为 Web 和图形设计师使用的理想选择，它们不会变得模糊，而是看起来完美的矢量。
您可以在创建 WordPress 博客或任何其他网站时使用 Svg 图像——即使您使用的是 WordPress 替代品。
使用 SVG 的更多理由包括：
- 设计没有可扩展性问题的徽标
- 创建图表、图形和图表
- 使用 CSS 为 SVG 制作动画（我更喜欢使用）
- 更好的 SEO 排名，因为谷歌也索引了 SVG
- 更小的文件大小，从而加快您的网站
WordPress 和 SVG
WordPress 支持不同的文件格式，但 SVG 不包含在默认列表中。
与 HTML 代码类似，SVG 文件是基于 XML 的，包含 XML 标记语言代码。 XML 代码由您的 Internet 浏览器或图像编辑工具解析，以在您的设备屏幕上呈现图像。
但是，SVG 依赖于 XML，很容易出现漏洞，尤其是在安全性方面。 黑客可以闯入您的网站或网络，以未经授权访问站点中存储的数据或其连接的数据库，启动试错技术，例如蛮力攻击或跨站点脚本攻击。
由于这些安全威胁，WordPress 默认不允许使用 SVG。
如何将 SVG 上传到 WordPress
尽管 WordPress 默认不支持 SVG，但有几种方法可以通过很少的重新配置将它们合并到您的网站中。 包含 SVG 有两种方法，第一种是手动过程，第二种是通过插件。
方法一：如何手动启用 SVG WordPress 上传
打开您网站的functions.php 文件（通过仪表板上的外观–> 编辑主题）。 添加以下代码片段，让 WordPress 允许通过媒体库上传 SVG。
找到这段由 Chris Coyier 编写的代码：
// 允许 SVG
add_filter('wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
全局 $wp_version;
if ( $wp_version !== '4.7.1' ) {
返回$数据；
}
$filetype = wp_check_filetype($filename, $mimes);
返回 [
‘ext’ => $filetype[‘ext’],
'类型' => $文件类型[‘type’],
'proper_filename' => $data[‘proper_filename’]
];
}, 10, 4);
函数 cc_mime_types( $mimes ){
$哑剧[‘svg’] = '图像/svg+xml';
返回$mimes；
}
add_filter('upload_mimes', 'cc_mime_types');
函数 fix_svg() {
回声'
';
}
add_action('admin_head', 'fix_svg');
强烈建议确保为 SVG 上传指定自定义用户角色。 此步骤对于确保您的网站安全非常重要，因为 SVG 可能会导致安全漏洞。
方法2：使用插件
为您的 WordPress 网站启用 SVG 的第二种方法是使用插件。 名为 Save SVG 的免费插件利用了 SVG-Sanitizer 库，可从官方 WordPress 存储库下载。 您也可以通过在“添加新”插件页面上搜索来下载它。
只需将插件下载并激活到您的 WordPress 站点即可。 它还允许您查看 SVG 文件以及媒体库中的其他流行格式。 成功下载后，您无需进行任何特定设置。
此外，该插件的高级版本包含附加功能，例如限制某些用户上传 SVG 文件。
需要考虑的重要一点是，这个插件（以及其他一些插件）无论如何都不受 WordPress 核心的支持和/或认可。 因此，请谨慎使用，风险自负。
有什么危险/风险？
SVG 文件格式有很多好处，但默认情况下不包含在 WordPress 中的原因是安全风险。 如果您不熟悉 WordPress 安全性，我建议您检查 WordPress 维护服务。
由于 SVG 文件是基于 XML 的文档格式，而不是完全的图像格式，它可以包含嵌入式 CSS 和 JavaScript 代码。
SVG 文件可以在记事本等文本编辑器中打开，您可以轻松修改代码。 您的浏览器可以沿着脚本和嵌入代码运行任何 SVG 文件。 此代码可能是恶意的，也会使计算机处于安全风险的边缘。
此外，强烈建议下载可靠的插件以支持 SVG。 只是不要仅仅因为它是免费的而去下载任何可用的插件。
使用 SVG 文件的简单 XSS 攻击示例：
让我们在记事本文件中编写一些 SVG 代码：
<---- SVG Code ---><!--?xml version="1.0" standalone="no"?-->
<script type="text/javascript">
alert("XSS Attack");
</script>
<--- SVG Code -- >
正如您在该部分中看到的：
您可以在此处阅读有关 XSS 漏洞的更多信息：https://owasp.org/www-community/attacks/xss/
其他 SVG 漏洞包括：
1. Html 注入
2. XML实体处理
3. 拒绝服务
结论
由于 SVG 图像格式具有极大的灵活性和特性，我建议在 WordPress 网站中使用它。 请记住使用正确的插件和安全措施在您的网站中创建漏洞。