如何在 WordPress 中使用 SVG

已发表: 2019-02-15

尽管 SVG 在 2000 年代初期已经标准化，但由于浏览器支持不佳，这种极具吸引力的图像格式在当时并未受到重视。 近年来，这一切都发生了巨大的变化，因为 SVG 正迅速成为网络上事实上的图像形式。

爱上 SVG 的不仅仅是平面设计师，还有希望通过减小整体图像大小来加快博客速度的 WordPress 用户。 这篇文章将探讨如何在基于 WordPress 的网站上使用 SVG 的主题。

什么是 SVG？

SVG（可缩放矢量图形）是一种基于 XML 的图像格式，用于在 Web 和应用程序中显示图形。 从根本上说，SVG 文件只是 XML 代码的集合，用于指定 SVG 图像中使用的不同形状和颜色。

由于您可以使用文本编辑器打开 SVG 文件，因此使用基本的 CSS3 和 JS 代码进行自定义也很容易。 因此，SVG 因其多功能的灵活性而受到现代 Web 用户的高度青睐。

最重要的是，W3C 将 SVG 视为行业领先的标准。 因此，SVG 可以与其他基于 Web 的技术（如 DOM、HTML 等）完美地协同工作。

为什么 SVG 很重要？

SVG 图像是基于矢量的，因此，SVG 图像可以在屏幕上无限缩放而不会损失质量。 这方面的核心交互是Browser XML； 浏览器在每次增加或减少时绘制 XML 规范。

不用说，SVG 文件比 PNG 或 JPEG 等传统格式灵活得多。 CSS 和 JavaScript 之间的直接交互意味着您可以随时随地调整 SVG 图像。 当您进行新设计或其他工作时，这一点至关重要。

SVG 动画鼓套件
您几乎可以使用 SVG 设计任何东西！ 如果您愿意，甚至是动画架子鼓。 看看它的实际效果：https://codepen.io/iamjoshellis/pen/KVdQqm

在性能方面，SVG 图像的尺寸往往比任何同类图像都要小得多。 因此，通常会看到插图、徽标和图标被构建为矢量图形。 这也导致了许多图标字体的发展，我们将在后面的文章中简要提及。

简而言之，SVG 提供了灵活性、减小了图像大小，并为提高 WordPress 网站的图像性能奠定了坚实的基础。

SVG 图像是如何创建的？

可以通过两种方式创建 SVG 图像：编写“代码”，以及使用现代图形设计软件。 第一种方法是编写 XML 脚本，这是构建 SVG 文件的传统方法，但可以证明是一种缓慢且低效的技术。

一个简单的正方形集合在 XML 格式中可能看起来像这样：

SVG 示例代码

如您所见，为复杂​​的图形重复编写此代码与在脚上射击自己是一样的。

另一种方法是使用软件，这是构建 SVG 图形最快、最有效的方法。 使用基于矢量的软件，您可以专注于创建图形，然后将它们导出为现成的 SVG 文件。

亲和设计师 SVG (1)

Affinity Designer 是著名的专业矢量编辑程序，Adobe Illustrator、Sketch、Figma 和 Inkscape 等软件也是如此。

无论您决定使用哪种软件，唯一真正重要的是您对要创建的图形类型的计划。 导出功能在所有现代程序中都是一样的。

不用说，SVG 始终是相同的 XML 结构。 因此，您既可以将 SVG 图像用作文档，也可以将其插入内联。

WordPress 是否支持 SVG？

听起来可能很奇怪，具有 WordPress 范围的平台实际上并不支持 SVG 文件格式。 但仅仅是因为可怕的安全问题。

您会看到，与 PNG/JPG/GIF 文件类型不同——SVG 不是光栅化图像，而是矢量。 因此，SVG 面临着 JavaScript 漏洞利用的风险，而 WordPress 选择默认不允许 SVG 在 WordPress 中使用。 从各个角度来看，这都是有道理的。

SVG 图标 (1)

尽管 WordPress 贡献者多年来一直在谈论 SVG，但为了防止大规模的安全问题，有太多的角度需要解决。

因此，解决此问题的唯一方法是通过插件或使用主题功能将 SVG 启用为文件格式。

如何在 WordPress 网站上启用 SVG 图像？

在我们进入插件部分之前，您实际上可以通过主题目录中的functions.php文件在 WordPress 中启用 SVG。 这绝对是最快的方法，但也是最不安全的，因为您启用了原始格式的 SVG。


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = 数组（）；
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);

返回 $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

而您的另一个更安全的选择是使用插件。 以下是在 WordPress 中启用 SVG 的三个最著名的插件。

SVG 支持

SVG 支持 WordPress 组织

添加 SVG 支持是成功的一半，您可能还想添加自定义样式、动画效果和启用限制。 但要做到这一切，你需要一些支持。

借助 SVG 支持——您可以开始使用传统的 Image 标签将 SVG 文件添加到您的帖子和页面中。 例如，您可以为您的图像添加一个新的 CSS 类：“style-SVG”，它将获取您上传的 SVG 图像并在线显示其内容。

这个插件的主要特点是：

  • 在 WordPress 媒体库中启用 SVG 文件的管理。
  • 将上传的 SVG 图像转换为内联代码。
  • 支持将 Alt 和 Caption 标签添加到所有 SVG 图像的 Image Widget。
  • 使用自定义 CSS 为单个 SVG 图像设置样式。
  • 使用 CSS3 和 JavaScript 实现动画效果。
  • 插件仪表板中的详细设置页面。
  • 强制执行基于权限的访问。 例如，将上传限制为仅具有管理员权限的帐户。

请注意，尽管这个插件提供了什么，但利用 SVG 的风险是相当真实的。 不要为您不信任的用户启用 SVG 文件管理。 因此，理想情况下，您只会为管理员级别的用户启用此功能。

重申一下，任何拥有上传权限的人都可以上传新的 SVG 文件，但是因为 SVG 文件是基于 XML 的——它们很容易通过恶意注入等方式被利用。

安全 SVG

安全的 SVG WordPress 组织

Safe SVG 是一款让您无需担心潜在安全风险的插件。 该插件专门用于清理任何新的 SVG 上传并防止恶意意图。 此外，Safe SVG 增加了查看您通过媒体库上传的 SVG 文件类型的功能。

拥有 50,000 名活跃用户，您可以依靠 Safe SVG 提供出色的安全性能记录。 值得注意的是，这个插件有两个不同的版本； 免费和付费。

免费版本包括清理新上传的功能，还增加了对媒体库中 SVG 查看的支持。

wp svg (1)

如果您选择专业版，那么您将获得额外的功能，如 SVGO 优化。 这种优化技术将进一步减少 SVG 上传的文件大小。

此外，使用 Pro，您可以选择谁可以或不可以上传新的 SVG 文件。 因此，您可以仅限制特定用户的访问。 最后，通过购买插件，您可以获得高级支持——在您最需要的时候回答您的问题。

添加完整的 SVG 支持

添加完整的 SVG 支持 WordPress 组织

您应该使用我们列出的前两个插件获得合理的结果。 但是，如果您喜欢使用简码将 SVG 添加到您的网站的想法，请查看此插件。

该插件为您的 WordPress 添加了一些 SVG 功能，并使用了基于 Alexey Ten 的想法的 SVG 技术。 这种将 SVG 图像包含到 HTML 中的方式似乎是目前性能和兼容性的最佳组合。

添加完整的 SVG 支持支持 SVG 上传和短代码生成。 此外，您可以使用自定义 CSS 自定义每个 SVG 元素的样式。 最后但同样重要的是，您可以为您上传的任何或所有 SVG 指定后备照片。

WordPress 还有哪些其他有用的 SVG 插件？

除了向 WordPress 网站添加 SVG 支持之外，还有哪些其他插件可以使您的网站受益？ 每个人和他们的祖母都知道有显着的性能优势。 无论是在文件大小方面，还是在浏览器内联渲染矢量图的能力方面。

WP SVG 图标

WP SVG 图标 WordPress org

图标是一种视觉元素，这些元素往往会给设计带来新的生命。 有趣的是，这个插件是出于个人需要而诞生的。 作者想开始在他的设计中实现更多的 SVG 文件，但找不到解决方案。 因此，他花时间和精力创建了 WP SVG Icons。

该插件非常易于使用，只需单击几下即可替换网站上现有的图标。 最重要的是，您也不需要为 Retina 显示器重新创建每个图像，只要您设置 max-width，图标就会自动缩放。

就像作者的情况一样，这个插件非常适合各种开发、多站点和客户端工作。 没有任何限制，您无需担心主题兼容性或类似性质的任何事情。

该优惠似乎还有一个高级版本，具有启用自定义图标上传的功能。 因此，您不仅限于集成图标。

SVG 社交菜单

SVG 社交菜单 WordPress org

这是一个插件，用作通过 SVG 图像显示社交媒体图标的小部件。 要使此插件正常工作，您只需创建一个新的 WordPress 菜单，其中包含指向您的社交媒体资料的链接。

然后，选择自定义 SVG 社交菜单位置并保存新菜单。 之后，您可以在侧边栏或博客的其他小部件就绪区域中使用 SVG 社交菜单小部件。

当前可用的图标适用于以下网站和平台：plus.google、WordPress、facebook、twitter、dribbble、Pinterest、Github、Tumblr、Youtube、Flickr、Vimeo、Instagram、LinkedIn、xing /feed、mailto。

SVG 标志和文字效果

SVG 标志和文字效果 WordPress org

SLATE 是一个插件，支持添加自定义 SVG 效果的简码。 您可以使用此插件来提升强大的品牌形象、强调 CTA 小部件或使元素以自己的方式脱颖而出。 短代码支持的智能使用意味着您可以在任何给定时间编辑和自定义效果。

例如，您可以将不同的颜色、字体、过滤器混合在一起，并利用许多填充图案，这些填充图案表现为引人注目的设计效果。 SLATE 提供与矢量编辑软件一样多的创作自由，但您无需使用任何软件！

那么，有哪些关键功能呢？

  • 文本。 生成可以复制引人注目但对 SEO 友好的文本效果的短代码。 就像您在上面的快照中看到的一样。
  • 字体。 不确定从哪里获得自定义字体？ 无需担心，因为 SLATE 预装了庞大的 Google 字体库。
  • 填充图案。 字母用您选择的填充图案填充。 填充图案有参数。 控制各种尺寸、距离和颜色以产生独特的变化，或者让默认设置为您服务。

还有更多！ 这个插件是一个强大的工具，可以让你的文本和标志以非常精确的方式设计。 通过 SVG，同样如此。

在哪里可以找到 SVG 图形？

如果您没有任何矢量图形设计方面的专业知识，您能做什么？ 幸运的是，如今找到 SVG 非常简单明了。 最多，您只需链接回制作图形的原始作者。 许多平台提供免费图片，无需注明出处。

以下是一些提供免费 SVG 内容的精彩网站：

  • FontAwesome — Font Awesome 是世界上最棒的字体图标库。 该项目多年来一直很强劲，不仅对浏览器而且对特定框架和设计软件都有深入的支持。 这个面向可访问性的字体包绝对是一个杀手，而且使用起来非常简单！ 事实上，我确信有十几个 WordPress 插件支持 Font Awesome！
  • Vecteezy — Vecteezy 可以说是地球上最大的矢量图形平台。 在定制设计、社区贡献和基于 Web 的数据的推动下：Vecteezy 提供任何种类、形状或形式的矢量。 下载文件也非常容易。 您所要做的就是链接回您从中获取文件的作者页面。 这是我发现自己经常使用的网站。
  • SVG 背景— 您是否跟上最新的网页设计趋势？ 现在有很多创意领域正在探索设计。 其中之一是 SVG 背景。 你也见过他们。 波浪纹、曲线等。 使用此站点生成易于访问的 SVG 背景！
  • SVG Grabber — 这个 Chrome 扩展程序绝对是从不同网站页面获取 SVG 图像的天赐之物。 只需单击图标，扩展程序就可以获取页面上的每个 SVG 文件。 当然，您必须尽可能遵守版权规则，但总的来说，这感觉像是一个经常使用的可靠扩展。
  • 矢量标志区— 根据您工作的细分市场，您可能会发现收集来自世界领先品牌的基于矢量的标志很有用。 您还可以在发布特定公告或促销时使用这些文件。 如今，大多数照片编辑器都可以将 SVG 文件转换为 PNG 或其他格式。

这就是我们真正接触到的东西的表面。 就个人而言，SVG 在我处理网站设计甚至创建特色图像的方式上产生了很大的不同。 使用 SVG，您可以真正在色谱、形状的不同对齐方式等方面全力以赴。

当然，这与使用美丽的真实摄影不同，但在任何给定的网站上，您都可以找到很多可以用矢量图形替换 JPG 的地方。 这正是这篇文章的目标，让您大致了解如何在 WordPress 中使用 SVG。

无论我们是否实现了那个目标，我们都会让你来判断。 如果您想在这篇文章中添加任何内容，或者您​​有其他资源要分享 - 请注意我们的评论部分始终开放。