SVG 定义图像的简单学习

1.概述

在定义特定的图像时，SVG可以更快的帮助我们定义，也提供了更好的语义化结构

• SVG为英文Scalable Vector Graphics（可缩放矢量图形）的缩写
• 使用SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
• 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
• SVG 使用 XML 格式定义图形

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

因为是使用XML格式来定义图形，所以定义的方式会与html5有所不同

来看一个实例：

<?xml version="1.0" standalone="no"?>
// 第一行为 XML 声明
//standalone属性:规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
//引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。
//该 DTD 位于 W3C，含有所有允许的 SVG 元素。
<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>

上面的代码，最下面几行很像html的写法，也是用标签来规定SVG文档。可以用属性来规定SVG的样式。
注意：SVG也要有开始和结束标签

2.在 HTML 中的输写格式

2.1.使用<enbed> <iframe>``<object>标签

点击官方文档查看

2.2.直接在HTML嵌入SVG代码

这种方式非常方便，但是只有在Firefox、Internet Explorer9、谷歌Chrome和Safari中才可以使用

<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>

还可以用<a>标签链接到一个SVG文件

<a href="circle1.svg">View SVG file</a>

3.可用属性以及标签

先定义一个空标签

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> </svg>

version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG标签中，用标签来声明需要定义的图形

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <elipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

3.1.矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" // 定义矩形左侧的位置 （默认单位：px）
      	y="20" // 定义矩形的顶端位置 （默认单位：px）
      	rx="20" // 定义横轴圆角的程度
      	ry="20" // 定义横轴圆角的程度
        width="300" //定义矩形的宽
        height="100" //定义矩形的高
        style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> //定义其他样式
        //fill ：定义背景颜色
        //stroke-width ：定义边框宽度
        //stroke ：定义边框颜色 	
</svg>

上面属性的效果，如下图：

3.2.圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" //设置 x 坐标
          cy="50"  //设置 y 坐标
          r="40"   //设置半径
          stroke="black" // 边框颜色
  		  stroke-width="2" //边框宽度
  		  fill="red" // 背景颜色
  />
</svg>

效果如下：

在此只记录两个形状，以及概念，还有更多的效果特性可以查看菜鸟教程文档