是否要将SVG文件添加到WordPress站点？ 默认情况下，WordPress允许你上传几乎所有流行的图像、音频和视频文件格式。然而，SVG不在其中。这是因为图像格式存在潜在的安全问题，但使用它们是有安全方法的。 在本文中，我们将向您展示如何轻松、安全地在WordPress中添加SVG。 矢量图形不使用像素。 相反，它们使用二维地图，该地图将您正在查看的图形定义为坐标。当你放大时，图像不会像素化，因为它根本不能。 这使您能够在不降低质量的情况下放大矢量图形。最重要的是，SVG图像的文件大小可以比PNG或JPG文件小得多。 矢量图形通常用于图标、图标字体、网站徽标和品牌图像。您可能希望为您的公司徽标、图标或其他图形将SVG文件添加到WordPress。 尽管听起来很酷，但是SVG文件可能有点不安全。这就是WordPress默认不支持SVG文件上传的原因。 如果您在WordPress中上传SVG图像，则会看到以下错误消息： 对不起，出于安全原因，不允许使用此文件类型。 接下来，您将进入“编辑代码片段”页面，在该页面中，WPCode已经配置了代码运行所需的所有设置。 你所需要做的就是点击切换到“活动”，然后按下“更新”按钮。 现在，你可以上传SVG文件，而不会收到WordPress的错误或警告消息。 然后你就可以像对待WordPress网站上的任何其他图片一样处理它。 默认情况下，WPCode代码片段只允许具有管理员角色的用户将SVG添加到WordPress。 您还可以将权限授予所有其他用户角色，只需删除您在下图中看到的代码片段的第14-16行。 你也可以通过在每一行的开头添加两个斜杠‘//’，将它们变成浅棕色，从而将它们‘注释掉’。WPCode不会执行它视为注释而不是代码的代码片段的任何部分。 您可以在下图的第11-13行中看到这方面的示例。 无论哪种方式，删除代码后，所有用户都可以将SVG文件上传到您的WordPress站点。只需确保点击‘更新’来保存你所做的任何更改。 在设置页面上，您需要选中“限制为管理员？”旁边的框。选择。这将只允许站点管理员在WordPress中上传SVG文件。 下一个选项是打开高级模式。仅当您想要使用高级功能，如CSS动画和内联SVG渲染时，才需要选中此选项。 别忘了点击“保存更改”按钮来保存你的设置。 现在，您可以创建新帖子或编辑现有帖子。在文章编辑器中，您将像上传任何其他图像文件一样上传您的SVG文件。只需在编辑器中添加一个图像块，然后上载SVG文件。 您现在可以在WordPress中上传和嵌入SVG文件。 方法3.使用安全的SVG在WordPress中上传SVG文件 该方法还使用了一个插件，允许您对上传到WordPress的SVG文件执行清理。 您需要做的第一件事是安装并激活安全的SVG插件。有关更多详细信息，请参阅我们关于如何安装WordPress插件的分步指南。 该插件开箱即用，并且没有需要您配置的设置。您可以简单地继续并开始上传SVG文件。 缺点是，这个插件允许所有可以在你的WordPress站点上发表帖子的用户上传SVG。为了控制谁可以上传文件，您需要购买该插件的高级版本。 我们希望本文能帮助您学习如何在WordPress中安全地添加SVG文件。你可能还想看看我们的文章，关于如何修复WordPress中最常见的图像问题，以及最好的SEO插件和工具。 中国和中国都是如此。
SVG
可缩放矢量图形 (SVG) 是一种独特的图像格式。与其他品种不同，SVG不依赖于独特的像素来构成您看到的图像。相反，他们使用“矢量”数据。
可缩放矢量图形 (SVG) 是一种独特的图像格式。与其他品种不同，SVG不依赖于独特的像素来构成您看到的图像。相反，他们使用“矢量”数据。 通过使用SVG，您可以获得可以放大到任何分辨率的图像，这在许多其他用例中对网页设计非常有用。在本教程中，我们将问一个问题：什么是SVG 文件？然后我们将教您如何使用该格式。 什么是SVG文件？ SVG是使用矢量构建的图形。对于初学者来说，向量是具有特定大小和方向的元素。理论上，您可以使用矢量集合生成几乎任何类型的图形。以这张带有黑色边框和阴影的蓝色矩形图像为例： 这是另一种称为便携式网络图形 (PNG)的图像文件，用于插图和绘图。如果您想使用矢量图形复制类似的内容，则需要使用XML代码生成它（与用于站点地图的代码相同。）以下代码可以获得相同的结果： <?xml version=”1.0″ standalone=”no”?> <svg xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ version=”1.1″ baseProfile=”full” > <rect x=”0″ y=”0″ width=”60″ height=”60″ style=”stroke: blue;”/> <rect id=”myRect” x=”25″ y=”25″ rx=”0.6″ ry=”0.6″ width=”150″ height=”150″ fill=”blue” stroke=”black” stroke-width=”8″/> </svg> 理论上，如果您将这段代码放入一个HTML文件中，您将看到一组与PNG相似的矩形——也就是说，只要您使用的浏览器支持SVG文件。尽管两个图像看起来相同，但SVG文件提供了其他格式所没有的一大堆好处。例如，SVG能够在放大或缩小时保持图像质量。 如果您继续放大PNG矩形，您会注意到它的质量在某个时候开始下降。对于更复杂的基于像素的图形，退化会更快地变得明显。然而，SVG在几乎任何分辨率下看起来都不错。 为什么要使用SVG文件？ 许多网站几乎可以互换使用PNG和JPEG等格式。不过，SVG并不是那么通用。如果您尝试使用矢量重新创建复杂的照片，通常最终会得到大量且无法使用的SVG文件。 不过，SVG格式是一整套其他场景的绝佳选择： Logo设计。由于您可能会在网站和社交媒体上重复使用Logo，因此使用SVG可以解决任何潜在的可扩展性问题。 简图。SVG非常适合图表和任何其他依赖于纯线条的插画。 动画元素。您可以使用CSS为SVG设置动画，这使它们成为网站设计中的有用组件，特别是对于微交互。 图表和图形。 您可以使用SVG创建支持动画的可缩放图形和图表。 由于SVG使用XML格式，这也使它们既可搜索又可索引。只要您使用正确的辅助功能标签，屏幕阅读器就可以解释SVG文件。 最后，SVG文件往往比其他格式的高分辨率文件小得多。在纸面上，这意味着您可以缩小一些页面大小并减少加载时间。但是，除非您计划将大部分图像转换为 SVG，否则性能提升可能很小。 如何创建SVG文件 对于SVG文件，您可以采用两种方法。您可以从头开始创建它们或获取现有图像并进行转换。让我们从手动方法开始。 1.手动创建SVG文件 创建SVG文件通常不需要像我们之前所做的那样输入矢量信息。那只是展示概念的一个例子。相反，您可以像创建任何其他图形一样创建SVG-通过使用设计程序并将文件另存为SVG。许多现代图形设计工具都支持开箱即用的SVG。一些顶级选项包括： […]
SVG是一种基于XML的矢量图像，现在很多网站使用这种格式来显示网站Logo和图标。 它们在开发人员和设计人员中特别受欢迎的主要原因是它们是可缩放的图像格式，通常文件大小较小（有时相当大），完美适配视
SVG是一种基于XML的矢量图像，现在很多网站使用这种格式来显示网站Logo和图标。 它们在开发人员和设计人员中特别受欢迎的主要原因是它们是可缩放的图像格式，通常文件大小较小（有时相当大），完美适配视网膜屏幕。 默认情况下，WordPress不允许您上传SVG文件格式，主要是出于安全考虑。 今天我们将深入探讨WordPress安全启用SVG支持的方法，讨论浏览器支持，以及一些警告，如果您决定要切换到矢量图像格式。 希望有一天SVG作为WordPress核心的一部分。 什么是SVG? 为什么SVG安全性很重要 如何安全地为WordPress启用SVG支持 什么是SVG? 根据维基百科，SVG（可缩放矢量图形）是一种基于XML的矢量图像格式，用于支持交互性和动画的二维图形。 您甚至可以使用代码或文本编辑器来编辑它们。 SVG规范是自1999年以来由万维网联盟开发的开放标准。目前SVG仅占所有网站的3.4％，但正如您所见，采用率正在快速增长。 流行的网站，如谷歌，Reddit，Dropbox，ESPN，甚至我们在wbolt.com的网站都使用SVG。 SVG使用情况统计（2016年4月-2017年4月） SVG浏览器支持情况 目前，所有主流浏览器和移动浏览器都支持SVG。 您可能遇到的唯一问题是，如果您仍然需要IE8的支持，当然我们不希望你继续支持这个浏览器。 IE8仅占0.36％的市场份额，并且微软也不再为该版本浏览提供更新支持。 有兴趣的朋友可以阅读国外博主Lubos撰写的关于《为什么开发人员应该停止支持IE8，IE9和IE10》的文章。 从商业角度来看，这可能并非总是可行，但他提出了一些非常好的观点。 如果由于某些特殊原因你仍然需要IE8支持，你可以为你的SVG定义一个备用图像（PNG或JPG），但我们今天不会基于此展开讨论。 以下是支持的浏览器列表： Internet Explorer 9, 10, 11+ and Edge Firefox 3+ Chrome 4+ Safari 3.2+ Opera 10+ iOS Safari 3.2+ Opera Mini (all) Android Browser 4.4+ SVG浏览器支持情况 SVGs的优势 SVG是一种矢量格式，这意味着它们可以在浏览器和照片编辑工具中无限无损缩放。SVG为什么受图形和网页设计师欢迎，不言而喻。通常，当您尝试在Photoshop，Sketch或Paint等工具中编辑PNG或JPG时，会受限于原图的像素。使用SVG，你可以随心所欲地对图形文件进行缩放，并且像素完美（或者我们应该说矢量完美）。这就是为什么它们是用于视网膜屏幕的优秀图像格式的原因。 谷歌索引SVG，如果你关心搜索引擎优化，这是一个好消息。链接到文件本身的SVG内容将被编入索引并显示在Google图像搜索中。注意：内联SVG，或者更确切地说仅由代码组成的SVG，通常不会被编入索引。 SVG传统上（并非总是）文件大小小于PNG或JPG。通过使用SVG，您实际上可以加快WordPress网站的速度，因为您将减少整体页面大小。 国外博主Genki写了一篇很棒的文章，他比较了SVG与PNG和JPEG的大小。以下是他测试中的一些内容，他比较了三种不同的图像类型。 JPG (经过优化后的大小: 81.4 […]
WP SVG Icons – WordPress plugin WordPress插件下载
点击下载 WP SVG图标 插件描述 功能 包括超过490个图标创建和上传您自己的自定义图标使用自定义图标导入器点击下载并从 IcoMoon 导入您自己的自定义图标构建直接将图标插入帖子/页面/侧边栏无需在开发 New in v3.0：Shortcode Support 利用新实现的短代码，防止在编辑器的visual和html选项卡之间剥离图标！ （完全向后兼容！） 基本插件演示 考虑去专业版获取更多功能！ Pro功能 图标自定义程序可在不编写任何代码的情况下即时调整图标大小，颜色，链接等！允许无限数量的自定义图标！在菜单编辑屏幕中直接向菜单项添加图标使用流畅的CSS3动画创建图标动画轻松生成在登录页面上使用的图标容器（具有甜蜜的悬停效果）高级支持您可能遇到的任何问题，或者您遇到的时间喜欢在小部件支持中实现更多customBuilt 所有图标无需在专业版中手动编写代码或调整短代码参数不断迭代开发 立即获取高级版本！ 演示页 签出插件演示页 我最初创建此插件我自己在客户项目上的个人用途。在亲眼目睹了这个插件的力量后，我想要gi回馈社会多年来帮助过我的社区。 ‘WordPress SVG图标集’非常容易让任何人使用。两次单击鼠标，您就可以将图标放置到您的站点上。这些图标是一组Web字体，并且具有极高的可扩展性。这意味着他们获得的规模越大，质量就越差。此插件的另一个重要功能是能够在所有设备上使用相同的图标。无需为移动设备生成Retina特定图像。
Safe SVG – WordPress plugin WordPress插件下载
点击下载 安全SVG 插件描述 安全SVG是在WordPress中允许SVG上传的最佳方式！ 它使您能够允许SVG上传，同时确保它们已经过清理，以阻止影响您网站的SVG / XML漏洞。 它还使您能够在所有视图中预览媒体库中上传的SVG。 喜欢安全的SVG？尝试专业版以获得额外功能。 免费功能 已清理的SVG – 不允许上传未经过清理的文件，从而在WordPress网站中打开安全漏洞。 在媒体库中查看SVG – 猜测哪个SVG是正确的SVG的日子已经过去了，我们将在WordPress媒体库中启用SVG预览。 Pro功能 SVGO优化 – 您可以选择在上传时通过SVGO服务器运行SVG以节省空间。 选择谁可以上传 – 将SVG上传限制在WordPress网站上的某些用户或允许任何人上传。 高级支持 – 专业用户获得高级支持，而我们业余时间在WordPress论坛中提供免费支持 最初为＃24251 提供概念验证SVG清理通过以下库完成： https://github.com/darylldoyle/svg-sanitizer 安装 通过WordPress目录安装或下载，解压缩并将文件上传到 / wp-content / plugins / 目录 FAQ 我们可以更改允许的属性和标签吗？ 是的，这可以使用 svg_allowed_attributes 和 svg_allowed_tags 过滤器。 他们接受一个必须返回的论点。请参阅下面的示例： add_filter（’svg_allowed_attributes’，function（$ attributes）{//在这里做你想要的…返回$ attributes;}）; add_filter（’svg_allowed_tags’，function （$ tags）{//在这里做你想要的…返回$ tags;}）; 评论
