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

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

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

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

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

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

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

插件使用教程

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

 

特征

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

用法

首先,安装并激活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文件正确显示。

如果您有任何问题,请使用支持标签,我们将尽力尽快与您联系

安全

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