当前位置：首页 > 前端开发 > SVG > 正文

SVG入门学习指南

来源 : 作者 : admin 人气指数 :
评论 收藏
导语 　　SVG能干啥，想干啥就干啥。可以用来做贴图，做纹理，做动画，甚至做背景图片，你想要的都可以，关键是操作灵活，和别是和canvas又可以相互转化使用，简直是居家旅行必备神器，作为前端工程师，你学会了吗?不

　　SVG能干啥，想干啥就干啥。可以用来做贴图，做纹理，做动画，甚至做背景图片，你想要的都可以，关键是操作灵活，和别是和canvas又可以相互转化使用，简直是居家旅行必备神器，作为前端工程师，你学会了吗?不会，就抓紧开始吧。

　　SVG教程

　　SVG系列教程

　　大致的写法也就这样子:

  1. <?xml version="1.0"?> 
  2. <svg xmlns="http://www.w3.org/2000/svg"> 
  3.     <!-- SVG代码 --> 
  4. </svg> 

　　除了简写的SVG结构，还有一种典型的SVG结构。通常情况之下，一个SVG文件包含内部链接，在这种情况之下，必须定义xlink声明空间http://www.w3.org/1999/xlink:

  1. <?xml version="1.0"?> 
  2. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300"> 
  3.     <!-- SVG代码 --> 
  4. </svg> 

　　在这个示例中，还声明了SVG画布的大小。定义SVG画布大小是可选的，但强烈推荐，使用SVG时定义其画布大小。

　　在使用代码编写SVG时，最好加上DTD，这是非常有用的。在一些示例中，你可能会看到这样的代码：

  1. <?xml version="1.0" ?> 
  2. <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> 
  3. <svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  4.     <g> 
  5.         <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309   c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666   c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699   c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495   c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668   c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021   c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003   c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689   c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856   c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493   c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69   z"/> 
  6.         <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301   C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/> 
  7.     </g> 
  8. </svg> 

　　什么是SVG

　　SVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。这个概念对于设计师来讲一点不陌生，但对于码农来讲，总是没有设计师们理解的那么透彻。其实码农们也没必要理解的那么透彻，只需要知道他是web页中的矢量图即可。

　　其实记住几个关键词，SVG是可缩放矢量图形，1999年由万维网联盟发布。于2013年成为W3C推荐标准。

　　1.SVG是指可伸缩矢量图形

　　2.SVG用来定义用于网络的基于矢量的图形

　　3.SVG使用XML格式定义图形

　　4.SVG图像在放大或缩小(改变尺寸)的情况下，其图形质量不会受受损失

　　5.SVG是W3C的一个标准

　　SVG有哪些优势

　　SVG也是用来图形化的东东，那么他与位图相比有什么优势呢?(随着屏幕多样化的出现，特别是Retina的出现以及爱疯6和Plus，对于图形在Web中的应用更具挑战性。)

　　

web前端开发

 

　　从图中可以明显看出，位图与SVG图PK出来的结果。

　　与其他图像格式相比，使用SVG的优势在于：

　　1.SVG可被非常多的工具读取和修改(比如记事本)

　　2.SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。

　　3.SVG是可伸缩的

　　4.SVG图像可在任何的分辨率下被高质量地打印

　　5.SVG可在图像质量不下降的情况下被放大

　　6.SVG图像中的文本是可选的，同时也是可搜索的(很适合制作地图)

　　7.SVG可以与Java技术一起运行

　　8.SVG是开放的标准

　　9.SVG文件是纯粹的XML

　　如何显示SVG

　　SVG文件是纯粹的XML，或许大家更为关心的是如何在Web浏览器中让SVG显示。要在浏览器中显示(前提是浏览器支持)，可以通过几种方法来实现：

　　1.指向SVG文件地址, 将SVG直接嵌套在HTML中

　　而将SVG图像嵌入到HTML文件有多种方法：

  1. <iframe src="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="200" height="200" ></iframe> 

　　使用img元素来嵌入SVG图像

　　

  1. <img src="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg"  width="300" /> 

　　将SVG图像作为背景图像嵌入

  1. div { 
  2.     background: url('http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg') no-repeat center; 
  3.     background-size : 200px 200px; 
  4.     //可以需要通过background-size设置背景图像大小，告诉浏览器SVG图像以多大的尺寸显示。 
  5. } 

　　直接使用svg元素

　　

  1. <div> 
  2.     <svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  3.         <g> 
  4.             <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309   c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666   c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699   c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495   c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668   c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021   c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003   c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689   c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856   c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493   c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69   z"/> 
  5.             <path d="M53.943,97.604c-0.348-0.031-0.705-0.008-1.062-0.028c-0.212-0.012-0.425-0.001-0.633-0.02   c-3.854-0.352-6.887-1.923-8.909-4.354c-2.018-2.434-3.053-5.744-2.744-9.682l0.018-0.214c0.262-2.885,1.129-5.415,2.495-7.631   c1.367-2.215,3.437-3.863,5.531-5.702c7.384-6.483,14.57-10.075,21.95-13.905c4.245-2.203,8.488-4.594,12.651-7.22   c0.93-0.589,1.652-1.372,2.303-2.16c0.65-0.79,1.234-1.593,1.838-2.262c0,0-8.906,4.272-12.152,5.812   c-9.81,4.656-19.593,9.548-28.099,16.587c-3.033,2.512-5.808,5.679-7.739,9.131c-1.279,2.286-2.037,4.649-2.252,7.027   c-0.347,3.803,0.713,7.618,3.108,11.164c1.28,1.9,2.797,3.31,4.487,4.276c1.689,0.967,3.541,1.487,5.471,1.66   c1.797,0.162,3.675-0.072,5.585-0.411l7.056-1.355l-7.128-0.644C55.143,97.622,54.545,97.659,53.943,97.604z"/> 
  6.             <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301   C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/> 
  7.         </g> 
  8.     </svg> 
  9. </div> 

　　5.使用embed元素来嵌入SVG图像　

  1. <embed src="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="300" height="220" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 

　　6.使用object元素来嵌入SVG图像　

  1. <object data="http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg" width="300" height="200" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /> 

　　7.使用svg做纹理显示

  1. <div class="box"> 
  2.   <svg width="140" height="140"> 
  3.     <defs> 
  4.       <pattern id="btpea" patternUnits="userSpaceOnUse" width="20" height="20"><path d="M 0,20 l 20,-20 M -5,5 l 10,-10 
  5.     M 15,25 l 10,-10" stroke-width="2" shape-rendering="auto" stroke="#343434" stroke-linecap="square"></path> 
  6.       </pattern> 
  7.     </defs> 
  8.     <path d="M0,0L0,140L140,140L140,0Z" style="fill: url(#btpea);"></path> 
  9.   </svg> 
  10. </div> 

　　这个用SVG做纹理填充另外一个svg比较牛逼，可以深度自定义。现在好多图形图表的插件就是这么做的，而且通过canvas可以直接把绘制的图形保存成本地图片，方便一笔。

　　比如专门做图形化的JS类库：

　　1.D3.js: http://d3js.org/

　　2.Raphael.js：http://raphaeljs.com/

　　基础知识

　　参考下面几个手册吧：

　　w3school svg：http://www.w3school.com.cn/svg/

　　svg 手册：http://www.aseoe.com/websource/svg-tutorial.html

　　浏览器支持

　　SVG图像虽然很多年就出现在人们的视线中，可是当年其就是后娘生的娃娃，没人爱搭理。只不过凭借其自身的魅力，各大浏览器也开始器重。所以得到的支持度相对于当初要高很多。

svg　
　可算是一片绿地呀。有关于更详细的兼容情况可以阅读Caniuse提供的数据。

http://www.aseoe.com/ true SVG入门学习指南 http://www.aseoe.com/show-80-744-1.html report <？php echo strlen($content) / 2; ?> 　　SVG能干啥，想干啥就干啥。可以用来做贴图，做纹理，做动画，甚至做背景图片，你想要的都可以，关键是操作灵活，和别是和canvas又可以相互转化使用，简直是居家旅行必备神器，作为前端工程师，你学会了吗?不
TAG:SVG 学习指南
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-80-744-1.html
相关文章 热门推荐 新闻资讯 经典语录
SVG压缩与字体图标新思路 SVG系列使用教程
一名前端工程师的自检清单 如何用JS实现“划词高亮标记”的在线笔记..
多个跨云服务器之间满带宽测速的实现方案 第三届世界互联网大会在乌镇拉开帷幕
身不由己有人怜，己不惜身无人悯。 2020年最重要的10项工作技能
Web前端专题 >> Web前端社区 >>

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)