Material Design是Google在2014年推出的一种设计语言，其目的是为了提供一种简洁、明了、直观、可应用于各种不同设备的设计方案。SVG作为一种矢量图形格式，与Material Design也是紧密相关的。在本文中，我们将向您介绍如何使用和制作Material Design的SVG图标。
Material Design的SVG图标
Material Design的SVG图标是无缝对接Material Design设计的一种重要元素。在开发过程中，您会发现许多Material Design的组件和控件都涉及到图标的使用。而这些图标都是基于SVG格式的。
常见的Material Design中的SVG图标包含两种：
- 嵌入式内联图标：嵌入到HTML中，通过标签使用。比如：face
- 独立图标：存储在单个SVG文件中，可以通过URL引用。比如：
嵌入式内联图标
使用嵌入式内联图标非常简单。唯一需要注意的是，需要在文档中引用Material Design图标字体。
--------- ----- ------ ------ ----- ---------------- --------------- ------ ------------- ----- -------------------------------------------------------------- ----------------- ------- ------ -- ------------------------------- ------- -------
上述代码中，我们引用了Google的Material Design图标字体。这样，我们才能使用material-icons这个类名。在i元素中，我们填入的face是图标名。您可以在Google Material Icons官网找到适合自己应用的图标及名称。
独立图标
独立图标与嵌入式内联图标类似。唯一的不同是，您需要将图标存储在单独的SVG文件中，并在文档中使用Image标签来引用该文件。
--------- ----- ------ ------ ----- ---------------- --------------- ------ ------------- ------- ------ ---- ----------------------- ------- -------
制作Material Design的SVG图标
虽然可以直接使用Google Material Icons官网提供的图标，但如果您需要自定义一些图标，那么就需要开始制作Material Design的SVG图标了。
SVG示例
我们来看一下下面的SVG示例代码：
---- ---------------------------------- ---------- - -- ---- ----- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
这是一个Material Design图标的最基本结构。通过d路径属性，我们定义了一个路径。这个路径可以是直线段、曲线等等。关于SVG的路径描述，请参考MDN web docs - SVG paths。
图标大小
在设计过程中，需要根据实际需求调整SVG图标的大小。比如，我们通常将Material Design的SVG图标缩放为24x24像素。
---- ---------------------------------- ---------- - -- --- ------------ -------------- ----- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
我们添加了width和height属性，并设置为24px。这样，我们就将SVG图标缩放为24x24像素。
图标颜色
Material Design样式指南建议在使用图标时，使用单色的（在同一个颜色下）版本。为了实现这一点，我们可以更改SVG图标的颜色。
给SVG路径添加样式属性，就可以很容易地更改图标颜色。
---- ---------------------------------- ---------- - -- --- ------------ -------------- ----- --------------------- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
在path元素上添加了样式属性，fill的值设置为#515151，即灰色。
图标阴影
SVG还允许添加图标阴影。
---- ---------------------------------- ---------- - -- --- ------------ --------------
------
------- -----------------
--------------- ---------------- ---------------- --
--------- ------ ------ --
---------------------
-------- ------------- -------------
----------------------
---------
------------ --
------------ --------------------
----------
---------
-------
----- ---------------------------------------------- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- --------
------在SVG元素内定义了一个filter元素，这个filter元素包含多个fe元素，fe的作用是对SVG图像进行处理，以达到阴影效果。本例子中，我们将阴影交由JS处理。注意，要在SVG元素内定义filter元素。
总结
本文介绍了Material Design的SVG图标的使用和制作技巧。无论您是想自定义Material Design风格的图标还是仅仅使用Google提供的Material Design图标，本文描述的内容都对您有帮助。如果您想了解更多关于SVG的技术细节，请阅读MDN web docs - SVG。
示例代码
编辑一个SVG图标
---- ---------------------------------- ---------- - -- ---- ----- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
缩放为24x24像素
---- ---------------------------------- ---------- - -- --- ------------ -------------- ----- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
改变图标颜色
---- ---------------------------------- ---------- - -- --- ------------ -------------- ----- --------------------- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
添加到背景颜色
---- ---------------------------------- ---------- - -- --- ------------ -------------- ----- ------------------------------------- -------- -------- ----- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- -------- ------
添加阴影
---- ---------------------------------- ---------- - -- --- ------------ --------------
------
------- -----------------
--------------- ---------------- ---------------- --
--------- ------ ------ --
---------------------
-------- ------------- -------------
----------------------
---------
------------ --
------------ --------------------
----------
---------
-------
----- ---------------------------------------------- ----- ------------ --- ------ ------------- ------------ ------ ------- - - ------- ----- --------
------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645c91cc968c7c53b0efca39