❶ SVG的SVG比较优势
首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。SVG是一种矢量图形格式，GIF、JPEG是光栅文件格式。有了两者的概念后，SVG较GIF、JPEG的优势显而易见。
1．任意放缩。
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2．文本独立。
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
3．较小文件。
总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
4．超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
5．超级颜色控制。
SVG图像提供一个1 600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
6．交互X和智能化。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。
❷ SVG图像在分辨率上有什么优势
矢量图像利用点和线等矢量化的数据描述图像，并在图形中包含色彩和位置信息。其最大的优点就是图像的任意缩放对分辨率没有影响，或者说，在矢量图中分辨率的概念是模糊的。并且，矢量图在显示和输出等过程中，与设备的分辨率没有关系。SVG作为矢量图像格式，除具有矢量图的优势外，对位图图像也能加以正确表达。SVG是基于xml创建的xml是w3c制定的网络开发语言，它的功能远远超过现行的html语言。xml语言具有比html语言更好的管理和交互功能。xml将网站的内容和框架完全分离，通过定义结构数据类型，网站用户能够自主的利用客户端程序显示和处理数据，具备很好的扩展能力。SVG的语法和结构基于xml，因此同样具备很好的扩展性。
❸ svg是什么
什么是SVG,
SVG的特点,
SVG较G
I
F、JPEG的优势
一、什么是SVG?
S
V
G(可放缩的矢量图形)是W3C(World
Wide
Web
ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。W3C是作为一个国际X的工业联盟而创建的，
目的是领导整个互联网协作的发展和创新，
以实现科技的进步和共同发展。由于W3C联盟关于SVG的开发工作组的成员都是一些知名厂商，
如Adobe、苹果、Aut0De
sk、Bit
Fla
sh、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open
Text、Quark、RAL(C
C
LRC)、S
un、V
i
S
i
0、施乐等，所以SVG不是一个私有格式，而是一个开放的标准。也就是说，它并不属于任何个体的专利，而是一个通过协作、共同开发的工业标准。正是因为这点，才使得SVG能够得到更迅速的开发和应用。
二、SVG的特点
1．基于XML
为了保证网络图像能够顺利地和目前已经由W3C开发的D0M1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTML技术，以及其他标准化技术，如ICC，URI，UNICODE，RGB，ECMAScr
ipt／JavaScript，Java协调一致，SVG是完全基于x
M
L(E
X
t
e
n
s
i
b
l
eMarkup
Language可扩展置标语言)，
并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式，
由于它是一种基于XML的语言，也就意味着它继承了XML的跨平台X和可扩展X，从而在图形可重用X上迈出了一大步。如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各个不同的SVG图形可以方便地组合，
构成新的SVG图形。
2．采用文本来描述对象
SVG包括3种类型的对象：
矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。
与传统的图像格式不同的是，svG采用文本来描述矢量化的图形，这使得svG图像文件可以像HT札网页一样有着很好的可读X。当用户用图像工具输出svG后，可以用任何文字处理工具打开SVG图像，并可看到用来描述图像的文本代码。掌握了svG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。
svG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果，但却仍然是以文本的形式存在的，可以选择复制、粘贴。由于SVG内的文字都以文本的形式出现在XML文件中，
这些信息可以为搜索引擎所用，而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人，可以通过其他方式(如声音)来传送这些信息。
3．具有交互X和动态X
由于网络是动态的媒体，SVG要成为网络图像格式，必须要具有动态的特征，这也是区别于其它图像格式的一个重要特征。SVG是基于XML的，它提供无可匹敌的动态交互X。你可以在svG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，或通过脚本定义来达到高亮显示、声音、动画等效果。
4．完全支持DOM
D0M(Document
Object
Model文档物件模型)是一种文档平台，它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM，
因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动，例如鼠标动作，实现自身或对其他物件、图像的控制等。这也是电子文档应具备的优秀特X之一。
三、SVG较G
I
F、JPEG的优势
首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。SVG是一种矢量图形格式，GIF、3PEG是位图图像格式。有了两者的概念后，SVG较GIF、JPEG的优势显而易见。
1．任意放缩。
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2．文本独立。
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
3．较小文件。
总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
4．超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。
5．超级颜色控制。
SVG图像提供一个1
600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
6．交互X和智能化。
由于SVG是基于XML的，
因而能制作出空前强大的动态交互图像。即SVG图像能对用户动作做出不同响应，
例如高亮、声效、特效、动画等。
❹ SVG有什么优越性和技术难点、热点
首先，它具有双极性动态补偿功能（瞬间切换到补偿容性和感性，响应时间1ms）。SVG并入电网后，对电网的影响很小，不容易产生谐振。
第二就是SVG相对去传统的电容补偿，在谐波很大的时候电容补偿对电容器的寿命影响很大，这样就电容器经常更换就不经济了，而SVG是有源设备，相当于一个电流源，所以影响不大。
最后，现在正出去更新换代的时期，SVG和SVC（TSC，TCR）等将取代传统的电容补偿。它的技术难点：无功电流的检测和跟踪的算法，以及PWM分配问题控制IGBT，最后就是是IGBT的散热问题。
热点：现在就是在抄概念，SVG当然有它的优势，但是价格和成本问题是每个用户所关心的。
❺ svg是什么格式
SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML，由World Wide Web Consortium（W3C）联盟进行开发的。
严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
SVG的优势在于：
1、SVG可被非常多的工具读取和修改（比如记事本）。
2、SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
3、SVG是可伸缩的。
4、SVG图像可在任何的分辨率下被高质量地打印。
5、SVG可在图像质量不下降的情况下被放大。
6、SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。
7、SVG可以与JavaScript技术一起运行。
❻ Svg 前端实践总结
本文是学习和使用svg的一些总结，不介绍svg作图的方法。
svg标签元素参考： MDN - svg
结构化标签也可参考： SVG中的结构化、分组和引用元素
svg的icon方案，参考： 腾讯干货！超实用的高清图标SVG解决方案全总结（下）
svg与普通html元素不同，需要指定命名空间，所以使用 createElement() 、 appendChilde() 抑或JQ的 append() 方法添加到dom上的svg元素是无法正常显示的。需要用到 createElementNS(ns,'svg') ，另外有些svg标签也需要单独的命名空间，例如a标签。为了避免每次添加这么长的命名空间，使用时可以简单包装下( NS_SVG 、 NS_XLINK 分别为svg和a标签命名空间)：
SVG如果是嵌套在HTML中的话，即使用svg标签，会和其他dom元素共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象；如果使用object、embed、iframe标签来引入svg,则其中的内容会有自己document对象，此时的操作需要借助 getSVGDocument() 方法：
对于object、iframe来引入的svg对象，还可以使用 contentDocumnet 属性来获取。当然，contentDocument不是专为svg设计的，同时可以获取其他内嵌xml、html对象。
操作的前提需要满足 同源策略(Same-origin policy) ，跨域将无法获取document对象。
平移和缩放表面看起来很简单，svg的平移缩放机制也不复杂，但是dom元素往往不固定宽度，应用场景也多变。例如有时候我们希望随浏览器响应，svg按照比例自动缩放；有时候我们希望为svg添加手动缩放功能或者手动拖拽平移功能（类似于网络地图的缩放平移机制）。
关于svg的viewBox相关知识，张鑫旭有篇文章讲的很详细： 理解SVG viewport,viewBox,preserveAspectRatio缩放 。这里谈谈在具体的应用场景中如何利用这些属性。
❼ 什么是SVG和SVG常用的形状
什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
代码结构
[html] view plain print?
<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
SVG提供的预定义形状元素的使用和操作：
<rect>标签可用来创建矩形，以及矩形的变种
<rect
x="20" y="20" rx="20" ry="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
代码解释：
1)rect 元素的 width 和 height 属性可定义矩形的高度和宽度
2)style 属性用来定义 CSS 属性
3)CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
4)CSS 的 stroke-width 属性定义矩形边框的宽度
5)CSS 的 stroke 属性定义矩形边框的颜色
6)x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
7)y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
8)CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
9)CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1)
10)rx 和 ry 属性可使矩形产生圆角。
<circle> 标签可用来创建一个圆
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
代码解释：
1)cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
2)r 属性定义圆的半径。
<ellipse> 标签可用来创建椭圆
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
代码解释：
1)cx 属性定义圆点的 x 坐标
2)cy 属性定义圆点的 y 坐标
3)rx 属性定义水平半径
4)ry 属性定义垂直半径
<line> 标签用来创建线条。
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
代码解释：
1)x1 属性在 x 轴定义线条的开始
2)y1 属性在 y 轴定义线条的开始
3)x2 属性在 x 轴定义线条的结束
4)y2 属性在 y 轴定义线条的结束
<polygon> 标签用来创建含有不少于三个边的图形
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
代码解释：
1)points 属性定义多边形每个角的 x 和 y 坐标
<polyline> 标签用来创建仅包含直线的形状
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
代码解释：
1)points 属性定义每段线的每个角的 x 和 y 坐标
<path> 标签用来定义路径
<path d="M250 150 L150 350 L350 350 Z" />
下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
SVG 滤镜 可用的滤镜有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
Gaussian Blur高斯模糊
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
代码解释：
1)<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
4)<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果
<linearGradient> 可用来定义 SVG 的线性渐变
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
代码解释：
1)<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3)<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<radialGradient> 用来定义放射性渐变
<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
代码解释：
1)<radialGradient>
标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和
r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop>
标签来规定。offset 属性用来定义渐变的开始和结束位置。
在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换
[html] view plain print?
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g fill="dodgerblue">
<rect x="10" y="10" width="40" height="40" ry="10" />
<rect x="80" y="80" width="40" height="40" ry="10" />
<rect x="150" y="150" width="40" height="40" ry="10" />
</g>
</svg>
❽ SVG格式的优势
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。
与其他图像格式相比，使用 SVG 的优势在于：
●SVG 可被非常多的工具读取和修改（比如记事本）
●SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
●SVG 是可伸缩的
●SVG 图像可在任何的分辨率下被高质量地打印
●SVG 可在图像质量不下降的情况下被放大
●SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
●SVG 可以与 Java 技术一起运行
●SVG 是开放的标准
●SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
目前，不是所有的浏览器都支持 SVG，这也是 SVG 普及的最大障碍。Mozilla、Firefox 和 Opera 都支持 SVG，而微软也计划这么做。在微软发布的Internet Explorer 9 中已经提供了对SVG 格式的支持。
SVG编辑器的数量正在增长，Adobe GoLive 5 也支持 SVG。
❾ 前端开发中，有哪些可以展现图标的方案
前端开发中,常见的图标展现方案
1. 最简单的还是图片，图片
这个方案是使用最广的方案，简单有效。jQuery UI使用的就是这样的方案。jQuery UI是把所有需要用到的小图标放置在一张大的sprite图片中。
2. 使用Web Fonts
通过Web Font技术来构建小图标是目前使用最广泛的代替普通图片的方案。
3. 使用SVG
SVG是一种基于XML的图形格式。这是一种可缩放的矢量图形。SVG是由W3C制定的标准，在2003年成为了W3C的推荐标准。相比较其他的图像格式，SVG的优势在于：SVG可以被很多工具读取和修改、SVG的尺寸更小、SVG图像在任何的分辨率下都可以高质量地打印。
4. 纯CSS生成图标
随着CSS的不断发展，使用CSS不仅仅可以产生一些四四方方的线框效果，同时可以产生一些曲线和倾斜效果。
以上就是我们在网页中常见的图标构建技术。在实际的使用中需要结合浏览器兼容来选择合适的方案。
❿ SVG适合做UI组件吗为什么不适合
1、首先IE8不兼容
2、其次SVG但用来做布局，做叠层并不合适，UI界面一般比较规整，控件可枚举
3、SVG与HTML比并没有优势，最后SVG适合绘图.