首页 > 代码库 > SVG图片技术小结
SVG图片技术小结
今天在公司没事，研究了一下最近流行的SVG技术，发现，随着css3的不断流行，和浏览器技术的发展，SVG将会取代网站大量图片，成为网站图片展现的主流。
AI是我们常用的矢量图编辑器，现在AI可以直接另存SVG图片，SVG图片相比传统图片，占位更小，浏览更方便！而且可扩展性更强！
下面看一个SVG的例子：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。
SVG元素汇总
元素列中的链接指向了具体元素的相关属性和更多有用的信息。
| 元素 | 描述 |
|---|---|
| a | 定义超链接 |
| altGlyph | 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字） |
| altGlyphDef | 定义一系列象性符号的替换（例如，音乐符号或者亚洲文字） |
| altGlyphItem | 定义一系列候选的象性符号的替换 |
| animate | 随时间动态改变属性 |
| animateColor | 规定随时间进行的颜色转换 |
| animateMotion | 使元素沿着动作路径移动 |
| animateTransform | 对元素进行动态的属性转换 |
| circle | 定义圆 |
| clipPath | |
| color-profile | 规定颜色配置描述 |
| cursor | 定义独立于平台的光标 |
| definition-src | 定义单独的字体定义源 |
| defs | 被引用元素的容器 |
| desc | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
| ellipse | 定义椭圆 |
| feBlend | SVG 滤镜。使用不同的混合模式把两个对象合成在一起。 |
| feColorMatrix | SVG 滤镜。应用matrix转换。 |
| feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射。 |
| feComposite | SVG 滤镜。 |
| feConvolveMatrix | SVG 滤镜。 |
| feDiffuseLighting | SVG 滤镜。 |
| feDisplacementMap | SVG 滤镜。 |
| feDistantLight | SVG 滤镜。 Defines a light source |
| feFlood | SVG 滤镜。 |
| feFuncA | SVG 滤镜。feComponentTransfer 的子元素。 |
| feFuncB | SVG 滤镜。feComponentTransfer 的子元素。 |
| feFuncG | SVG 滤镜。feComponentTransfer 的子元素。 |
| feFuncR | SVG 滤镜。feComponentTransfer 的子元素。 |
| feGaussianBlur | SVG 滤镜。对图像执行高斯模糊。 |
| feImage | SVG 滤镜。 |
| feMerge | SVG 滤镜。创建累积而上的图像。 |
| feMergeNode | SVG 滤镜。feMerge的子元素。 |
| feMorphology | SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。 |
| feOffset | SVG 滤镜。相对与图形的当前位置来移动图像。 |
| fePointLight | SVG 滤镜。 |
| feSpecularLighting | SVG 滤镜。 |
| feSpotLight | SVG 滤镜。 |
| feTile | SVG 滤镜。 |
| feTurbulence | SVG 滤镜。 |
| filter | 滤镜效果的容器。 |
| font | 定义字体。 |
| font-face | 描述某字体的特点。 |
| font-face-format | |
| font-face-name | |
| font-face-src | |
| font-face-uri | |
| foreignObject | |
| g | 用于把相关元素进行组合的容器元素。 |
| glyph | 为给定的象形符号定义图形。 |
| glyphRef | 定义要使用的可能的象形符号。 |
| hkern | |
| image | |
| line | 定义线条。 |
| linearGradient | 定义线性渐变。 |
| marker | |
| mask | |
| metadata | 规定元数据。 |
| missing-glyph | |
| mpath | |
| path | 定义路径。 |
| pattern | |
| polygon | 定义由一系列连接的直线组成的封闭形状。 |
| polyline | 定义一系列连接的直线。 |
| radialGradient | 定义放射形的渐变。 |
| rect | 定义矩形。 |
| script | 脚本容器。（例如ECMAScript） |
| set | 为指定持续时间的属性设置值 |
| stop | |
| style | 可使样式表直接嵌入SVG内容内部。 |
| svg | 定义SVG文档片断。 |
| switch | |
| symbol | |
| text | |
| textPath | |
| title | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
| tref | |
| tspan | |
| use | |
| view | |
| vkern |