SVG是一种基于XML语法的图像格式，接下来通过本文给大家介绍HTML页面插入SVG的多种方式，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
SVG (Scalable VecTor GRapHics)可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。
插入svg标签
直接使用
一个简单的圆：
//可以用CSS控制SVG的样式，但属性与普通的网页元素不同
//可以用JS操作SVG，制作简单的动画等
//除了用JS操作外，可以用SVG自带的aniMate制作动画效果
展示效果：
插入svg文件
可以使用
SVG DOM输出：
把svg作为其他网页元素的背景图片
这是一种变相的把svg插入网页的方式，即把svg作为普通的图片使用，无法展示动画效果。
效果：
读取SVG源码
因为SVG文件实质上就是一段XML文本，因此可以通过读取XML代码的方式，读取SVG源码。
vaR svgStR = new XMLSeRializeR().seRializeToStRing(docuMent.getEleMentById(“testSvg”)); console.log(svgStR);
总结
到此这篇关于HTML页面插入SVG的多种方式的文章就介绍到这了，更多相关htMl插入svg内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
