网页svg设计方法 第1篇
通常在html中插入图片的方法是如下：
插入SVG图片则使用\，如下面的例子，需要注意的是，如果是IE 8浏览器，我们还是需要fallback原本的GIF或PNG图片。
另外，如果你原先在CSS文件中设置了让图片自动响应宽度
你使用的SVG图片则无法实现以上的CSS，因为：
SVG文件并不在img标签里 三、怎么在网站设计中使用SVG图片出现问题的解决方案
解决方法 增加定义object的max-width img, object { max-width: 100%; }
网页svg设计方法 第2篇
除了目前为止许多示例中的基本 CSS 样式，SVG 图形还支持使用过滤器和渐变。本节将介绍如何向 SVG 图形应用过滤器和渐变。
可以使用过滤器向 SVG 图形应用特殊的效果。SVG 支持以下过滤器。
请参见 参考资料 ，了解使用这些过滤器的详细说明。
清单 14 创建了一种应用到矩形上的投影效果。
清单 14. 创建矩形的投影效果
清单 14 中的代码会生成图 14 中的图形。
图 14. 一个矩形的投影效果
过滤器在 def （表示定义）元素中定义。本示例中的过滤器分配了一个 id _f1_ 。 filter 标记本身拥有定义过滤器的 x 和 y 坐标及宽度和高度的属性。在 filter 标记中，可以使用想要的过滤器元素并将其属性设置为想要的值。
定义过滤器之后，使用 filter 属性将它与一个特定图形关联，如 rect 元素 中所示。将 url 值设置为您分配给过滤器的 id 属性的值。
渐变 是从一种颜色到另一种颜色逐渐的过渡。渐变具有两种基本形式：线性和径向渐变。所应用的渐变类型由您使用的元素确定。以下示例展示了应用于一个椭圆形的线性和径向渐变。
清单 15 创建了一个具有线性渐变的椭圆。
清单 15. 创建一个具有线性渐变的椭圆
清单 15 中的代码会生成图 15 中的图形。
图 15. 具有线性渐变的椭圆
清单 16 创建了一个具有径向渐变的椭圆。
清单 16. 创建一个具有径向渐变的椭圆
清单 16 中的代码会生成图 16 中的图形。
图 16. 具有径向渐变的椭圆
像过滤器一样，渐变在 def 元素内定义。每个渐变分配有一个 id 。渐变属性（比如颜色）可使用 stop 元素在渐变标记内设置。要将渐变应用于图形，可以将 fill 属性的 url 值设置为想要的渐变的 id 。
网页svg设计方法 第3篇
创建 SVG XML 之后，可采用多种方式将它包含在 HTML 页面中。第一种方法是直接将 SVG XML 嵌入到 HTML 文档中，如清单 20 所示。
清单 20. 直接将 SVG XML 嵌入 HTML 文档
此方法可能最简单，但它不支持重用。请记住，可以使用 .svg 扩展名保存 SVG XML 文件。当将 SVG 图形保存在 .svg 文件中时，您可以使用 embed 、 object 和 iframe 元素来将它包含在网页中。清单 21 显示了使用 embed 元素包含 SVG XML 文件的代码。
清单 21. 使用 embed 元素包含一个 SVG XML 文件
清单 22 显示了如何使用 object 元素包含一个 SVG XML 文件。
清单 22. 使用 object 元素包含一个 SVG XML 文件
清单 23 给出了使用 iframe 元素包含一个 SVG XML 文件的代码。
清单 23. 使用 iframe 元素包含一个 SVG XML 文件
本文介绍了使用 SVG 格式创建图形的基础知识。您学习了如何使用内置的集合元素（比如线、矩形、圆等）创建基本形状。您还学习了如何通过发出一系列命令（比如移动到、连线到和使用弧线连接到），使用 path 元素创建复杂的图形。本文还探讨了如何对 SVG 图形应用过滤器和渐变，包括文本图形，以及如何在 HTML 页面中包含 SVG 图形。