HTML5矢量图形SVG

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图形—SVG Viewer(查看svg图)

      Svg Preview：效果预览，需要选中.svg` 后缀的文件，右上角才会有按钮进入预览。

1.1.3 SVG在html中

在html中，使用svg，首先必须使用<svg>标签

使用<svg width=””  height=”” style=””  xmlns=”http://www.w3.org/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="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/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="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/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="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/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"*，例子：

这里定义的画布尺寸是100×100px。但是，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="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/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="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="" y="" width="" height="" style=""/>
</svg>

我们可以用style行内样式，去设置这个矩形的边框线和填充色：

<svg width="500" height="500"
     viewBox="" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/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>

预览：

代码007普通

打赏 收藏 海报 链接