可视化系列讲解：SVG创建及使用方式

最新推荐文章于 2024-06-18 15:15:42 发布

你的微笑暖暖的

最新推荐文章于 2024-06-18 15:15:42 发布

阅读量2.4k

点赞数

分类专栏： svg canvas css 文章标签： svg

本文链接：https://blog.csdn.net/wangyuiba1314/article/details/128556153

版权

css 同时被 3 个专栏收录

7 篇文章 1 订阅

订阅专栏

svg

6 篇文章 0 订阅

订阅专栏

canvas

6 篇文章 0 订阅

订阅专栏

文章目录

一、SVG是什么？
二、SVG 优点与缺点
- - 2.1 优点
  - 2.2 缺点
三、SVG的应用场景
四、SVG 和 Canvas的区别
五、SVG的创建方式
六、SVG的使用方式

一、SVG是什么？

◼ SVG 全称为（Scalable Vector Graphics），即可缩放矢量图形。（矢量定义：既有大小又有方向的量。在物理学中称作矢
量，如一个带箭头线段：长度表示大小，箭头表示方向；在数学中称作向量。在计算机中，矢量图可无限放大而不变形）
◼ SVG 是一种基于XML格式的矢量图，主要用于定义二维图形，支持交互和动画
◼ SVG 规范是万维网联盟(W3C) 自 1998 年以来开发的标准。
◼ SVG 图像可在不损失质量的情况下按比例缩放，并支持压缩。
◼ 基于XML的SVG可轻松的用文本编辑器或矢量图形编辑器创建和编辑，并可以直接在浏览器显示。

二、SVG 优点与缺点

2.1 优点

◼ 扩展好：矢量图像在浏览器中放大缩小不会失真，可被许多设备和浏览器中使用。而光栅图像（PNG 、JPG）放大缩小会失真。
（矢量图像是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。
光栅图像是由像素点构建的图像——微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。）
◼ 灵活：SVG是W3C开发的标准，可结合其它的语言和技术一起使用，包括 CSS、JavaScript、 HTML 和 SMIL 。SVG图像可以
直接使用JS和CSS进行操作，使用时非常方便和灵活，因为SVG也是可集成到 DOM 中的。
◼ 可以动画：SVG 图像可以使用 JS 、 CSS 和 SMIL 进行动画处理。对于 Web 开发人员来说非常的友好。
◼ 轻量级：与其它格式相比，SVG 图像的尺寸非常小。根据图像的不同，PNG 图像质量可能是 SVG 图像的 50 倍。
◼ 可打印：SVG 图像可以以任何分辨率打印，而不会损失图像质量。
◼ 利于SEO：SVG 图像被搜索引擎索引。因此，SVG 图像非常适合 SEO（搜索引擎优化）目的。
◼ 可压缩：与其它图像格式一样，SVG 文件支持压缩。
◼ 易于编辑：只需一个文本编辑器就可以创建 SVG 图像。设计师通常会使用 Adobe Illustrator （AI）等矢量图形

2.2 缺点

◼ 不适和高清图片制作：SVG 格式非常适合用于徽标和图标（ICON）等 2D 图形，但不适用于高清图片，不适合进行像素级操作。SVG 的图像无法显示与标准图像格式一样多的细节，因为它们是使用点和路径而不是像素来渲染的。
◼ SVG 图像变得复杂时，加载会比较慢
◼ 不适用于 IE8 及更低版本的旧版浏览器：（这都淘汰了，可以忽略）

三、SVG的应用场景

◼ 适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
◼ SVG 适合应用在需适配多种尺寸的屏幕上展示，因为SVG的扩展性更好。
◼ 当需要创建简单的动画时（SVG 可以与 JS 交互来制作线条动画、过渡和其他复杂的动画，SVG 可以与 CSS 动画交互，也可以使用自己内置的 SMIL 动画。）
◼ SVG 也非常适合制作各种图表（条形图、折线图、饼图、散点图等等），以及大屏可视化页面开发。

四、SVG 和 Canvas的区别

可扩展性：
◼ SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真
◼ Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化（模糊）。
◼ SVG可以在任何分辨率下以高质量的打印。Canvas 不适合在任意分辨率下打印。
渲染能力：
◼ 当 SVG 很复杂时，它的渲染就会变得很慢，因为在很大程度上去使用 DOM 时，渲染会变得很慢。
◼ Canvas 提供了高性能的渲染和更快的图形处理能力，例如：适合制作H5小游戏
◼ 当图像中具有大量元素时，SVG 文件的大小会增长得更快（导致DOM变得复杂），而Canvas并不会增加太多。
灵活度：
◼ SVG 可以通过JavaScript 和 CSS 进行修改，用SVG来创建动画和制作特效非常方便。
◼ Canvas只能通过JavaScript进行修改，创建动画得一帧帧重绘。
使用场景：
◼ Canvas 主要用于游戏开发、绘制图形、复杂照片的合成，以及对图片进行像素级别的操作，如：取色器、复古照片
◼ SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。

五、SVG的创建方式

方式一

在一个单独的svg文件中绘制，svg文件可直接在浏览器预览或嵌入到HTML中使用（推荐）

// svg 1.0版本  创建一个.svg的文件
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
  version="1.0"
  baseProfile="full"
  width="300"
  height="150"
  xmlns="http://www.w3.org/2000/svg"
  style="border:1px solid pink"
>
  <rect x="0" y="0" width="100" height="50"></rect>
</svg>

// svg 2.0版本  创建一个.svg的文件
<?xml version="1.0" standalone="no" ?>
<svg
  width="300"
  height="150"
  xmlns="http://www.w3.org/2000/svg"
  style="border:1px solid pink"
>
  <rect x="0" y="0" width="100" height="50"></rect>
</svg>

方式二

使用AI（Adobe IIIustractor）矢量绘图工具来绘制矢量图，并导出为svg文件（推荐）

方式三

直接在HTML文件中使用svg元素来绘制（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1.0版本 -->
  <svg
    version="1.0"
    baseProfile="full"
    width="100"
    height="100"
  >
    <rect x="0" y="0" width="100" height="100"></rect>
  </svg>

  <!-- 2.0版本 -->
  <svg
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="0" y="0" width="100" height="100"></rect>
  </svg>

  <!-- 2.0版本简写 -->
  <!-- 不写宽高 默认w300 h150 -->
  <svg>
    <rect x="0" y="0" width="100" height="100"></rect>
  </svg>
  
</body>
</html>

方式四

直接使用JavaScript代码来生成svg矢量图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.命名空间(使用js创建这个必须写)
    const xmlns = "http://www.w3.org/2000/svg";

    // 2.创建SVG元素
    let svgEl = document.createElementNS(xmlns, "svg");
    let rectEl = document.createElementNS(xmlns, "rect");

    // 3.给SVG元素添加属性
    svgEl.setAttributeNS(null, "version", "1.1");
    svgEl.setAttributeNS(null, "width", 300);
    svgEl.setAttributeNS(null, "height", 150);
    svgEl.style.border = "1px solid pink";

    rectEl.setAttributeNS(null, "width", 100);
    rectEl.setAttributeNS(null, "height", 40);

    // 4.把SVG元素插入到DOM中
    svgEl.appendChild(rectEl);
    document.body.appendChild(svgEl);
  </script>
</body>
</html>

六、SVG的使用方式

方式一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <img src="你的svg文件地址">
</body>
</html>

方式二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 150px;
        background-image: url(你的svg文件地址);
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

方式三

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <svg
  width="300"
  height="150"
  style="background:pink"
>
  <rect x="10" y="10" width="100" height="50"></rect>
</svg>
</body>
</html>

方式四

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    
    <object data="你的svg文件地址" type="image/svg+xml"></object>
  </body>
</html>

方式五

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe src="你的svg文件地址"></iframe>
  </body>
</html>

方式六

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <embed src="你的svg文件地址" type="image/svg+xml">
  </body>
</html>