svg
svg: scalable vector graphics,可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
SVG是一种XML语言,类似 XHTML,可以用来绘制矢量图形。SVG 可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以形变(be transformed)、合成、或者通过滤镜完全改变外观。
1. 怎么使用
svg可以嵌入浏览器,也可以单独成为一个文件。
1.直接嵌入:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="icon" p-id="2056" style="" t="1558689414500" version="1.1" viewBox="0 0 1024 1024">
<defs>
<style type="text/css" />
</defs>
<path fill="#34950e" d="M236.24 323.769c0 24.005 19.32 43.325 43.325 43.325s43.326-19.32 43.326-43.325c0-24.005-19.321-43.325-43.326-43.325-24.004 0-43.325 19.32-43.325 43.325z m336.064 223.067c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958-33.958 15.223-33.958 33.958zM456.38 323.769c0 24.005 19.32 43.325 43.325 43.325 24.005 0 43.325-19.32 43.325-43.325 0-24.005-19.32-43.325-43.325-43.325-24.005 0-43.325 19.32-43.325 43.325z" p-id="2057"/>
<path fill="#34950e" d="M858.017 0H165.983C74.648 0 0.293 74.356 0.293 166.276v690.863c0 91.92 74.355 166.276 165.69 166.276h692.034c91.335 0 165.69-74.356 165.69-166.276V166.276C1023.707 74.94 949.352 0 858.017 0zM384.366 686.18c-38.642 0-69.672-8.197-108.899-15.808L167.154 724.82l31.03-93.09C120.316 577.28 74.063 507.022 74.063 422.128c0-147.54 139.929-264.05 310.303-264.05 152.81 0 286.298 93.09 313.23 217.798a255.341 255.341 0 0 0-29.859-1.757c-147.54 0-264.05 110.07-264.05 245.315 0 22.834 3.513 44.496 9.367 64.988-9.367 1.171-18.735 1.757-28.688 1.757z m457.843 108.313l23.42 77.283-84.895-46.838c-31.03 7.61-62.06 15.808-93.09 15.808-147.541 0-264.051-100.703-264.051-225.41 0-124.12 116.51-225.408 264.05-225.408 139.344 0 263.465 101.288 263.465 225.409-0.585 70.843-46.838 132.903-108.899 179.156z" p-id="2058"/>
<path fill="#34950e" d="M741.507 546.836c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958c-19.32 0-33.958 15.223-33.958 33.958z" p-id="2059"/>
</svg>
单独保存一个文件,再在html文件中引入:
-
img元素:
<img src="imgs/weixin.svg" alt="">
-
embed元素:
<embed src="imgs/weixin.svg" type="image/svg+xml">
-
object元素:
<object data="imgs/weixin.svg" type="image/svg+xml"></object>
-
iframe元素:
<iframe src="imgs/weixin.svg"></iframe>
-
背景图:
html:<p></p>
css:p{background: url("imgs/weixin.svg") no-repeat center/cover;}
xml语言,svg使用该语言定义
2. 书写svg代码
HTML 提供了定义标题、段落、表格等等内容的元素。与此类似,SVG 也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由<svg>
根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组。
新建一个.svg文件,添加<svg></svg>
根元素,
基于XML语言的特点,SVG书写时需要注意:
- SVG 的元素和属性必须按标准格式书写,因为 XML 是区分大小写的(这一点和 HTML 不同);
- SVG 里的属性值必须用引号引起来,就算是数值也必须这样做。
在svg根元素中,可以定义svg的初始大小(width/height)(注意数值没有单位),也可以使用style设置CSS样式。
<svg style="background:#ccc;" width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
</svg>
其中xmlns是SVG的命名空间。
2.1 矩形: rect
<rect />
-
宽高依然可以使用
width/height
来设置,数值是没有单位的。 -
填充颜色可以使用
fill
来设置,颜色的取值同CSS。 -
边框(描边)可以使用
strock
来设置边框颜色,strock-width
来设置边框宽度。 -
矩形位置可以通过
x/y
来调节,x表示矩形左上角离根元素svg的左上角的水平距离,y表示矩形左上角距离svg元素左上角的垂直距离。 -
rx
和ry
分别表示圆角的x/y方位的半径。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="50" y="50" rx="10" ry="20" fill="#f40" stroke="#008c8c" stroke-width="20"/>
</svg>
2.2 圆形:circle
r
:圆的半径;cx
:圆心的x位置;cy
:圆心的y位置。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="50" y="50" rx="10" ry="20" fill="#f40" stroke="#008c8c" stroke-width="2"/>
<circle r="50" cx="100" cy="100" fill="#444" stroke="#fff"/>
</svg>
2.3 椭圆:ellipse
-
rx
:椭圆的 x 半径; -
ry
:椭圆的 y 半径; -
cx
:椭圆中心的 x 位置; -
cy
:椭圆中心的 y 位置。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<ellipse rx="50" ry="100" cx="200" cy="200" fill="#e6e6e6"/>
</svg>
2.4 线条:line
x1
:起点的 x 位置;y1
:起点的 y 位置;x2
:终点的 x 位置;y2
:终点的 y 位置。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<line x1="50" y1="50" x2="300" y2="300" stroke="#000" stroke-width="3"/>
</svg>
2.5 折线:polyline
Polyline是一组连接在一起的直线。因为它可以有很多的点,折线的的所有点位置都放在一个 points 属性中。
points
:里面写入所要连接的点的坐标,数字之间用逗号或空格隔开。
点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字,一个是 x 坐标,一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样:“0 0, 1 1, 2 2”。
默认会自动将points的首尾相连,并自动填充。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<polyline points="50 50, 100 50, 100 100, 50 100" fill="none" stroke="#000" stroke-width="2"/>
</svg>
2.6 多边形:polygon
polygon和折线很像,它们都是由连接一组点集的直线构成。不同的是,polygon的路径在最后一个点处自动回到第一个点。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<polygon points="50 50, 100 50, 100 100, 50 100" fill="none" stroke="#000" stroke-width="2"/>
</svg>
2.7 路径:path
-
M(moveto)
移动画笔,但不画线。一般M命令出现在路径的开始处,用来指明从何处开始画; -
L(lineto)
在当前位置和新位置之间画一条线段;
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<path d="M100 100 L150 100 L150 180 Z" fill="none" stroke="#000" stroke-width="3"/>
</svg>
- H(horizontal lineto)
绘制水平线,只带一个参数,标明x轴移动到的位置; - V(vertical lineto)
绘制垂直线,只带一个参数,标明y轴移动到的位置;
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<path d="M100 100 H300 V200" fill="none" stroke="#000" stroke-width="3"/>
</svg>
- C(curveto)
贝塞尔曲线, - S(smooth curveto)
- Q(quadratic Belzier curve)
- T(smooth quadratic Belzier curveto)
- A(elliptical Arc)
参数:半径1、半径2、顺时针旋转角度、小弧(0)或大弧(1)、顺时针(1)逆时针(0)、终点坐标。
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<path d="M300 300 A200 200 0 0 0 500 100" fill="none" stroke="#000" stroke-width="3"/>
</svg>
- Z(closepath)
闭合路径
3. 例子
画太极图
<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<path d="M300 50 A75 75 0 0 1 300 200 A75 75 0 0 0 300 350 A150 150 0 0 1 300 50" fill="#000" />
<path d="M300 50 A75 75 0 0 1 300 200 A75 75 0 0 0 300 350 A150 150 0 0 0 300 50" fill="#fff" />
<circle r="30" cx="300" cy="125" fill="#fff" />
<circle r="30" cx="300" cy="275" fill="#000" />
</svg>