SVG初体验

时间  2019-11-07
标签 svg 体验 繁體版
原文   原文链接

引言

借鉴出处

此基础教程主要来源于w3c school svg,慢慢地发现mdn svg是更好的进阶资料,之后的主要研究围绕它展开.由于忙于工做上的事情, 因此这篇文章前先后后花了很长时间, 一把鼻涕一把泪, 虽说不是很难.css

正文

SVG简介

以前一直久闻SVG大名,但一直没机会,这几天趁有空的时候初体验了几把,尝尝鲜.Scalable Vector Graphics是一门基于XML用来描述二维矢量图形的标记语言,感受SVG在国外用得较多,国内相对不受欢迎,我在公司用得较少,不过咱们老大为了解决一个金字塔设计问题派上了用场,哦对了想起了还有一些以前用上的SVG icons---IcoMoon因此有点痒也想搞搞.
SVG对于Web图像的重要性至关于HTML对于Web文本的重要性.它的主要竞争者是Adobe未开源的Flash技术,和Flash相比SVG采用XML文本格式来定义图像,和CSS,DOM,XSL,SMIL同样都是Web标准,共同协做.html

SVG图像优点

  • 在放大或者改变尺寸的状况下图形质量不会损失.html5

  • 与JPEG,GIF图像比起来,尺寸更小,可压缩性更强.css3

  • 可伸缩canvas

  • 图像中的文本可选浏览器

  • 全部浏览器均支持SVG文件框架

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"是说会引用一个dtd文件.
第二行和第三行引用了这个外部SVG DTD:"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd,该dtd位于w3c,含有全部容许的svg元素.
svg代码从<svg>根元素开始,<circle>用来建立一个圆,cx,cy是圆心坐标(默认(0,0)),r是半径.stroke和sroke-width用来设置形状轮廓,fill用来设置形状内颜色.全部元素都有关闭标签,包括</svg>,/>等等,用来关闭svg元素和文档自己.
svg文件能够经过如下三种不一样方法嵌入到html文档:<embed>, <object>, <iframe>标签.函数

  • 全部主流浏览器都支持<embed>标签,并容许使用脚本.当在html页面中嵌入svg时使用<embed>标签是adobe svg viewer推荐的方法,若是须要建立合法的xhtml,就不能使用<embed>.性能

<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install" />
//pluginspage指向下载插件的url.

  • <object>是html4中的标准标签,较新浏览器支持地较好可是不容许使用脚本.最新adobe svg viewer安装了的话<object>会失效.

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install" />
//codebase指向下载插件的url

  • <iframe>支持地很好

<iframe srv="rect.svg" width="300" heght="100"></iframe>

SVG组成

这里是我写的一个有较多类svg元素的demo,Command+S保存快捷键还有第一次保存以后每隔一分钟自动保存仍是很方便的.提示一点,Condepen上面不须要声明DOCTYPE,只须要往html代码块里面写上<body>里的代码,因此

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml version="1.0" standalone="no"?>

这一部分能够省去.

SVG形状

svg有一些预约义的形状提供使用:矩形<rect>,圆形<circle>,椭圆<ellipse>,线<line>,折线<polyline>,多边形<polygon>,路径<path>.下面逐个介绍:

  • <rect>用来建立矩形及其变形.rect.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.w3c.org/2000/svg">
    <rect x="20" y="20" width="300" height="100" style="fill:pink;stroke-width:1;stroke:rgb(0, 0, 0);fill-opacity=0.9;stroke-opacity=0.1" />
</svg>
//stroke指矩形边框颜色,fill指矩形中间填充颜色

style里面还可使用opacity表示所属svg元素的透明度,rx,ry表明椭圆角的a,b取值.

  • <circle>

<circle cx="200" cy="100" r="50" stroke="#123456" stroke-width="2" fill="#654321" opacity=".4" />

demo里面<circle>元素和<rect>元素处于同一个<svg>根元素之下,注意两个元素不要重叠,若是存在重叠将按照元素出现次序进行前后覆盖(固然若是相邻的两个元素均设置了透明度则覆盖仍是被覆盖没有意义,若是只有一方设置了透明度那么仍是存在覆盖与被覆盖的状况).

  • <ellipse>

<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20" style="fill:white"/>

  • <line>

<line x1="50" y1="100" x2="750" y2="100" stroke-width="5"  stroke="#987654" />

注意线条<line>元素没有fill属性,设置了定值也毫无心义.

  • <polygon>用于建立很多于三条边的元素--多边形

<polygon points="800,20 890,20 935,100 890,180 800,180 755,100"  style="stroke:#123987;stroke-width:4;fill:#aef492"/>

  • <polyline>

<polyline points="50,300 50,325 75,325 75,400 150,400" style="fill:#afc196;stroke:red;stroke-width:8"/>

注意polyline元素能够给fill属性赋值,针对的是相邻的点,边之间围成的区域.

  • <path>
    因为该元素涉及较多的命令,要想熟练运用好这些命令并不容易,因此<path>是svg里面最复杂的元素,可是复杂的东西每每能够实现很棒的功能,<path>能够绘制出带有复杂路径的图形.

用于路径的经常使用命令:`M=moveto, L=lineto,
H=horizontal lineto, V=vertical lineto, C=curveto, S=smooth curveto, Q=quadratic bezier curve, T=smooth quadratic bezier curve, 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.能够在svg元素上使用多个滤镜.

高斯模糊

<defs>
  <filter id="Gaussian_Blur_1">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2">
  </filter>
  <filter id="Gaussian_Blur_2">
    <feGaussianBlur in="SourceGraphic" stdDeviation="20">
  </filter> 
</defs>
<ellipse cx="300" cy="100" rx="100" ry="50" filter="url(#Gaussian_Blur_1)" />
<polygon points="800,20 890,20 935,100 890,180 800,180 755,100"  style="stroke:#123987;stroke-width:4;fill:#aef492; filter:url(#Gaussian_Blur_2)"/>

在<defs>标签内部嵌套<filter>标签,而后在<filter>当中定义滤镜,<filter>的id属性值惟一,和须要采用过滤效果的svg元素的filter属性值相呼应.滤镜效果由<feGaussianBlur>定义,stdDeviation是模糊程度,in="SourceGraphic"代表在整个图像上面建立效果.

SVG渐变

能够在一个元素上面应用多个颜色的过渡,相似于css3,svg渐变有线性渐变<linearGradient>和径向渐变<radialGradient>.

<linearGradient>

和<filter>同样,<linearGradient>嵌套在<defs>内部,definitions缩写成defs,能够嵌套<filter>, <linearGrandient>, <radialGradient>等特殊元素,进行定义.

<defs>
  <filter id="Gaussian_Blur_1">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2">
  </filter>
  <filter id="Gaussian_Blur_2">
    <feGaussianBlur in="SourceGraphic" stdDeviation="20">
  </filter> 
</defs>
<ellipse cx="300" cy="100" rx="100" ry="50" filter="url(#Gaussian_Blur_1)" />
<polygon points="800,20 890,20 935,100 890,180 800,180 755,100"  style="stroke:#123987;stroke-width:4;fill:#aef492; filter:url(#Gaussian_Blur_2)" />

y1 = y2, x1 != x2, 那么是水平渐变;
x1 = x2, y1 != y2, 那么是垂直渐变;
x1 != x2, y1 != y2,那么是角形渐变.

<radialGradient>

与<linearGradient>相似,不过<radialGradient>在参数上的区别是cx, cy, r定义外圈;fx, fy定义内圈.

SVG元素列表

<a>:超连接;<altGlyph>:容许对象性文字进行控制,来呈现特殊的字符数据,<altGlyphDef>定义一系列象性符号的替换,<altGlyphItem>定义一系列候选象形符号的替换;<animate>随时间动态改变属性,<animateColor>规定随时间进行的颜色转换,<animateMotion>使元素沿着动做路径移动,<animateTransform>对元素进行动态地属性转换;<circle>定义圆;<color-profile>颜色配置描述, <cursor>定义独立于平台的光标, <definition-src>定义单独的字体定义源, <defs>被引用元素的容器, <desc>对SVG元素的纯文本描述-并不做为图形的一部分来显示,做用相似于html中的title属性, <ellipse>定义椭圆, <feBlend>, <feColorMatrix>等等...
以上是w3 school的svg elements列表,下面是mdn对svg元素进行的科学分类:

动画类

<animate>, <animateColor>, <animateMotion>, <animateTransform>, <mpath>, <set>

基本形状类

<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>

容器类

<a>, <defs>, <glyph>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <swtich>, <symbol>

描述类

<desc>, <metadata>, <title>

过滤器相关类

<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feFlood>, <feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>, <feGussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorpholopy>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

字体类

<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

渐近类

<linearGradient>, <radialGradient>, <stop>

图形类

它和基本形状类有差异,字面含义上能够看出.包含<circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

光源类

<feDistanLight>, <fePointLight>, <feSpotLight>

形状类

相比于基本形状类,只多出了<path>元素

结构类

<defs>, <g>, <svg>, <symbol>, <use>

文本内容类

<altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

文本内容后代类

<altGlyph>, <textPath>, <tref>, <tspan>

其余未分类

<clip-path>, <color-profile>, <cursor>, <filter>, <foreignObject>, <script>, <style>, <view>
以<aniamteMotion>为例,
这是mdn svg elements上面的一个例子:

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
     
    <!-- Draw the outline of the motion path in grey, along
         with 2 small circles at key points -->
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
          stroke="lightgrey" stroke-width="2" 
          fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"  />
    <circle cx="110" cy="10" r="3" fill="lightgrey"  />

    <!-- Here is a red circle which will be moved along the motion path. -->
    <circle cx="" cy="" r="5" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
           <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

最后,给你们推荐一个东西:IcoMoon,svg用于字体图标,大小可伸缩,清晰度高.

Canvas简介

canvas是html5中的一项新技术,它使用js在网页中绘制图像,画布是一个矩形区域,经过canvas技术能够控制其中的每个像素,有许多方法用来绘制路径,矩形,圆形,字符还能够添加图像.使用步骤以下:

  • 向页面中添加canvas元素,规定元素的id,宽度,高度:

<canvas id="my-canvas" width="200" height="100"></canvas>

  • 经过js来控制绘制流程,由于canvas元素自己没有绘制能力.

<script>
    var c = document.getElementById("my-canvas");
    //js经过id来查找canvas元素
    var cxt = c.getContext("2d");
    //而后建立context对象,getContext("2d")对象是内建的html5对象,拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法.
    cxt.fillStyle="#ff0000";
    cxt.fiiRect(0, 0, 150, 75);
    //fillStyle方法规定填充颜色,fillRect方法规定了形状,位置,尺寸.
</script>

事实上,w3 school代表canvas还有许许多多方法,涉及颜色,演示,阴影;线条样式;矩形,路径,转换,文本,图像绘制,像素操做,合成,其余等等.

SVG, Canvas之间的比较

原本还想和WebGL之间作比较,如今想一想WebGL和后二者彻底不同,这是wiki上面的WebGL,访问不了的话可使用虫部落,SVG和Canvas主要是作2D图形,而WebGL是用js来作3D应用,e.g.游戏等等(threejs),彻底不同,因此做比较没多大意义.

这里我比较二者主要参考的资料来源于:msdn上面.aspx),w3 school html5 canvas vs svg,做出一些概括:
canvas和svg都是在浏览器当中建立图形,可是本质上彻底不同.

SVG

  • 一种用XML描述2D图形的语言

  • SVG基于XML,意味着SVG DOM中的每一个元素都是可用的,能够为每一个元素添加js事件处理器

  • 每一个被绘制的图形都是对象,若是对象的属性发生变化,那么浏览器可以自动重现图形.

  1. 不依赖分辨率

  2. 支持事件处理器

  3. 最适合带有大型渲染区域的应用程序

  4. 复杂度高减慢渲染速度(过分使用DOM)

  5. 不适合游戏应用

Canvas

  1. 依赖分辨率

  2. 不支持事件处理器

  3. 文本渲染差

  4. 可以右键以.jpg, .png保存结果图像(SVG图形右键保存是svg格式,强制另换格式保存改变不了图形缩放性)

  5. 最适合图像密集型的游戏,其中许多对象会被重绘.

  6. 经过js来绘制2D图形

  7. 逐个逐个像素进行渲染

SVG是保留模式,Canvas是即时模式.矢量图形概念早已出现,复杂性范围从一个文档或插图中的标注,到图表,关系图,地图等插图,再到工程文档.这些场景都是静态的可是矢量图形也支持交互性,
SVG为Web,桌面和设备上的应用程序提供交互和静态格式.这里的探究以Web为主,e.g.在网页中使用矢量图形为背景图像以支持高DPI和缩放功能;做为地图属性用来执行查找线路操做;显示实时图表图形的交互式股票网站;航班,音乐厅,电影院座位图;游戏等等.
SVG是一个保留在内存模型中的保留模式图形模型,而内存中模型可经过从新呈现的代码结果进行操做.SVG能够做为独立文件提供,也能够与HTML集成.相似于HTML,SVG也使用元素,属性,样式来构建文档,相似于<div>,SVG是HTMLDocument的一部分,同时SVGDocument为<svg>元素提供与矢量图形的深刻丰富交互的附加接口.<svg>元素适合于html框模型,可是由于丰富的矢量图形不局限于简单的框,因此内部模型从框中分离出来的话要求属性获得扩展.以<rect>元素为例,它保留在HTML文档对象模型DOM当中,相似普通的HTML元素,能够经过不一样的方式设置样式:

<!-- No fill(default color is #000) -->
<rect id="myRect0" width="100%" height="100%" />

<!-- using the class "greenrect" -->
<rect id="myRect0" width="100%" height="100%" class="greenrect" />

<!-- using the style="fill:pink" 内联样式-->
<rect id="myRect0" width="100%" height="100%" style="fill:pink" />

<!-- using the attribute fill="red" 使用fill, fill-opacity等内置的有关svg的css属性-->
<rect id="myRect0" width="100%" height="100%" fill="red" />

也能够经过SVG DOM方法设置样式:

document.getElementById("myDiv").style.height = "200";
//alternatively
document.getElementById("myDiv").style = "height:200;";

document.getElementById("myDiv").height.baseVal.value= "200";
//alternatively
document.getElementById("myDiv").setAttribute("height", "200px");

Canvas是"触发即忘"模型,将图形直接呈如今屏幕上可是随后对所完成的操做不保留任何上下文,与保留模式相反,不保存呈现的图形;每次须要新框架时须要描述整个场景,开发人员须要从新调用全部的必须的绘图命令,而不考虑实际更改(SVG拥有场景图).这个新框架很差理解的话能够借助于SVG <path>元素d命令的"简洁性"与Canvas ctx对象的beginPath(),lineTo(x1, y1) moveTo(x2, y2)...closePath()等命令"零碎性"之间的区别.和SVG同样,Canvas也有很复杂的几何基元,区别在于这些基元采用函数形式.Canvas的路径API并不局限于moveTo和arc,和SVG同样都包含贝赛尔曲线.Canvas能够捕获鼠标在图像上的位置,因为是"即时模式",因此必须经过单个元素的mouseX,mouseY<canvas>坐标来捕获.Canvas没有任何样式,缩放的话也会致使失真.
下面总结一下,做出一些关键方面的比较

  • Canvas SVG

  • 基于像素,动态,.png 基于形状

  • 单个HTML元素 多个图形元素,这些元素成为DOM的一部分

  • 经过js操做图形 经过css,js

  • 事件模型/用户交互颗粒化(x, y) 事件模型/用户交互抽象化(rect, path)

  • 图面较小,对象数量较多(>10k)性能更好 与前者相反

使用场景的比较

屏幕较大的话,Canvas性能欠佳,由于须要绘制更多的像素;对象数量较多的话,SVG性能欠佳,由于DOM加载较慢.另外还有js引擎速度,浏览器或者其余环境是否彻底使用硬件加速等等也会左右着二者的选择.在浏览器,能够说Canvas这项H5新技术更容易为广大的Web开发人员所接受,很重要的一方面是由于它简单且高效.可是除去浏览器,SVG等等可用于CAD建筑,工程等要求高保真度的复杂矢量文档方面,它占有很明显的优点.

实时数据传输

实时两个字已经道出Canvas的优点意味.用户交互是Canvas的短板,非交互的实时数据可视化倒是它的强项,由于屏幕上的对象数量至关高.
Canvas vs SVG0.png

剧终

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程