svg文件在浏览器打开就可查看
在html中使用
第一种
将svg文件按照src来引入使用
如<img src='xx/xx.svg' />
后台返回的svg路径,需要在返回前加上,res.type('svg'),否则使用innerHTML才能解析
src如果是url,会直接请求该url地址,返回sv内容
第二种
在html页面使用svg标签(块级标签)
<svg xmlns="https://www.w3.org/2000/svg"
width="设置宽度"
height="设置高度"
version指定版本
>
...
</svg>
命名空间的方式
<html xmlns:svg="https://www.w3.org/2000/svg">
<body>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
第三种
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="https://www.adobe.com/svg/viewer/install/" />
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="https://www.adobe.com/svg/viewer/install/" />
<iframe src="rect.svg" width="300" height="100"></iframe>
svg在文件中使用配置
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://www.w3.org/2000/svg">
...
</svg>
svg文件在浏览器打开就可查看
在html中使用
第一种
阅读背景：
svg 基本配置和使用_神奇大叔的博客_svg配置
来源：互联网
分享到：
