如何在 WordPress 中使用 SVG?

SVG 文件是一种矢量图形文件,可自由缩放大小而不影响画质。同时,SVG 格式的图片的大小比 PNG 或 GIF 更小。

但是在默认情况下,我们不能在 WordPress 中使用 SVG 格式文件。本文我们向您介绍如何在 WordPress 中启用这种类型的文件。

什么是 SVG?

SVG 是 XML 格式的结构化文本文档,其中图像通过使用线条、形状和属性来描述。而最常见的图像格式(如 GIF、JPG、PNG 或 WebP)被称为“光栅”,是通过像素来描述图像。而 SVG 改为使用文本。

通过 SVG 绘制一个简单的圆:

<svg viewBox="0 0 20 20" >
    <title>Estructura básica del SVG</title>
    <style>
        .circle {fill: blue}
    </style>
    <circle class="circle" cx="5" cy="5" r="5" />
</svg>

SVG 格式的优缺点

SVG 格式的优点

SVG 格式的优点很多,最主要的一点是,在缩放时不会丢失任何细节。

  • 可以在不损失质量的情况下缩放 SVG 文件。它在所有屏幕分辨率下都保持相同的清晰度。
  • 它们占用的网络存储空间更少,加载速度比使用像素的图像快得多。通过使用 SVG 格式文件,可以提升 WordPress网站加载速度。
  • 可以使用任何文本编辑器对其进行编辑。
  • 可以使用 CSS 样式在 SVG 文件中创建动画和视觉效果。
  • SVG 文件接受 Javascript 代码。
  • 可以使用外部 Javascript 代码调整 SVG。
  • 它们以 Gzip 或 Brotli 格式压缩。
  • 所有主要浏览器都支持它们。

SVG 格式的缺点

SVG 格式的一些缺点:

  • 对于一些复杂的图像(例如照片),使用 SVG 格式的效果不佳
  • 使用 SVG 需要额外的安全措施

由于 SVG 是文本文件,存在着被注入恶意代码的风险。因此,Wordpress 默认不支持 SVG 格式的文件。

在 WordPress 中使用 SVG 图像

在这里,我们介绍几种在 WordPress 中使用 SVG 图像的方法。第一种是通过安装 Safe SVG 插件的方式,第二种是通过添加代码的方式,第三种是通过代码为特定用户角色启用 SVG 图片。

方法一:通过 Safe SVG 插件启用 SVG

安装和激活 Safe SVG 插件,然后不需要行任何配置,就可以直接使用 SVG 文件了。

通过 Safe SVG 插件启用 SVG
通过 Safe SVG 插件启用 SVG

方法二:通过代码启用 SVG

要通过代码的方式,在 WordPress 中启用 SVG 图片,可以按照下面的方式进行操作:

第一步,找到主题或子主题的 functions.php 文件。

第二步,通过 sftp 工具连接服务器,然后找到并编辑 functions.php 文件。

第三步,接下来,将以下代码粘贴到 functions.php 文件的底部。

/**
 * Add svg to WordPress
 */
function add_file_types_to_uploads($mime_file_types){
    $mime_file_types['svg'] = 'image/svg+xml';
    return $mime_file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

方法三:通过代码为特定角色的用户启用 SVG

该方法与第二种方法类似,同样是编辑主题或子主题的 functions.php 文件。

然后将下面的代码添加到文件的底部。

/**
 * Add svg to WordPress admin users
 */
function add_file_types_to_uploads($mime_file_types){
    if (current_user_can('administrator') ){
        $mime_file_types['svg'] = 'image/svg+xml';
    }
    return $mime_file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

在该代码中,我们添加了一个条件。通过这样做,我们仅为 WordPress 管理员启用了 SVG 文件。

作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/wordpress/how-to-use-svg-in-wordpress/

(0)
牛奇网牛奇网
上一篇 2022年10月3日
下一篇 2022年10月4日

相关推荐

发表回复

登录后才能评论