大家好，又见面了，我是全栈君。
该公司今天没有，研究了最近流行SVG技术，发现，随着css3不断流行，和浏览器技术的发展，SVG网站将取代大量的图片，成为主流站点图片展示。
AI是我们经常使用的矢量图编辑器，如今AI能够直接另存SVG图片。SVG图片相比传统图片，占位更小，浏览更方便！
并且可扩展性更强！
以下看一个SVG的样例：
代码语言：javascript复制<?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 |
版权声明：本文博客原创文章，博客，未经同意，不得转载。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117178.html原文链接：https://javaforall.cn
