学习笔记——初识SVG

一一GG

已于 2023-05-05 14:58:16 修改

阅读量546

点赞数

分类专栏： # SVG 前端学习文章标签：学习笔记前端

于 2023-04-26 11:03:34 首次发布

本文链接：https://blog.csdn.net/qq_41339126/article/details/130381361

版权

前端学习同时被 2 个专栏收录

107 篇文章 2 订阅

订阅专栏

SVG

22 篇文章 1 订阅

订阅专栏

学习前端可视化，学习使用SVG，让页面内容更加丰富

一、基本概念

位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果，.jpg、.png、.gif格式的文件也是位图。
矢量图：放大不会失真；使用 XML 描述图形。前端的Svg就是矢量图效果。
xml是可扩展标记语言，可以用来保存数据、做项目或者模块的配置文件、做为网络传输数据的格式，不过现在主要使用JSON。

二、作用

SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接，极大地丰富了页面的内容。

三、优点

SVG 可被非常多的工具读取和修改（比如记事本）。
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的。
SVG 图像可在任何的分辨率下被高质量地打印。
SVG 可在图像质量不下降的情况下被放大。
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。
SVG 是开放的标准。
SVG 文件是纯粹的 XML。

四、缺点

SVG复杂度越高渲染速度就会越慢（任何过度使用DOM的应用都不快）。
SVG不适合游戏应用，只能结合Canvas来实现。
SVG不能动态的修改动画内容。

五、使用

1.当成标签内嵌到html中

<div>
    <h4>内嵌到html中</h4>
    <svg t="1682414935613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="9320" width="200" height="200">
        <path
        d="M362.666667 362.666667a42.666667 42.666667 0 0 0 0 85.333333h384a42.666667 42.666667 0 1 0 0-85.333333h-384zM362.666667 704a42.666667 42.666667 0 1 0 0 85.333333h128a42.666667 42.666667 0 1 0 0-85.333333h-128zM362.666667 192a42.666667 42.666667 0 1 0 0 85.333333h469.333333a42.666667 42.666667 0 1 0 0-85.333333h-469.333333zM320 576a42.666667 42.666667 0 0 1 42.666667-42.666667h298.666666a42.666667 42.666667 0 1 1 0 85.333334h-298.666666a42.666667 42.666667 0 0 1-42.666667-42.666667z"
        fill="#0089F8" p-id="9321"></path>
        <path
        d="M192 64a42.666667 42.666667 0 0 1 42.666667 42.666667V896a42.666667 42.666667 0 1 1-85.333334 0V106.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z"
        fill="#0089F8" p-id="9322"></path>
    </svg>
</div>

HTML 5 文档使用 <!DOCTYPE html> 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。

2.使用img标签导入

<div>
    <h4>使用img图片导入</h4>
    <img src="./xxx.svg" alt="">
</div>

3.作为css背景图导入

.bg-box {
    width: 60px;
    height: 60px;
    background-image: url(./statistic.svg);
    background-size: 100% 100%;
}

<div>
    <h4>作为css背景图导入</h4>
    <div class="bg-box"></div>
</div>

除此之外，还可以使用iframe、object等标签引入，但并不提倡使用。

视频讲解https://www.bilibili.com/video/BV1qc411J7Lu/?vd_source=be4efb0f2cfe5e83a1774731474196fd