[SVG] 可伸缩矢量图形 (Scalable Vector Graphics)

时间 2019-12-11

标签 svg 可伸缩矢量图形 scalable vector graphics 栏目 Scala 繁體版

原文原文链接

用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形
2003 年一月，SVG 1.1 被确立为 W3C 标准
SVG 文件必须使用 .svg 后缀来保存

参考： html

https://www.jianshu.com/p/2ea0ec6800d7网络

http://www.ruanyifeng.com/blog/2018/08/svg.htmlsvg

1. 特色：工具

SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失;spa

SVG 可被很是多的工具读取和修改（好比记事本）code

尺寸更小，可伸缩，且可压缩性更强xml

可在图像质量不降低的状况下被放大htm

SVG 图像可在任何的分辨率下被高质量地打印blog

图像中的文本是可选的，同时也是可搜索的（很适合制做地图）ci

SVG 能够与 Java 技术一块儿运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

2. 实例

html 中使用：

<html>
    <body>
 
    <h1>My first SVG</h1>
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
    </svg>
 
    </body>
</html>

<svg> 标签表明画布

的 width 和 height 属性

指定了 SVG 图像在 HTML 元素中所占据的宽度和高度
若是不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）

的 viewBox 属性

若是只想展现 SVG 图像的一部分，就要指定 viewBox 属性

举个例子：

<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

SVG 图像是 100px宽 100px高，
viewBox 属性指定视口从(50, 50)这个点开始。因此，实际看到的是右下角的四分之一圆
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，
因为 SVG 图像的大小是 100 x 100，因此视口会放大去适配 SVG 图像的大小，即放大了四倍

若是不指定 width 属性和 height 属性，只指定 viewBox 属性，

则至关于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小

<circle> 标签表明圆形

<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

的 cx、cy、r 属性分别为横坐标、纵坐标和半径，单位为像素。

坐标都是相对于 <svg> 画布的左上角原点

class 属性用来指定对应的 CSS 类

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/> 
</svg>

第一行：

XML 声明

standalone 属性：规定此 SVG 文件是不是“独立的”，或含有对外部文件的引用

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件

第二行：第二引用了这个外部的 SVG DTD

该 DTD 于 http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 该 DTD 位于 W3C，含有全部容许的 SVG 元素

第三行：SVG 代码以 < svg > 元素开始，包括开启标签 < svg > 和关闭标签 < /svg >

width 和 height 属性可设置此 SVG 文档的宽度和高度
version 属性可定义所使用的 SVG 版本
xmlns 属性可定义 SVG 命名空间
< circle > 用来建立一个圆
cx 和 cy 属性定义圆中心的 x 和 y 坐标。
若是忽略这两个属性，那么圆点会被设置为 (0, 0)
r 属性定义圆的半径
stroke 显示形状的线条颜色
stroke-width 显示形状的线条宽度
fill 属性设置形状内的颜色

3. 把 SVG 文件嵌入 HTML 页面

<img src="circle.svg">


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


<embed id="embed" src="icon.svg" type="image/svg+xml">


<iframe id="iframe" src="icon.svg"></iframe>