绘制奥运五环 提供示例展示了path标签的强大能力，通过d属性组合指令创建复杂图形在使用SVG时，有两种方式作为图像或作为应用程序嵌入作为图像，SVG有局限性，如渲染独立样式无效等而作为应用程序嵌入，如通过object元素，可提供更好的跨浏览器支持和与主页面的交互性混合SVG与HTML或XML标记，如。

可以用sublime_text打开svg图，从浏览器查看dom元素位置找到你想添加ID的代码，然后从svg图中找到该行代码，手动添加ID 获取时用var aaa= svgDocumentgetElementByIdquotaaaquot 获取就可以了。

探索canvas与svg的异同 canvas与svg的起源不同canvas是html5新添的元素，而svg的历史更为悠久，已有十几年svg以xml技术为基础，描述二维图形，与html5无专属性canvas则像一个画布，其绘图标量，支持导入jpgpng等格式图片在大型网络游戏和统计图表如柱状图曲线图饼状图等场景中，canvas技术。

SVG 是一种基于 XML 语法的图像格式与 HTMLCSS 类似，XML 是一种网络标准规范它是矢量图像文件，与 PNG，JPG 等像素文件不同为什么用 SVG在 Web 开发中，通常使用 HTML+CSS 来展示页面内容，但 HTML 是为盒模型设计，当需要渲染特殊形状时，就不太方便了SVG 可以看作是 HTML 在浏览。

html 直接使用svg图片不能显示是设置错误造成的，解决方法为1点击电脑开始菜单，找到Inscape工具并点击打开2在Inscape工具编辑界面，绘制两个圆形，设置不同半径和不同颜色填充3设置完毕后，将其导出成SVG格式，存储到桌面上4通过快捷方式打开HBuilderX工具，并新建Web项目，将svg图片复制到。

SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签你只需定义好XML属性，就能获得一致的图像元素使用SVG之前先将标签加入到HTML body中就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性也可以为之添加css样式，例如“borderstylesolidborderwidth2px”SVG标签。

使用ltembed或者ltobject元素来显示基本的SVG图形使用ltimg来显示SVG图形将SVG图形应用为CSS背景图直接在HTML文档中使用ltsvg标签需要HTML5支持对使用CSS或者外部对象元素的HTML元素使用SVG变换滤镜等特效对SVG对象使用类似photoshop的效果，包括模糊和色彩处理对SVG图像使用动画使用SVG。