导航

svg在前端开发中的使用

发布时间：5 个月前 更新时间：4 months ago
开发

概述

SVG全称为 Scalable Vector Graphics 可缩放矢量图形。

  • Vector ：无论这个图形如何缩放，它都能保证该图形能够被正常的清晰的浏览状态。
  • Bitmap ：与Vector 相对应的图形格式，它的缺点就是当图片被放大时，会出现失真的情况。所有拥有图片分辨率概念的图片格式，都是位图：
    • png
    • jpg
    • gif
    • …

Bitmap 方式的图片，在文件中都是保存的每一个颜色的像素信息，当我们放大时，原本对应像素点的颜色，也需要被放大，也就是用更多的像素点去显示同样的颜色信息，这个时候就造成了失真模糊的情况。

相较于Bitmap，Vector 保存的并不是像素信息，而是绘图逻辑和图形定义，也就是说Vector是画出来的，而不是显示出来的，当我们放大这个图片，它会再次进行一次绘制，并按照缩放比例，将绘制的路径、范围放大，从而不会影响图形的显示效果。

绘图原理

当我们在一个页面上放置了一个 SVG 元素时，那么会在当前页面上创建一个画布,每一个 SVG 元素都会产生一个自己的画布，也就是 SVG 元素之间是独立的。在画布上会有一个坐标系:

alt text

注意，在画布上绘制的图形，并不是我们能够看到的图形，我们想看到画布上的图形还需要通过一个viewBox的属性，来定义，我们能够查看画布的哪个位置的图形

alt text

上图中呈现了viewBox的样式效果。

参数

下面是一个简单的 svg 代码,显示的图形就是一个Google 的 logo。

<svg t="1744107771325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8555" width="200" height="200">
    <path d="M512 912A400 400 0 1 1 794.8 229.2a48 48 0 0 1 0 68 48.8 48.8 0 0 1-68 0A300.8 300.8 0 0 0 512 208a304 304 0 1 0 300.4 352H512a48 48 0 0 1 0-96h352a48 48 0 0 1 48 48A400.8 400.8 0 0 1 512 912Z" p-id="8556" fill="#fff"></path>
</svg>
  • svg：表示被这个标签包裹的内容为一个svg图片，其中的标签都是描述该图片的参数。
  • path：用来存储绘制该图片的坐标轴、长度等信息的标签
  • fill：该图形的填充颜色

需要注意的是，虽然 svg 标签的写法写起来和 HTML 的标签一致，但是它们是相互独立的。但是当我们将 HTML 和 SVG 一起使用时，可以通过 CSS 代码为 svg 标签添加样式属性(注意是svg标签)

<svg width="504" height="381" viewBox="0 0 504 381" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="277" height="231" fill="#8E2222"/>
    <ellipse cx="279.5" cy="198" rx="141.5" ry="126" fill="#811BDA"/>
    <path d="M390 169L351 215V220L253 282C282.667 314 343.8 378.4 351 380C358.2 381.6 447.333 351.333 491 336L504 192L390 169Z" fill="#1D86B3"/>
</svg>

如上代码我们可以看出来，SVG 分为两层结构：

  1. 父级：<svg> </svg>
  2. 子级：rect、ellipse、path等

使用

一般情况下，我们SVG图片都是协同我们的 HTML 进行使用的，有两种方式可以使用 SVG：

  1. 创建一个 name.svg 文件，将保存的 SVG 代码填入文件中，然后通过 html 引入

    <img src="./name.svg">

  2. 直接将 SVG 代码插入到我们的 HTML 代码中，这种方式可以让我们页面的 JS 代码对 SVG 图片进行操作，很方便的就可以制作一个 SVG 动画。并且我们修改 SVG 的一些属性时，也会更加方便。

全站查找