SVG是一种基于XML语法的图像格式。接下来介绍了在HTML页面中插入SVG的各种方式，并通过示例代码进行了详细介绍，对大家的学习或工作都有一定的参考价值。请向你的朋友咨询
SVG (Scalable Vector Graphics)可伸缩矢量图是一种基于XML语法的图像格式。其他的图像格式都是基于像素处理的，而SVG是对图像形状的描述，所以本质上是一个文本文件，体积相对较小，放大后没有失真。
插入svg标签
直接用codesvg/code tag把内容插入到网页中，成为DOM的一部分，然后用CSS和JS来控制。
一个简单的圆圈：
svg宽度='400' heihgt='300' id='testSvg '
圆圈cx='100' cy='100' r='50 '填充='红色'描边='黑色'描边-宽度=' 2 ' id=' TestCircle '/圆圈
/svg
//CSS可以用来控制SVG的样式，但是它的属性不同于普通的网页元素
style type='text/css '
# TestSVg { border :1 px solid # CCC；}
#testSvg圈{
fill:红色；
stroke:蓝色；
笔画宽度： 3；
}
/style
//可以用JS操作SVG，制作简单的动画等。
脚本类型='text/javascript '
var circle=document . getelementbyid(' Testcircle ')；
circle.addEventListener('click '，function(e) {
console.log('单击圆圈.');
circle.setAttribute('r '，65)；
}，false)；
/script
//除了JS操作，还可以用SVG自带的动画制作动画效果
svg宽度='400 '高度='300' id='testSvg '
圆圈CX=' 100 ' cy=' 100 ' r=' 50 ' id=' TestCircle '
动画属性名称='cx '从='100 '到='300' dur='2s' repeatCount='不定'/动画
/圆形
/svg
展示效果：
插入svg文件
可以使用codeimg/codecode embed/codecodeobject/codecodeiframe/code将SVG文件插入网页。
除了codeimg/code以外，都应该是双标签的形式。
//使用img标记
img src='test.svg'' /
//或SVG的base64编码
img src=' data : image/SVG XML；base64，[数据]' /
//使用嵌入标记
embed id=' Embedsvg ' type=' image/SVG XML ' src=' test . SVG '/embed
//获取SVG DOM
var embedSvg=document . getelementbyid(' embedSvg ')。getSVGDocument()；
console.log('SVG DOM: '，EmbedsVG)；
//使用对象标签
对象id='objectSvg '类型='image/svg xml '数据=' test . SVG '/对象
//获取SVG DOM
var ObjectSvg=document . GetElementbyID(' ObjectSvg ')。getSVGDocument()；
console.log('SVG DOM: '，object SVG)；
