svg 基础

╰+哭是因爲堅強的太久メ 2022-05-23 00:09 141阅读 0赞

现在我们可以安全地使用 SVG 图像，除非您有很多用户使用 IE8 以及更低版本，或者使用较旧的 Android 设备。这种情况下，依然存在着备选方案。  
![这里写图片描述][70]

SVG 是一种 vector 图像文件格式。这使得它们与其他图像格式（如 PNG、GIF 或 JPG）有很大的不同，后者是光栅图像文件格式。  
由于 SVG 图像是矢量图像，可以无限缩放，而且在图像质量下降方面没有任何问题。为什么会这样呢？因为 SVG 图像是使用 XML 标记构建的，浏览器通过绘制每个点和线来打印它们，而不是用预定义的像素填充某些空间。这确保 SVG 图像可以适应不同的屏幕大小和分辨率

**svg优点**  
由于是在 XML 中定义的，SVG 图像比 JPG 或 PNG 图像更灵活，而且我们可以使用 CSS 和 JavaScript 与它们进行交互。SVG 图像设置可以包含 CSS 和 JavaScript。

SVG 可以渲染比其他格式小得多的矢量风格图像，主要用于标识和插图。另一个巨大的用例是图标。曾经是图标字体域，比如 FontAwesome，现在的设计师更喜欢使用 SVG 图像，因为它更小，并且允许使用多色图标。

SVG 在动画方面很简单，这是一个非常酷的话题。

SVG 提供了一些图像编辑效果，比如屏蔽和剪裁、应用过滤器等等。

SVG 只是文本，因此可以使用 GZip 对其进行有效压缩。

\*大多情况下，不必编写 SVG 代码，使用 Sketch 或 Figma 等工具或任何其他矢量图形工具来创建图像，并将其导出为 SVG。

SVG 图像使用 XML 定义，这意味着如果您精通 HTML，SVG 看起来会非常熟悉，除了在 SVG 中有标签适合文档构建（如 p、 article、 footer、 aside）我们还有矢量图的构建块： path、 rect、 line 等等。

这是一个 SVG 图像示例：

/// 一个10*10 的矩形
    <svg width="10" height="10">
      <rect x="0" y="0" width="10" height="10" fill="blue" />
    </svg>

SVG 元素  
在上面的示例中，您看到了 rect 元素的用法。SVG 有许多不同的元素。

最常用的是

text: 创建一个 text 元素

circle: 创建一个圆

rect: 创建一个矩形

line: 创建一条线

path: 在两点之间创建一条路径

textPath: 在两点之间创建一条路径，并创建一个链接文本元素

polygon: 允许创建任意类型的多边形

g: 单独的元素

坐标从绘图区域左上角的 0，0 开始，并 从左到右表示 x, 从上到下表示 y。

您看到的图像反映了上面所示的代码。使用浏览器 DevTools，您可以检查和更改它们。

text  
text 元素添加文本。可以使用鼠标选择文本。x 和 y 定义文本的起始点。

漂亮的长方形

circle  
定义圆。 cx 和 cy 是中心坐标，r 是半径。 fill 是一个常用属性，表示图形颜色。

rect  
定义矩形。 x ， y 是起始坐标，width 和 height 是自解释的。

line  
x1 和 y1 定义起始坐标。x2 和 y2 定义结束坐标。stroke 是一个常用属性，表示线条颜色。

path  
路径是一系列的直线和曲线。它是所有 SVG 绘制工具中最强大的，因此也是最复杂的。

d 包含方向命令。这些命令以命令名和一组坐标开始：

M 表示移动，它接受一组 x，y 坐标

L 表示直线将绘制到它接受一组 x，y

H 是一条水平线，它只接受 x 坐标

V 是一条垂直线，它只接受 y 坐标

Z 表示关闭路径，并将其放回起始位置

A 表示 Arch，它自己需要一个完整的教程

Q 是一条二次 Bezier 曲线，同样，它自己也需要一个完整的教程

textPath  
沿路径元素的形状添加文本。

Wow such a nice SVG tut  
polygon  
使用 polygon 绘制任意多边形。 points 代表一组 x，y 坐标多边形应该链接：

g  
使用 g 元素，您可以对多个元素进行分组：

SVG viewport 和 viewBox  
SVG 相对于其容器的大小由 svg 元素的 width 和 height 属性设置。这些单位默认为像素，但您可以使用任何其他常用单位，如 % 或 em。这是 viewport。

通常 “container” 指的是浏览器窗口，但 svg 元素可以包含其他 svg 元素，在这种情况下，容器是父元素 svg。

一个重要的属性是 viewBox。它允许您在 SVG 画布中定义一个新的坐标系统。

假设在 200x200px SVG 中有一个简单的圆：

通过指定 viewBox ，您可以选择 只显示此 SVG 的一部分。例如，您可以从 0，0 点开始，只显示一个 100 x 100 px 画布：

从 100，100 开始，您会看到另一部分，圆圈的右下角：

一个很好的可视化方法是想象 Google Maps 是一个巨大的 SVG 图像，而您的浏览器是一个和窗口大小一样大的视图框。当您移动时，Viewbox 会更改它的起始点（x,y）坐标，并且当您调整窗口的大小时，会更改 Viewbox 的宽度和高度。

带有 object 、iframe 或 embed 标签

使用 embed，您可以使用以下命令从父文档获取 SVG 文档

document.getElementById('my-svg-embed').getSVGDocument()

在 SVG 内部，您可以通过以下方式引用父文档：

window.parent.document  
使用数据 URL 内联 SVG  
您可以使用以上任何示例结合 Data URLs 将 SVG 内联到 HTML 中：

<img src="data:image/svg+xml;<DATA>" alt="Flag" />
    <object data="data:image/svg+xml;<DATA>"type="image/svg+xml"></object>
    <iframe data="data:image/svg+xml;<DATA>" frameborder="0"></iframe>

在 CSS 中也是：

.svg-background { background-image: url("data:image/svg+xml;<DATA>"); }

只需使用适当的Data URL 更改。

**样式元素**  
任何 SVG 元素都可以接受 style 属性，就像 HTML标签一样。并非所有的 CSS 属性都能像您预期的那样工作。例如，要更改文本元素的颜色，请使用 fill 而不是 color。

您也可以使用 fill 作为元素属性，正如您在前面看到的那样：

其他公共属性包括

fill-opacity，背景颜色不透明度

stroke，定义边框颜色

stroke-width，设置边框宽度

CSS 可以针对 SVG 元素，就像您以 HTML 标签为目标一样：

rect { fill: red; }
    circle { fill: blue; }

> 特性SVG 内联object/embed/iframe“img可以与用户交互✅✅✅支持动画✅✅✅可以运行 JavaScript 脚本✅✅����可以从外部编写脚本✅��������  
> 内联 SVG 图像无疑是最强大和最灵活的，它是使用 SVG 执行某些操作的唯一方法。  
> 如果您想要 SVG 与您的脚本进行任何交互，它必须以内联的方式加载到 HTML中。  
> 如果您不需要与 SVG 交互，只需在页面中显示它，将 SVG 加载至 img 、 object 或者 embed 中即可，如果您在不同的页面中重用 SVG 图像，或者 SVG 图像的大小相当大，那么加载 SVG 就特别方便。

**CSS 嵌入 SVG**  
将 CSS 加至 CDATA:

SVG 外部的 CSS  
您可以使用 CSS 更改 SVG 图像的任何样式。

SVG 属性可以很容易地在 CSS中 被覆盖，并且它们比 CSS 具有更低的优先级。它们的行为不像具有更高优先级的内联 CSS。

如果您希望对这两个矩形使用不同的样式，例如，对每个矩形使用不同的颜色？您可以使用CSS 变量.

**SVG 文件还可以包括外部样式表**

<?xml version="1.0" standalone="no"?>
    <?xml-stylesheet type="text/css" href="style.css"?>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=".." height=".." viewBox="..">
      <rect id="my-rect" x="0" y="0" width="10" height="10" />
    </svg>

**JavaScript 嵌入 SVG**  
你可以将 JavaScript 放在第一个位置上，并包装在一个 load 事件中，以便在页面完全加载并在 DOM 中插入 SVG 时执行它：

或者如果您将 JS 放在其他 SVG 代码的末尾，可以避免添加事件监听，确保当 SVG 出现在页面时 JavaSCript 会执行。

与 HTML 元素一样，SVG 元素也可以有 id 和 class 属性，因此我们可以使用 Selectors API 来引用它们：

请查看此故障 flaviocopes-svg-script.glitch.me/ 以获得功能性提示。

SVG 外部的 JavaScript  
如果可以与 SVG 交互（SVG 在 HTML 中是内联的），则可以使用 JavaScript 更改任何 SVG 属性，例如：

document.getElementById("my-svg-rect").setAttribute("fill", "black")

或者真正地做任何您想要的 DOM 操作。

### SVG vs Canvas API ###

区别：  
Canvas API 是 Web 平台一个很好的补充，它有类似于 SVG 的浏览器支持。与 SVG 主要的（也是最大的）不同之处是：画布不是基于矢量的，而是基于像素的，所以

它具有与基于像素的 png、jpg 和 gif 图像格式相同的缩放问题。

这使得不可能像使用 SVG 那样使用 CSS 或 JavaScropt 编辑画布图像。

**SVG 符号**  
符号使您可以定义一次SVG图像，并在多个地方重用它。如果您需要重用一个图像，这是一个很大的帮助，可能只是改变一点它的一些属性。

您可以通过添加一个 symbol 元素并分配一个 id 属性来完成此操作：

(xlink:href 用于 Safari 支持，即使它是一个已废弃的属性)

如果您希望对这两个矩形使用不同的样式，例如，对每个矩形使用不同的颜色？您可以使用CSS 变量.

本文转自[https://mp.weixin.qq.com/s/\_5i6ec3WvyXLLNEPTfd4qg][https_mp.weixin.qq.com_s_5i6ec3WvyXLLNEPTfd4qg]

[70]: /images/20220523/29e60d98e9134569a15e6efa5d810119.png
[https_mp.weixin.qq.com_s_5i6ec3WvyXLLNEPTfd4qg]: https://mp.weixin.qq.com/s/_5i6ec3WvyXLLNEPTfd4qg