0043. 理解 svg 是什么

• 1. 📒 SVG 是什么
  • 1.1. Scalable Vector Graphics
• 2. 📒 SVG 的一些特点
  • 2.1. 易于编辑
  • 2.2. 矢量图
  • 2.3. 和传统的前端技术可以很好地结合
  • 2.4. 滤镜功能
  • 2.5. 兼容性 nice
• 知识点
  • 需要知道 SVG 是什么。
  • 需要知道 SVG 都有哪些特点，适合用来做些什么东西。
  • Scalable Vector Graphics 这是 SVG 的全称，需要理解每个词所表示的含义，别学完了 SVG 之后还不知道 SVG 的全称是什么。
• 重复：
  • 文中有很多描述其实是重复的，虽然换了种说法，但是实际上描述的都是同样的内容。不过多次重复提到的内容，也恰恰是比较重要的点。
  • 在记录笔记的时候参考较多资料，对于一些比较关注的点，直接将文章内容 c、v 到笔记中，至于重复的部分未做处理。

1. 📒 SVG 概述

1. 🤔 SVG 是什么？

• SVG（Scalable Vector Graphics）是一种 基于 XML 的矢量图像格式，用于在互联网上描述二维图形。SVG 图像可以通过 文本编辑器 创建或通过 绘图软件 编辑，并且它们可以在大多数现代浏览器中无需任何插件就能显示。
• Scalable Vector Graphics (SVG) 是一种基于矢量的图像格式，允许图形在不失真情况下自由缩放，适用于各种尺寸的高质量显示和打印，特别适合于网页设计、标志设计和其他需要高分辨率和灵活性的图形应用场合。

2. 理解 Scalable Vector Graphics 每个词的含义

• Scalable Vector Graphics (SVG) 是一种图像格式和图形技术，这个词组中的每个词都有其特定的含义。
• Scalable（可缩放的）：这意味着 SVG 图像可以在不失真的情况下自由缩放。无论图像被放大或缩小到任何尺寸，它们都能保持清晰、边缘平滑的外观，因为它们是基于数学公式和路径定义的，而不是像素。这与光栅图像（如 JPEG 或 PNG）不同，后者在放大时可能会出现像素化。
• Vector（矢量的）：矢量图形使用点、线、曲线和形状（如圆形、矩形）等基本元素，通过数学公式和坐标来描述图像。与之相对的是光栅图形，光栅图形是由像素网格构成的。由于矢量图形是基于数学表达式的，因此它们可以轻松地无损缩放，并且通常文件体积更小。
• Graphics（图形）：这里指的是图像或视觉表现形式。在 SVG 的上下文中，它强调了这种格式用于创建和展示图形内容的能力，包括图标、图表、 logos、插图等复杂设计，所有这些都是作为可编辑的矢量数据而非固定的像素矩阵来存储的。

3. 可缩放性

• 作为矢量图形，SVG 文件可以在 不失真 的情况下放大或缩小，这使它们非常适合网页图形和界面元素。
• SVG 是 矢量图形，可以在不失真的情况下无限缩放。
• 这使 SVG 非常适合响应式设计，因为同一图形可以在不同尺寸的屏幕上保持清晰。
• 浏览器在渲染 SVG 时会根据元素的矢量路径来绘制图形，而不是像位图那样仅填充像素。

4. 编辑性

• 由于 SVG 文件是 XML 格式，它们 可以通过文本编辑器进行修改和编辑。
• 由于 SVG 文件是基于 XML 的，它们本质上是 文本文件。
• 这意味着可以使用任何标准的文本编辑器来创建和修改 SVG 文件。
• 这种可编辑性使得开发者可以轻松手动调整图形的属性或进行批量处理。

5. 交互性

• SVG 支持 JavaScript 和 CSS，使得图像可以交互和动态表现。

6. 轻量

• SVG 文件 通常比等效的位图文件（如 JPEG 或 PNG）更小，尤其是在描述 复杂图形 时。

7. 兼容性

• SVG 支持 跨浏览器（如 Chrome、Firefox、IE 等）和设备显示，保持图像质量和一致性。
• W3C 标准，广泛的浏览器支持。
• SVG 自 2003 年成为 W3C 标准 以来，得到了广泛的浏览器支持。
• 几乎所有现代浏览器都能很好地渲染 SVG，这使得它成为跨平台 Web 应用的理想选择。
• 目前绝大多数的浏览器都支持 SVG 绘图。

8. 应用场景

• SVG 通常用于 网页图标、图表、图形界面元素 以及任何可能 需要动态变化或交互的图形 场景。
• 由于其强大的扩展性和可编辑性，SVG 已经成为现代网页设计中的重要组成部分。

9. 和传统的前端技术可以很好地结合

• SVG 元素可以通过 CSS 进行样式化，和 HTML 元素类似。你可以改变颜色、边框、阴影等。
  • 注意：并不是所有的 CSS 都能顺利作用于 SVG。
• 同时，因为 SVG 文件可以被 DOM 访问，你可以使用 JavaScript 添加事件监听器和交互逻辑，如点击或悬停事件。
• SVG 常用于网页上的图表和 数据可视化。
• SVG 可以单独使用，也可以与 D3.js、ECharts 等数据可视化库结合使用，能够创建动态的、交互式的图表和视图。
• SVG 格式非常适合用作 网站图标，如菜单图标、社交媒体图标等。
• 与传统的图片格式相比，SVG 图标在放大或缩小时能保持边缘的锐利和清晰，同时文件大小通常比位图小，加载更快，更适合网页性能优化。

10. 滤镜功能

• SVG 支持 多种滤镜效果，如模糊、阴影、光照效果等，这可以让设计师在不离开 SVG 环境的情况下创作出具有丰富视觉效果的图形。可以绘制更逼真，更复杂的图形效果。