1.1.1 什么是SVG?
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG是一种使用xml技术描述图形的语言,使用 XML 格式定义图像。
SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG是一种基于xml语法的图像格式
SVG图像在放大的情况下图形不会失真
SVG的优点
SVG与canvas的区别:
SVG
不依赖分辨率
支持事件处理器(可绑定事件)
最适合大型渲染区域的应用程序(如:百度地图)
canvas
依赖分辨率
不支持事件处理器
最适合图像密集型的应用程序(游戏)
SVG是可伸缩的,高保真图形、无限放大且不会失真
SVG可通过文本编辑器创建和修改
SVG可被搜索、索引、脚本化和压缩
SVG可在任何的分辨率下被高质量地打印
SVG文件体积较小
SVG可在图像质量不下降的情况下被放大
1.1.2 vscode编辑器中的插件
vscode 写svg标签以及svg对应的基本图标标签,我们使用插件---SVG
vscode 预览,我们使用插件---SVG Snippets
方法:
输入 svg-对应的标签名
例如:
svg-svg ,会生成svg标签
svg-circle,会生成circle标签
svg-img,会生成image标签
等等
vscode 查看svg图形---SVGViewer(查看svg图)
Svg Preview:效果预览,需要选中
.svg` 后缀的文件,右上角才会有按钮进入预览。
1.1.3 SVG在html中
在html中,使用svg,首先必须使用<svg>标签
使用<svg width="" height="" style="" xmlns="/2000/svg" version="1.1"><svg>元素
使用<svg>元素绘制图像时,这些元素必须定义<svg>元素中
写svg标签的时候,在html页面中直接 输入 svg-svg+回车。
直接在html嵌入SVG代码
<svg width="600" height="600" style="border:1px solid blue;"viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><circle cx="100" cy="100" r="40" fill="red" stroke="green" style=""/><circle cx="300" cy="300" r="60" fill="red" stroke="green" style=""/><circle cx="500" cy="500" r="30" fill="red" stroke="green" stroke-width="2" style=""/><!-- <image xlink:href="" x="" y="" height="" width=""/> --></svg>
预览:
Scalable Vector Graphics (SVG) 2 指定的标准
我们可以给svg标签,添加边框线,style="border: 1px solid blue;"让我们看到整体的svg的宽和高。
我们可以给svg标签,指定宽度和高度,width="600"height="600"。如果我们不指定宽度和高度。当前这个svg就是默认宽度椒300,高度是150, 和canvas画布的默认宽度和高度是一样的。
注意:在Firefox、Internet Explorer9、谷歌Chrome和Safari中,你可以直接在HTML嵌入SVG代码。
链接到SVG文件
首先创建circle1.svg文件,里面代码如下:
<svg width="400" height="400" style="border:1px solid blue;margin:0 auto;"viewBox="" version="1.1"<!-- xmlns="/2000/svg"xmlns:xlink="/1999/xlink"> --><circle cx="150" cy="150" r="100" fill="orange" stroke="pink" stroke-width="5" style=""/></svg>
预览:
然后在html文件中,写a超链接标签,用 <a> 标签链接到一个 SVG 文件:链接到 SVG 文件,代码如下所示:
<a href="circle1.svg">查看 SVG 文件</a>
预览:
注意:
如果你的svg标签上,没有 以下属性设置,访问svg文件时,会报bug。
<svg viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink" />
报的错误如下所示:
svg代码也可以写在一个独立的文件中,然后在html文件中,用<img>、<object>、<embed>、<iframe>等标签插入网页
<embed src="circle1.svg" type="image/svg+xml" />
注意:<embed>
优势:所有主要浏览器都支持,并允许使用脚本
缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)
<object data="circle1.svg" type="image/svg+xml"></object>
注意:<object>
优势:所有主要浏览器都支持,但是有些浏览器需要安装插件才支持,并支持HTML4,XHTML和HTML5标准
缺点:不允许使用脚本。
如果你用object标签去插入svg文件,我们首先用ie9去预览查看效果。
<iframe src="circle1.svg"></iframe>
注意:<iframe>
优势:所有主要浏览器都支持,并允许使用脚本缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)
其中embed和object设置边框线的现象
<a href="./cr1.svg">查看svg文件</a> <br><br><br><iframe src="./cr1.svg" width="400" height="400" frameborder="0"></iframe><br><br><br><embed src="./cr1.svg" type="image/svg+xml" style="border:10px dashed red"><br><br><br><object data="./cr1.svg" type="image/svg+xml"></object>
预览:
SVG常见属性
svg中的x、y、width和height属性定义这段SVG代码所表达的数据在绘制时所占用的空间大小(可视区大小);svg中viewBox (0 0 200 200) :0 0 表示x轴和y有的起始位置,即可视区View中哪个位置开始显示(可见),后面200, 200 表示长和宽但是只是一个数量
用法要设置4个值:*viewbox="x, y, width, height"
*,例子:
这里定义的画布尺寸是100x100px。但是,viewBox属性定义了画布上可以显示的区域:从(0,0)点开始,200宽200高的区域。这个200x200的区域,会放到100x100的画布上显示。于是就形成了缩小两倍的效果。
viewbox 里定义的,也就是可视区可见的;坐标 (0, 0) 说明在左上角开始截,100 x 100 就是这个框框的宽x高
<svg width="400" height="400" style="border:1px solid blue"viewBox="0 0 200 200" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><circle cx="150" cy="150" r="100" fill="orange" stroke="pink" stroke-width="5" style=""/></svg>
注意:
你绘制的图像的大小,不能比 我们指定的可视区域的viewBox="0 0 200 200"大小要大。 绘制的图像和 svg的宽度和高度没关系。
1.1.4 SVG有一些预定义的形状元素
SVG有一些预定义的形状元素,可被开发者使用和操作:
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
矩形元素
<rect> 标签可用来创建矩形,以及矩形的变种
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
我们可以用属性,去设置这个矩形的边框线和填充色:
<svg width="" height=""viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><rect x="" y="" width="" height="" style=""/></svg>
我们可以用style行内样式,去设置这个矩形的边框线和填充色:
<svg width="500" height="500"viewBox="" version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><rect x="100" y="200" width="300" height="100" fill="blue" stroke="pink" stroke-width="2" style=""/><rect x="100" y="0" width="300" height="100" stroke="pink" stroke-width="2" style="fill:green; stroke:orange;stroke-width:10px;"/></svg>
预览: