WordPress 媒体库添加SVG文件:SVG Support

插件说明

将SVG文件安全地上传到您的媒体库,并像使用其他任何图像一样使用它们。

但是SVG支持具有更多功能!!!请继续阅读以了解更多信息。

在您的WordPress网站上使用SVG图像时,可能很难使用CSS在SVG中设置元素样式。现在,您可以轻松!

可缩放矢量图形(SVG)在现代Web设计中正变得司空见惯,使您可以嵌入具有小文件大小的图像,这些文件可以缩放到任何视觉大小而不会降低质量。

插件不仅提供SVG支持(如名称所示),还允许您使用简单的IMG标签轻松嵌入完整的SVG文件的代码。

通过将类添加”style-svg”到您的IMG元素,此插件可以用”style-svg”完整的SVG代码动态替换包含该类的所有IMG元素,以内联方式呈现它。

这样做的主要目的是允许对SVG元素进行样式设置和动画处理。通常embed,单独使用object或img标记时,样式选项受到限制。

插件特征

  • SVG对您的媒体库的支持
  • 内联您的SVG代码
  • 与新的图像小部件一起使用(WordPress 4.8+)
  • 直接使用CSS设置SVG元素的样式
  • 使用CSS和JS对SVG元素进行动画处理
  • 带有说明的超级简单设置页面
  • 将SVG上传功能限制为仅管理员
  • 设置自定义CSS目标类
  • 极其简单易用–简化了SVG文件的复杂使用

使用教程

下载安装插件:网站后台——插件——搜索插件「SVG Support」在线安装。或者前往 wordpress 插件中心进行下载:SVG Support(文末附下载链接)

首先,安装并激活SVG支持(此插件)。

激活后,您可以像其他任何文件一样简单地将SVG图像上传到您的媒体库。

作为管理员,您可以转到管理员设置页面“设置”>“ SVG支持”,并将SVG文件上传限制为仅管理员,甚至可以根据需要定义自定义CSS类。

如果您只需要上传SVG文件用作图像,则无需启用“高级模式”。禁用它可以确保前端脚本不会排队,并且不必要的设置保持隐藏状态。

对于高级用途:在“设置”>“ SVG支持”下启用“高级模式”。

启用高级模式后,您可以像嵌入标准图像一样嵌入SVG图像,另外还需要在”style-svg”您的IMG标签中添加(在文本视图中)类(或定义的自定义类),以使此插件可以换出与您的实际SVG代码一起使用。

<img class="style-svg" alt="alt-text" src="image-source.svg" />
<img class="your-custom-class" alt="alt-text" src="image-source.svg" />

现在,整个IMG标签元素将被SVG的实际代码动态替换,从而使内部内容具有针对性。

这使您可以使用CSS和JS定位SVG中的元素。

您可以从IMG标记中删除所有其他属性,因为它仍然会消失。

当您将SVG插入帖子或页面时,有一种设置可以自动将您的课程添加到IMG标签中,这也可以删除不必要的标签。
从2.3.11版本开始,您可以强制所有的SVG文件通过一个复选框内嵌显示。此外,您现在可以选择使用JS文件的缩小版本还是扩展版本。

特色图片:如果帖子/页面与SVG一起保存为特色图片,则特色图片元框中将显示一个复选框,使您可以内联呈现(仅当高级模式处于活动状态时)。

请注意:如果未显示SVG,则显示的高度和宽度可能为0。在这种情况下,您需要在CSS中设置自己的高度和宽度,以使SVG文件正确显示。

PS

与允许上传任何文件一样,存在潜在的风险。如果您信任他们,则仅允许用户上载SVG文件。您可以从设置页面中选择仅将SVG使用限制为管理员。默认情况下,具有媒体库访问权限或upload_files功能的任何人都可以上载SVG文件(即管理员,作者和编辑者)。请注意,SVG文件实际上是XML,如果您不小心谁拥有上传特权,该文件将允许某人注入恶意代码。

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 支付以后下载 请先登录登录 评论后刷新页面下载评论 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

人已赞赏
博客杂志

WordPress 插件 Advanced Rich Text Tools for Gutenberg:Gutenberg 增加文字色、背景色

2021-1-28 22:42:47

博客杂志

切换标签离开当前页面时改变网站title提示

2021-1-30 22:40:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索