Elementor如何上传SVG小图标并修改颜色?

📚 文章大纲

Elementor编辑器自带丰富的icon小图标库,在网页设计需要小图标的时候直接选择导入就可以使用了,非常方便。

今天跟大家说的是如何上传SVG文件来自定义你的网站小图标。

什么是SVG?

SVG代表可缩放矢量图形(Scalable Vector Graphics)。它是一种用于描述二维矢量图形的XML(可扩展标记语言)格式。与基于像素的位图图像(例如JPEG或PNG)不同,SVG使用数学公式来定义图形,这使得它们可以在任何尺寸下无损地缩放而不失真。

SVG优势

SVG图形是由一系列的绘图命令和属性组成,这些命令和属性定义了线条、曲线、形状、颜色和渐变等元素。由于SVG是基于文本的格式,所以它具有以下优势:

  • 可缩放性: SVG图像可以在不损失质量的情况下以任何大小进行缩放,适用于从小图标到大型印刷品的各种尺寸。
  • 矢量性质: 图像以矢量形式表示,因此图像元素由数学公式定义,可以轻松地编辑和修改。
  • 小文件尺寸: 与位图图像相比,SVG图像通常具有较小的文件大小,因为它们不存储每个像素的信息,而只存储图形的描述。
  • 交互性: SVG支持在图像内添加交互元素,如链接、动画和事件处理程序,使其在Web和应用程序中具有更丰富的用户体验。
  • 文本编辑: 由于SVG是基于文本的,所以可以使用文本编辑器轻松地创建、修改和维护图像文件。

SVG广泛用于Web开发、数据可视化、图标设计、移动应用程序和印刷等领域。它可以在HTML文档中嵌入,也可以作为独立的图像文件使用,具体取决于需求和用途。

SVG Export谷歌插件

插件地址:https://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp

SVG Export工具,可以帮助我们快速🔜下载任何网页的SVG文件。

选择自己喜欢的SVG小图标下载到电脑本地

上传到Elementor

用Elementor打开你的网页,拖入Icon微件,然后选择Upload SVG上传SVG

自定义小图标颜色

Elementor里的Icon可以自由修改颜色,但是你会发现你从别的网页下载的SVG资源导入到Elementor没法修改颜色。

接下来开始自定义小图标的颜色

Custom CSS

点击高级设置,然后在Custom CSS中添加代码

.svgcolor svg path{
fill: red !important;
}

fill你喜欢的颜色就可以了。

设置hover的颜色

.svgcolor svg :hover{
fill: pink !important;
}

SVG Color

除了使用CSS代码,还可以在上传SVG文件之前用一些工具做颜色的处理

网址:https://svgcolor.com/

这个网站支持上传SVG文件和SVG代码,这样就可以自定义修改成和网站调性匹配的颜色了。

SVG Viewer查看器

地址:https://www.svgviewer.dev/

如何使用SVG Viewer呢?

打开网页,选中你要查看的图标,鼠标右键检查,Element查看图标的代码

复制<svg>代码字段,这里是

<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90 90" xml:space="preserve">
            <g id="XMLID_1_">
                <path id="XMLID_3_" class="st0" d="M38.7,9.2L53.3,9.2" style="stroke-dasharray: 15, 17; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_2_" class="st0" d="M73.2,9.2H75c6.6,0,12,5.4,12,12v50.3c0,6.6-5.4,12-12,12H15.2c-6.6,0-12-5.4-12-12V21.2c0-6.6,5.4-12,12-12h1.5" style="stroke-dasharray: 240, 242; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_4_" class="st0" d="M4,27L86,27" style="stroke-dasharray: 82, 84; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_5_" class="st0" d="M22,40L66,40" style="stroke-dasharray: 44, 46; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_6_" class="st0" d="M22,53L47,53" style="stroke-dasharray: 25, 27; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_7_" class="st0" d="M22,66L34,66" style="stroke-dasharray: 12, 14; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_8_" class="st0" d="M51.7,62.7L59.6,70.7L76.4,55.2" style="stroke-dasharray: 35, 37; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_9_" class="st0" d="M62,5L62,16" style="stroke-dasharray: 11, 13; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
                <path id="XMLID_10_" class="st0" d="M28,5L28,16" style="stroke-dasharray: 11, 13; stroke-dashoffset: 0;" stroke="#333333" fill="none" stroke-width="3px"></path>
            </g>
        </svg>

然后粘贴到SVG Viewer里

点击download就可以下载到你的电脑本地。

赶快去设计你自己的网站小图标吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

添加微信