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 |
版权声明：本文博客原创文章，博客，未经同意，不得转载。
