html 直接使用svg图片不能显示

html 直接使用svg图片不能显示是设置错误造成的，解决方法为：

1、点击电脑开始菜单，找到Inscape工具并点击打开。

2、在Inscape工具编辑界面，绘制两个圆形，设置不同半径和不同颜色填充。

3、设置完毕后，将其导出成SVG格式，存储到桌面上。

4、通过快捷方式打开HBuilderX工具，并新建Web项目，将svg图片复制到项目指定目录下，然后新建一个静态页面。

5、在body标签内，添加一个embed标签，将SVG图片引入到页面里。

6、保存代码并直接使用浏览器预览，可以查看到SVG图片效果。

这种情况一般是由于svg中设定的画布的宽度和高度是百分比（通常是100%），这样在html中就会以一个默认的、固定的宽度和高度（300*150）来显示。解决的办法有两种，第一种是把svg中的画布宽度和高度设为一个固定值，比如（假定宽为400，高为200）：

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

第二种办法就是不改svg文件，而是修改html中的img标签，比如：

<img src="code1/basic.svg" width="400" height="200" alt="" />

这种方法更灵活，推荐使用。

html是控制svg变化的一门脚本语言。HTML元素是SVG图形的容器。SVG代表可缩放矢量图形。SVG对定义框，圆，文本等图形很有用。SVG代表可伸缩矢量图形，是一种用于描述2D图形和XML中的图形应用程序的语言，然后由SVG查看器呈现XML。大多数网络浏览器都可以显示SVG，就像显示PNG，GIF和JPG一样。HTML元素用于通过JavaScript绘制图形。元素是图形的容器。SVG使用更少的对象或更大的表面可以提供更好的性能。

---