一【数据可视化】SVG( 二 ) _矢量图

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

文章插图
SVG和的区别
? 可扩展性：
? SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真。
?是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化（模糊）。
? SVG可以在任何分辨率下以高质量的打印。不适合在任意分辨率下打印。
? 渲染能力：
? 当SVG 很复杂时，它的渲染就会变得很慢，因为在很大程度上去使用DOM 时，渲染会变得很慢。
?提供了高性能的渲染和更快的图形处理能力，例如：适合制作H5小游戏。
? 当图像中具有大量元素时，SVG 文件的大小会增长得更快（导致DOM变得复杂），而并不会增加太多。
? 灵活度：
? SVG 可以通过和CSS 进行修改，用SVG来创建动画和制作特效非常方便。
? 只能通过进行修改，创建动画得一帧帧重绘。
? 使用场景：
?主要用于游戏开发、绘制图形、复杂照片的合成，以及对图片进行像素级别的操作，如：取色器、复古照片。
? SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
初体验SVG
? 如何绘制一个SVG矢量图？绘制SVG矢量图常用有4种方式：
? 方式一：在一个单独的svg文件中绘制，svg文件可直接在浏览器预览或嵌入到HTML中使用（推荐）
? 方式二：直接在HTML文件中使用svg元素来绘制（推荐）
? 方式三：直接使用代码来生成svg矢量图。
? 方式四：使用AI（）矢量绘图工具来绘制矢量图，并导出为svg文件（推荐）
? SVG初体验
? 第一步：新建一个svg文件，在文件第一行编写XML文件声明
? 第二步：编写一个

一 【数据可视化】SVG( 二 )

一【数据可视化】SVG( 二 )