如何在 Elementor 启用 SVG 支持？-魏艾斯笔记

Elementor 支持上传使用 SVG 图标及图片，操作方法也很简单，可以从任何带有小部件图标的元素中上传 SVG图片，上传后立即可用。

文章目录 隐藏

Elementor页面编辑器 点我直达 Elementor pro插件官网，快速建站，容易上手。入门点击购买Elementor Pro插件和下载安装激活_WordPress页面编辑器。更多Elementor插件内容请看Elementor专题
学习、小网站选择 1核2g配置的服务器起步，国外主题建站选择 2核4g配置，适当搭配运行流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱）不知道如何选择地域、配置请在页面右侧+老魏的联系研究。
外贸、B2C/C2C等网站在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题

SVG是什么

SVG 中文名：可缩放矢量图形，是一种基于 XML 的矢量图像格式，是支持交互性和动画的二维图形。

SVG 文件与图标相似，放大、缩小后不会损失分辨率或模糊。同时保持着很小的体积，让网页更轻。

同样内容的图片，SVG的体积远比 jpg 、png小很多，国外网站使用 SVG做logo、图片的情况太常见了。

Elementor 带有图标控件的元素，都提供了上传 SVG功能，上传后的 SVG 放在 WordPress媒体库中，与其它图片放在一起。

WordPress默认不支持 SVG格式，需要额外的代码或 SVG插件才能上传。

以 icon box元素为例，我们从工具栏拖拽一个 icon box元素到右侧编辑区域，当把鼠标移动到左侧工具栏的 icon上时，点击 upload SVG 按钮。

当你首次上传 SVG 图标时，会看到一条警告消息，提醒上传 SVG 文件可能有潜在的安全风险，点击 Enable 按钮。

然后会被带到Elementor > 设置 > 高级页面。
启用 SVG 上传：从下拉列表中选择 Enable，保存。

启用后页面继续编辑。

如果你上传的 SVG 包含了宽度或高度内联样式，使用 SVG 图标在元素的“advance”选项卡中添加下面的 CSS 覆盖：

selector svg { width: 100% !important; height: 100% !important; }

这样就能由 Elementor 来控制图标的大小了。