SVG

概述

SVG可缩放矢量图形(Scalable Vector Graphics),是一种用于描述二维矢量图形,基于 XML 的标记语言。作为一个基于文本的开放网络标准,SVG能够优雅、简洁地渲染不同大小的图形,并和CSSDOMJavaScriptSMIL等其他网络标准无缝衔接。SVG 图像及其相关行为被定义于 XML 文本,这意味着可以对其进行搜索、索引、编写脚本以及压缩。和传统的点阵图像(JPEGPNGt等)不同,SVG格式提供的是矢量图,这意味着它能够被无限放大而不失真。SVG 是由W3C于1999年开发的开放标准,但由于浏览器兼容问题(尤其是IE),一直未被广泛应用;


在图标字体领域,比如 FontAwesome 上,越来越多的设计师们现在更喜欢使用 SVG 图像,因为它更小,并且可以使用多色图标。


SVG图像示例

// 定义一个 10 x 10 像素的蓝色矩形图像
<svg width="10" height="10">
  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>


使用SVG

和使用其他图像格式一样:

<img src="image.svg" alt="My SVG image" />


SVG元素

svg图像是各种点、线、面等元素构成,如下是svg中的常用元素

text: 创建一个 text 元素
circle: 创建一个圆
rect: 创建一个矩形
line: 创建一条线
path: 在两点之间创建一条路径
textPath: 在两点之间创建一条路径,并创建一个链接文本元素
polygon: 允许创建任意类型的多边形
g: 单独的元素


SVG viewport 和 viewBox

SVG元素大小由属性 widthheight 设置,单位默认为像素,也可以使用其他常用单位,如 %em,即viewport;

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


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

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

<svg width="200" height="200">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

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

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

从 100,100 开始,会看到另一部分,圆圈的右下角:

<svg width="200" height="200" viewBox="100 100 100 100">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>


在 Web 网页中插入 SVG

将 SVG 添加到网页中有多种方法。

1.0> 使用 img 标签

<img src="flag.svg" alt="Flag" />

2.0> 使用 css background-image 属性

background-image: url(flag.svg);

3.0> 在 HTML 中内联

<svg width="300" height="200" viewBox="0 0 300 200"
    version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Italian Flag</title>
  <desc>By Flavio Copes https://flaviocopes.com</desc>
  <g id="flag">
      <rect fill="green" x="0" y="0" width="100" height="200"></rect>
      <rect fill="white" x="100" y="0" width="100" height="200"></rect>
      <rect fill="red" x="200" y="0" width="100" height="200"></rect>
  </g>
</svg>

4.0> 使用带有 objectiframeembed 标签

<object data="flag.svg" type="image/svg+xml"></object>

<iframe src="flag.svg" frameborder="0"></iframe>

<embed src="flag.svg" type="" />

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

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

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

window.parent.document

5.0> 使用数据 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 更改<DATA>


SVG样式设置

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

<svg>
  <text x="5" y="30" style="fill: green">A nice text</text>
</svg>

<svg>
  <text x="5" y="70" style="fill: green; font-family: Courier New">
    A nice text
  </text>
</svg>

也可以使用 fill 作为元素属性:

<svg>
  <text x="5" y="70" fill="green">A nice text</text>
</svg>

其他公共属性包括

  • fill-opacity,背景颜色不透明度
  • stroke,定义边框颜色
  • stroke-width,设置边框宽度


CSS、JavaSCript 与 SVG 交互

1.0> CSS 嵌入 SVG

<svg>
   <style>
     <![CDATA[ 
        #my-rect { fill: blue; } 
     ]]>     
   </style>
   <rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>


1.1> 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>

2.0> JavaScript 嵌入 SVG

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

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", () => {
        //...
      }, false)
    ]]>
  </script>
  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>

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

<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue" />
  <script>
    <![CDATA[
      //...
    ]]>
  </script>
</svg>

与 HTML 元素一样,SVG 元素也可以有 idclass 属性,因此我们可以使用 Selectors API 来引用它们:

<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue"
        id="my-rect" class="a-rect" />
  <script>
    <![CDATA[
      console.log(document.getElementsByTagName('rect'))
      console.log(document.getElementById('my-rect'))
      console.log(document.querySelector('.a-rect'))
      console.log(document.querySelectorAll('.a-rect'))
    ]]>
  </script>
</svg>

3.0> SVG 外部的 JavaScript

如果可以与 SVG 交互(SVG 在 HTML 中是内联的),则可以使用 JavaScript 更改任何 SVG 属性,例如:

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

4.0> SVG 外部的 CSS

可以使用 CSS 更改 SVG 图像的任何样式,SVG 属性可以很容易地在CSS中被覆盖,因为SVG属性比 CSS 有更低的优先级,它们的行为不像具有更高优先级的内联 CSS

<style>
  #my-rect {
    fill: red
  }
</style>
<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue"
        id="my-rect" />
</svg>


SVG vs Canvas

与 SVG 主要的不同之处是:画布不是基于矢量的,而是基于像素的,所以Canvas具有与基于像素的 png、jpg 和 gif 图像格式相同的缩放问题。


SVG 符号

符号用于定义一次SVG图像,并在多个地方重用。

如下,可以通过添加一个 symbol 元素并分配一个 id 属性来定义SVG图像:

// 定义svg图像,可以在一个svg标签中通过symbol元素中定义多个svg图像
<svg class="hidden">
  <symbol id="rectangle" viewBox="0 0 20 20">
    <rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" />
  </symbol>

  <symbol id="rectangle1" viewBox="0 0 20 20">
    <rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" />
  </symbol>
</svg>

// 使用已定义好的svg图像
// xlink:href是一个废弃的属性,此处用于支持Safari
<svg>
  <use xlink:href="#rectangle" href="#rectangle" />
</svg>

<svg>
  <use xlink:href="#rectangle1" href="#rectangle1" />
</svg>


验证 SVG

SVG 文件是 XML,可以用无效的格式编写,有些服务或应用程序可能不接受无效的 SVG 文件。

SVG 可以使用 W3C Validator验证。



参见:

https://developer.mozilla.org/zh-CN/docs/Web/SVG

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/symbol

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/use

https://juejin.cn/post/6844903593212903431

举报

© 著作权归作者所有


0