❤ `svg`篇

1、认识和介绍

`SVG`介绍

https://www.runoob.com/svg/svg-tutorial.html

先看看在 HTML 页面之中对于svg的系统描述

SVG 文件可通过以下标签嵌入 `HTML` 文档：`<img>`、`<object>` 或者 `<iframe>`。

SVG 的代码可以直接嵌入到 `HTML` 页面中，或您可以直接链接到 `SVG `文件。

`SVG`认识

SVG（Scalable Vector Graphics）是一种基于可扩展标记语言（XML）的开放标准矢量图形格式

用于描述二维矢量图形

可以嵌入到HTML和XML文档中

是一种和图像分辨率无关的矢量图形格式

可以像其他图像一样被缩放，而不会失去清晰度。

可以被嵌入到 HTML 文档中，也可以被链接到外部 SVG 文件中。

可以包含文本、图形、线条、矩形、圆形、路径等元素。

可以使用 CSS 和 JavaScript 进行样式化和交互。

可以与其他 HTML 元素一起使用，以创建复杂的交互式图形。

可以用于创建动画和过渡效果。

可以用于创建复杂的图形和图表。

`SVG`图形格式优点


+ 图像文件可读，易于修改和编辑

+ SVG技术本身的动态部分是基于SMIL标准,文件轻巧，意味着它们可以很快加载，即使是在网络上。

+ SVG可以支持多种效果，如渐变、阴影和反射等，这些效果位图无法完成

Svg格式图片的好处

位图图片（如JPEG和PNG）和矢量图形的区别

常见的位图图片（如JPEG和PNG）是由许多像素点组成的，而矢量图形是由数学公式定义的。这使得矢量图形可以在不损失质量的情况下进行任意缩放，而位图图片在放大时则会变得模糊。

svg属于矢量图形，可以无损缩放，而位图图片属于栅格图形，无法无损缩放。

2、使用

👉使用 `< img>` 标签

通过 <img> 标签可以将 SVG 图像作为图片嵌入到 HTML 页面中，可以使用 src 属性指定 SVG 文件的路径，也可以设置 width 和 height 属性来指定图片的宽度和高度。

语法:

<img src="example.svg" alt="SVG Image" width="200" height="200">

我们新建一个文件然后尝试一下

404.SVG
404.HTML

代码部分也非常的简单

<!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>

404.SVG内容如下

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750659087112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2032" width="40" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M973.557996 586.14612v79.591925c31.643248-60.647559 49.572023-128.348277 49.572022-199.87945C1023.130018 208.754206 794.070328 0.206249 511.664135 0.206249 229.26594 0.206249 0.206249 208.754206 0.206249 465.858595c0 3.222701 0.22391 6.445403 0.22391 9.6761l183.685976-207.540363h106.67701l-158.016321 217.408387h51.339311V430.192968l109.779759-155.753233v394.728927H184.116135V586.14612H17.463295c47.588822 162.206632 188.78792 289.547315 367.835765 331.058586-11.515359 26.389365-44.925895 90.067703-100.479508 101.351156-68.828263 14.106315 186.788726 3.422621 369.155233-105.381532 140.095543-36.87314 255.401075-126.740924 318.031836-244.005668h-108.004475V586.14612H680.09226V475.726618l183.909886-207.732286h104.02208l-155.369388 217.408387h51.347308v-59.440047l109.771763-155.153474v315.336922h-0.215913z m-625.667861 22.566905a84.094111 84.094111 0 0 1-7.96479-36.265385V356.446687c0-12.898802 2.65493-24.981932 7.96479-36.265385a93.242424 93.242424 0 0 1 21.695257-29.428141c9.068346-8.252674 19.911976-14.905993 32.306981-19.736047 12.395005-4.83805 25.669655-7.261074 39.839944-7.261074h90.29961c14.154296 0 27.436943 2.423024 39.831948 7.261074 12.171095 4.830054 22.790815 11.275456 31.875155 19.336208l-98.040491 130.371461v-23.174661a15.673684 15.673684 0 0 0-5.317857-12.091127c-3.542572-3.222701-7.96479-4.830054-13.27465-4.830053-5.317857 0-9.740075 1.607352-13.282647 4.830053a15.673684 15.673684 0 0 0-5.30986 12.091127v72.538768L354.97528 620.804153a84.413982 84.413982 0 0 1-7.085145-12.091128z m285.724855-36.265385c0 12.898802-2.65493 24.981932-7.972787 36.265385a93.242424 93.242424 0 0 1-21.68726 29.428141c-9.068346 8.252674-19.911976 14.905993-32.306981 19.744043-12.395005 4.830054-25.669655 7.253077-39.839944 7.253077H441.508408c-14.154296 0-27.436943-2.423024-39.831948-7.253077-12.395005-4.83805-23.238635-11.491369-32.314978-19.75204a99.879749 99.879749 0 0 1-11.06754-12.091127l109.771763-145.677293v50.979455c0 4.83805 1.775285 8.868426 5.317857 12.091128 3.534576 3.222701 7.96479 4.830054 13.274651 4.830053 5.30986 0 9.740075-1.607352 13.27465-4.830053a15.673684 15.673684 0 0 0 5.317857-12.091128V430.992645L607.721425 294.791533c7.301058 7.452996 13.27465 15.913587 17.704865 25.389769 5.30986 11.275456 7.96479 23.366583 7.96479 36.265385v216.000953h0.22391z" p-id="2033"></path></svg>

展示一下，这里展示正常

👉尝试控制一下大小

我们尝试控制一下大小

<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内部没有填充色得时候才可以）

svg{
    background: chartreuse;
    color: #fff;
}

优点：简单快捷，仅仅img就可以使用

缺陷：想更改一下单独每个的颜色，很可惜，这种方法办不到，无法更改颜色

👉使用 `<object>` 标签

使用 <object> 标签用于将外部资源嵌入到HTML 页面中，可以使用 data 属性指定 SVG 文件的路径，type 属性指定资源的 MIME 类型。

支持 SVG 的浏览器会直接显示 SVG 图像，不支持的浏览器会显示替代内容。

也就是我们可以拿这个来进行兼容，同时，注意是拿data 属性来指定 SVG 文件的路径的！

简单进行一下使用：

<object data="./404.svg" type="image/svg+xml" width="200" height="200">
      Your browser does not support SVG
</object>

预览跟上面差不多

更改颜色

跟上面差不多，很显然，这种更改颜色也是不太行

👉使用 `<iframe>` 标签

<iframe> 标签用于在 HTML 页面中嵌入另一个HTML文档。可以使用 src 属性指定 SVG 文件的路径，并设置 width 和 height 属性来指定 iframe 的宽度和高度。

语法:

plain

<iframe src="example.svg" width="200" height="200"></iframe>

这种方式更改颜色也是不便利，直接下一种

👉直接在 HTML 嵌入 SVG 代码

在 HTML 页面中直接嵌入 SVG 代码，SVG 代码可以放置在 <body> 标签中或其他合适的位置。

这种方式使得 SVG 图像与 HTML 内容混合在一起，可以直接在 HTML 页面中编辑和调整 SVG 图像

这里介绍和告诉我们很明确啊，可以直接在 HTML 页面中编辑和调整 SVG 图像

plain

<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>

预览一下，直接就是一个圆！

也就是我们上面的也可以写成

plain

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <img src="./404.svg" alt="SVG Image" width="50" height="50">
</svg>

👉链接到 SVG 文件

我们看看第五种：可以用 <a> 标签链接到一个 SVG 文件：

plain

<a href="circle1.svg">查看 SVG 文件</a>

👉使用 CSS 背景图

通过 CSS 的 background-image 属性，可以将 SVG 图像作为背景图嵌入到 HTML 元素中。这种方法适用于需要在 CSS 中控制背景图样式的情况。

这里简单尝试一下试试：

plain

.svg-bg { 
  width: 200px; height: 200px; background-image: url('circle1.svg'); 
  background-size: cover; 
}

尝试一下 »

这里扩张一下，是不是各种动态背景，动画背景，小人跳动啥的，你都会了呢？

3、进阶使用

了解完了svg的基础使用，这里我们看看具体的使用如何使用呢

👉fill 属性

先来看看fill这个SVG属性的含义:更改填充颜色

SVG 的 fill 属性

用于定义填充颜色，它可以接受多种类型的值。以下是常见的 fill 属性可选值：

plain

颜色值：可以直接指定颜色的名称（例如 "red"、"blue"）或者十六进制颜色值（例如 "#FF0000"）作为填充颜色。

URL：可以使用 URL 来引用一个图像，该图像将被用作填充图案。

渐变：可以使用线性渐变（<linearGradient>）或径向渐变（<radialGradient>）来创建渐变填充效果。

默认值：none 表示无填充，即不显示填充效果。

CSS 变量：如果你的 SVG 在 HTML 中使用了 CSS 变量，你也可以将 CSS 变量作为 fill 属性的值。

看来fill为我们提供了强大的内置属性，也就是我们控制svg其实就是控制fill

👉使用 CSS 的 fill 属性来设置 SVG 的填充颜色

内联 SVG： SVG 图标是内联在 HTML 中的，你可以直接在 SVG 元素内部使用 style 或 fill 属性来设置填充颜色。

plain

<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>

👉外部 SVG 文件

plain

使用 CSS 来为 SVG 元素设置填充颜色
在 HTML 中引入 SVG 文件
<object type="image/svg+xml" data="icon.svg" class="svg-icon"></object>

/* CSS 文件中设置填充颜色 */
.svg-icon {
  fill: red;
}

👉currentColor 关键字

使 SVG 图标的填充颜色能够跟随字体颜色而改变，你可以使用 CSS 的 currentColor 关键字 currentColor 表示当前元素的文本颜色。通过将 SVG 图标的填充颜色设置为 currentColor，它将自动继承其父元素（通常是文本元素）的颜色

plain

fill="currentColor"

到这里相信你对于svg的使用已经轻松上手啦！

❤ svg篇 ​

1、认识和介绍 ​

SVG介绍 ​

SVG认识 ​

SVG图形格式优点 ​

Svg格式图片的好处 ​

2、使用 ​

👉使用 < img> 标签 ​

👉尝试控制一下大小 ​

👉使用 <object> 标签 ​

👉使用 <iframe> 标签 ​

👉直接在 HTML 嵌入 SVG 代码 ​

👉链接到 SVG 文件 ​

👉使用 CSS 背景图 ​

3、进阶使用 ​

👉fill 属性 ​

👉使用 CSS 的 fill 属性来设置 SVG 的填充颜色 ​

👉外部 SVG 文件 ​

👉currentColor 关键字 ​

❤ `svg`篇

1、认识和介绍

`SVG`介绍

`SVG`认识

`SVG`图形格式优点

Svg格式图片的好处

2、使用

👉使用 `< img>` 标签

👉尝试控制一下大小

👉使用 `<object>` 标签

👉使用 `<iframe>` 标签

👉直接在 HTML 嵌入 SVG 代码

👉链接到 SVG 文件

👉使用 CSS 背景图

3、进阶使用

👉fill 属性

👉使用 CSS 的 fill 属性来设置 SVG 的填充颜色

👉外部 SVG 文件

👉currentColor 关键字