概述:
SVG 基于 XML 语法的图像格式,它可以任意改变其大小也不会变形,是一种和图像分辨率无关的可缩放矢量图。
优点:
1.任意放缩:用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。
2.文本独立:SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。
3.较小文件:总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。
4.超强显示效果:SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨力和打印分辨力。
5.超级颜色控制:SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
6.交互性和智能化:SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题,另一个问题就是SVG的本地运行环境下的厂家支持程度。
注:GIF、JPEG,png等都是位图,改变其尺寸大小图像会变形或会出现马赛克模糊等情况
用法:
SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。
上面是 SVG 代码直接插入网页的例子。效果图如下:
SVG 代码也可以写在一个独立文件中,然后用、
效果图如下:
实际上,除了img标签是引入该svg的路径来加载图片的,其他的是三个标签都是通过将svg标签的所有属性值放在dom层里加载出来;
CSS 也可以使用 SVG 文件
注意:svg图片如果作为背景图放在css里面写的话,需要固定宽高,且加上background-size属性,来规定背景图像的尺寸;
语法:
1、
属性:width(宽度)、height(高度);可用具体像素单位和百分比;不指定则为默认值width=300px;height=150px; viewBox = “x,y,width,height” 分别是
注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。
左图是加了viewBox属性的,右图是去掉viewBox属性的;存在的可视区域都是100*100的,而实际上此时circle的大小是不一样的,分别是200*200,100*100
如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。(满屏都是图)
2、
属性:cx:横坐标,cy:纵坐标,r:半径,单位为像素。坐标都是相对于
如:fill:填充色;stroke:描边色;stroke-width:边框宽度
3、
line x1="0"y1="0"x2="200"y2="0"style="stroke:rgb(0,0,0);stroke-width:5"/>
属性:x1:线段起点的横坐标;y1:线段起点的纵坐标;x2:线段终点的横坐标;y2:线段终点的纵坐标;style:线段的样式。
4、
属性:points 指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
5、
属性:x:矩形左上角端点的横坐标;y:矩形左上角端点的纵坐标;width:矩形的宽度;height:矩形的高度
6、
属性:cx:椭圆中心的横坐标;cy:椭圆中心的纵坐标;rx:椭圆横向轴的半径;ry:椭圆纵向轴的半径
7 、
属性:points 指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
8 、
属性:d:表示绘制顺序,它的值是一个长字符串,每个字母表示一个绘制动作,后面跟着坐标;
M:移动到(moveto);L:画直线到(lineto);Z:闭合路径
9、
属性:x:文本区块基线(baseline)起点的横坐标;y:文本区块基线(baseline)起点的纵坐标。文字的样式可以用class或style属性指定。
10、
属性:href:指定所要复制的节点,x:
1 1、
属性:
12、
属性:想写啥写啥,但是内容可以被use标签复制引用;相当于被visblity:hidden了,但是仍然在dom结构中
13、
属性:xlink:href:图片的来源路径;width:图片的宽度;hieght:图片的高度
14、
属性:x:横坐标;y:纵坐标;width:
15、
属性:attributeType:指定attributeName属性的属性,默认为"auto",attributeName:发生动画效果的属性名;from:单次动画的初始值;to:单次动画的结束值;dur:单次动画的持续时间;repeatCount:动画的循环模式。
注:可以在多个属性上面定义动画
16、
属性:type:
SVG 图像入门教程:http://www.ruanyifeng.com/blog/2018/08/svg.html