❤ svg篇
1、认识和介绍
对于svg的系统描述 www.runoob.com/svg/svg-tut...
先来看看 在 HTML 页面之中svg的介绍
SVG 文件可通过以下标签嵌入 HTML 文档：<img>、<object> 或者 <iframe>。
SVG 的代码可以直接嵌入到 HTML 页面中，或您可以直接链接到 SVG 文件。
2、使用
（1） 使用 < img> 标签
通过 <img> 标签可以将 SVG 图像作为图片嵌入到 HTML 页面中，可以使用 src 属性指定 SVG 文件的路径，也可以设置 width 和 height 属性来指定图片的宽度和高度。
语法:
js
<img src="example.svg" alt="SVG Image" width="200" height="200">我们新建一个文件然后尝试一下
代码部分也非常的简单
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./404.svg" alt="SVG Image" width="200" height="200">
</body>
</html>我们尝试控制与一下大小
js
<img src="./404.svg" alt="SVG Image" width="100" height="100">
<img src="./404.svg" alt="SVG Image" width="50" height="50">
<img src="./404.svg" alt="SVG Image" width="10" height="10">最后我们查看的效果：
更改颜色：这里我们就只能使用svg的类型样式了（必须得svg内部没有填充色得时候才可以）
js
svg{
background: chartreuse;
color: #fff;
}接下来我们想更改一下单独每个的颜色，很可惜，这种方法办不到
优点：简单快捷，仅仅img就可以使用
缺点：很明显，无法更改颜色
（2） 使用 <object> 标签
使用 <object> 标签用于将外部资源嵌入到HTML页面中，可以使用 data 属性指定 SVG 文件的路径，type 属性指定资源的 MIME 类型。
支持 SVG 的浏览器会直接显示 SVG 图像，不支持的浏览器会显示替代内容。
也就是我们可以拿这个来进行兼容，同时，注意是拿data 属性来指定 SVG 文件的路径的！
简单进行一下使用：
js
<!-- 第二种方式 -->
<object data="./404.svg" type="image/svg+xml" width="200" height="200">
Your browser does not support SVG
</object>预览跟上面差不多，这里我们就不展示预览了。
- 更改颜色
跟上面差不多，很显然，这种更改颜色也是不太行
（3） 使用 <iframe> 标签
<iframe> 标签用于在 HTML 页面中嵌入另一个HTML文档。可以使用 src 属性指定 SVG 文件的路径，并设置 width 和 height 属性来指定 iframe 的宽度和高度。
语法:
arduino
<iframe src="example.svg" width="200" height="200"></iframe>这种方式更改颜色也是不便利，直接下一种
（4） 直接在 HTML 嵌入 SVG 代码
在 HTML 页面中直接嵌入 SVG 代码，SVG 代码可以放置在 <body> 标签中或其他合适的位置。
这种方式使得 SVG 图像与 HTML 内容混合在一起，可以直接在 HTML 页面中编辑和调整 SVG 图像
这里介绍和告诉我们很明确啊，可以直接在 HTML 页面中编辑和调整 SVG 图像
js
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>预览一下，直接就是一个圆！
也就是我们上面的也可以写成
js
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<img src="./404.svg" alt="SVG Image" width="50" height="50">
</svg>（5）链接到 SVG 文件
我们看看第五种：可以用 <a> 标签链接到一个 SVG 文件：
js
<a href="circle1.svg">查看 SVG 文件</a>结果: 查看 SVG 文件
（6） 使用 CSS 背景图
通过 CSS 的 background-image 属性，可以将 SVG 图像作为背景图嵌入到 HTML 元素中。这种方法适用于需要在 CSS 中控制背景图样式的情况。
这里简单尝试一下试试：
js
.svg-bg { width: 200px; height: 200px; background-image: url('circle1.svg'); background-size: cover; }这里扩张一下，是不是各种动态背景，动画背景，小人跳动啥的，你都会了呢？
3、进阶使用
了解完了svg的基础使用，这里我们看看具体的使用如何使用呢
（1）fill 属性
先来看看fill这个SVG属性的含义:更改填充颜色
- SVG 的 fill 属性
用于定义填充颜色，它可以接受多种类型的值。以下是常见的 fill 属性可选值：
c
颜色值：可以直接指定颜色的名称（例如 "red"、"blue"）或者十六进制颜色值（例如 "#FF0000"）作为填充颜色。
URL：可以使用 URL 来引用一个图像，该图像将被用作填充图案。
渐变：可以使用线性渐变（<linearGradient>）或径向渐变（<radialGradient>）来创建渐变填充效果。
默认值：none 表示无填充，即不显示填充效果。
CSS 变量：如果你的 SVG 在 HTML 中使用了 CSS 变量，你也可以将 CSS 变量作为 fill 属性的值。看来fill为我们提供了强大的内置属性，也就是我们控制svg其实就是控制fill
（2）使用 CSS 的 fill 属性来设置 SVG 的填充颜色
- 内联 SVG： SVG 图标是内联在 HTML 中的，你可以直接在 SVG 元素内部使用 style 或 fill 属性来设置填充颜色。
js
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: red;">
<!-- SVG 图标的路径或其他内容 -->
</svg>
使用 CSS 来设置样式
<style>
.svg-icon {
fill: red;
}
</style>
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<!-- SVG 图标的路径或其他内容 -->
</svg>（3）外部 SVG 文件
js
使用 CSS 来为 SVG 元素设置填充颜色
<!-- 在 HTML 中引入 SVG 文件 -->
<object type="image/svg+xml" data="icon.svg" class="svg-icon"></object>
/* CSS 文件中设置填充颜色 */
.svg-icon {
fill: red;
}（4）currentColor 关键字
使 SVG 图标的填充颜色能够跟随字体颜色而改变，你可以使用 CSS 的 currentColor 关键字 currentColor 表示当前元素的文本颜色。通过将 SVG 图标的填充颜色设置为 currentColor，它将自动继承其父元素（通常是文本元素）的颜色
js
fill="currentColor"到这里相信你对于svg的使用已经轻松上手啦！