SVG⼊门及嵌⼊HTML的7种⽅式
SVG简介
SVG 意为可缩放⽮量图形（Scalable Vector Graphics）。
SVG 使⽤ XML 格式定义图像。
SVG与其他图像格式相⽐，SVG的优势在于
SVG 可被⾮常多的⼯具读取和修改（⽐如记事本）
SVG 与 JPEG 和 GIF 图像⽐起来，尺⼨更⼩，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被⾼质量地打印
SVG 可在图像质量不下降的情况下被放⼤
SVG 图像中的⽂本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术⼀起运⾏
SVG 是开放的标准
SVG ⽂件是纯粹的 XML
svg图片怎么使用
⼀个简单的SVG实例
<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="/2000/svg"width="130"height="80"version="1.1">
<circle cx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="rgb(0,100,255)"stroke-opacity="0.5"fill-opacity="0.5" />
</svg>
第⼀⾏包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG ⽂件是否是”独⽴的”，或含有对外部⽂件的引⽤。
standalone=”no” 意味着 SVG ⽂档会引⽤⼀个外部⽂件 - 在这⾥，是 DTD ⽂件。
第⼆⾏引⽤了这个外部的 SVG DTD。该 DTD 位于 ““。该 DTD 位于 W3C，含有所有允许的 SVG 元素（DTD，即⽂档类型定义，作⽤是定义 XML ⽂档的合法构建模块）省略该⾏对显⽰并不会有影响。
SVG 代码以 元素开始，包括开启标签 和关闭标签 。这是根元素。width 和 height 属性可设置此 SVG ⽂档的宽度和⾼度。version 属性可定义所使⽤的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
使⽤SVG
SVG可以单独显⽰
完整版如上例所⽰
最简的SVG形式，除了“SVG标签”和“xmlns名空间”其他声明标签均可省略。
<svg xmlns="/2000/svg">
<rect width="300"height="100"/>
</svg>
SVG可以嵌⼊HTML中显⽰
嵌⼊的⽅式有7种，分别是：
代码直接嵌⼊
<img>链接⽅式引⽤
<a>链接⽅式引⽤
CSS的background属性引⽤
<embed>
<object>
<iframe>
代码直接嵌⼊
<html>
<body>
<svg xmlns="/2000/svg">
<line x1="0"y1="0"x2="200"y2="200"/>
</svg>
</body>
</html>
<img>链接⽅式引⽤
<html>
<body>
<img src="svgDemo.svg"width="100"height="100"/>
<img src="svgDemo.svg"/>
</body>
</html>
结果如图（左为Chrome、右为Microsoft Edge）
在Chrome浏览器中可以看出，<img>标签的默认⼤⼩是 300 x 150。
<a>链接⽅式引⽤
该⽅法只会显⽰链接⽂本，只有当⽤户单击链接，才能跳转⾄SVG图像。
CSS 的background 属性引⽤
<html >
<body >
<a  href ="test.svg">转到SVG 图像</a >
</body >
</html >
<html >
<body >
<div  style ="width:500;height:500;background:yellow url(test.svg) repeat"/>
</body >
</html >
<embed>、<object>、<iframe>
<html>
<body>
<embed src="svgDemo.svg"type="image/svg+xml" />
<object data="svgDemo.svg"type="image/svg+xml" />
<iframe src="svgDemo.svg" />
</body>
</html>
结果如下图所⽰
从图中可以看出，在当前版本的Chrome浏览器中
<embed>标签默认的⼤⼩是 300 x 150
<object> 标签默认的⼤⼩是 300 x 150
<iframe>标签默认的⼤⼩是 304 x 154，因为iframe有边框，边框线宽是 2。
这都说明了：在我的Chrome浏览器上svg⽮量图形默认的⼤⼩是 300 x 150，如果⽮量图像⼤于该值，会被裁剪。
另外还需要注意的⼀点是：即使都是Chrome浏览器也会因不同版本⽽给svg设置不同的默认⼤⼩，所以为了确保图像能正常显⽰，最好⼿动给svg指定width和height属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。