SVG基本知识

（由于即将面试的公司是做AI的，涉及到数据可视化，所以先对SVG做一个大概了解）

（感觉前端知识还挺多的，加油！）

一、SVG是什么

　　SVG是scalable vector graphics的缩写，意为可扩展矢量图形或者可缩放矢量图形，它使用 XML 格式定义图像。

二、SVG怎么插入到HTML界面中

　　1、<embed>标签

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

　　【注：XHTML中不能使用 <embed>】

　　2、<object> 标签

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

　　【注：不允许使用脚本】

　　3、<iframe>标签

<iframe src="rect.svg" width="300" height="100">
</iframe>

三、形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

这是一个构造矩形的实例

扫描二维码关注公众号，回复： 7756988 查看本文章

更多详细的教程参考官网：https://www.w3school.com.cn/svg/index.asp