svg矢量图也就是无论放大多少都能保持清晰，格式就是*.svg，打开方式有以下4种。
1，可以直接用浏览器打开svg格式的查看。
2，也可以在<img>标签中指定src路径查看如图：
3，可以直接用svg标签在html绘制。
4，css图片背景
以上是4种显示svg方式。
SVG比canvas有一个优势就是直接提供了常用的标签，每个标签也拥有自己的属性例如：
<rect>矩形
x,y是用来定义图片的位置，
rx和ry是定义圆角，但是如果只定义了rx的没定义ry，那么ry默认自动设置的值就会跟rx一直，反之。
<circle>圆
cx，cy定义圆的位置
<ellipse>椭圆
椭圆只是把半径r拆分长了rx，ry
<line>直线
<polygon>多边形
绘制多边形的时候，它们会自动将线闭合起来不需要你在画最后那一条线，例如：
结束时，自动闭合
基本属性：
JS 数组 对象 封装
Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下， 并希望立即开始工作， 我需要什么？“…它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。 （感谢 @小邓子daj 的翻译建议）
Underscore提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等.
Underscore.js是弥补jquery对数组对象操作的不足，它主要是对数据进行封装操作，只需要输入简短的语句就能对数组、对象进行筛选、相互转化、排列等等操作。
1.简介
Seajs，一个Web模块加载框架，追求简单、自然的代码书写和组织方式，：Sea.js 遵循 CMD 规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专注编码。
2.优缺点
优点：
1).提高可维护性。
2).模块化编程。
3).动态加载，前端性能优化
缺点：
1).学习文档偏少且混乱，会更改团队使用JS的编写习惯，必须使用模块化编程。
2).不太适合团队目前的情况，多JS文件但少改动，动态加载优势和模块化优势不明显。
3). 需要配套使用SPM工具，JS的打包和管理工具。
2.什么是CMD 和AMD ？
异步模块定义（AMD）是Asynchronous Module Definition的缩写，是 RequireJS 在推广过程中对模块定义的规范化产出。
通用模块定义（CMD）是Common Module Definition的缩写，是SeaJS 在推广过程中对模块定义的规范化产出。
RequireJS 和 SeaJS 都是模块化框架的代表，AMD和CMD，是他们各自定义模块化的方式，大同小异，主要是代码风格和API不同。
3.如何使用？
<script src="../js/examples-master/sea-modules/seajs/seajs/2.1.1/sea.js"></script>
<script>
//配置js路径
seajs.config({
alias:{
"jquery":"../examples-master/sea-modules/jquery/jquery/1.10.1/jquery.js"
}
});
//加载模块
seajs.use('../js/seajs/init',function($){
$("#test_div").click(function(){alert(1);});
});
</script>
//init.js
define(function(require,exports,module){
var $ = require('jquery');
return $;
});
使用JavaScript库将会使开发变的更简单，大部分JavaScript库提供的功能都是极好的，当我们在为一个项目选定开发技术的时候，选择一个明星框架当然很不错，但是有些库文件太大了。当你想要为一个特定的任务寻找解决方案的时候，你可以选择一个更有针对性，更轻量级的框架。
在这篇文章中，我们总结了近期30个很棒的JavaScript库，下面这些JavaScript库都是非常实用的，尤其是对于有特定需求的项目。
Blast.js通过字母、单词或是句子来分隔一段文本，这样你就可以把动画和样式注入到文本中。
Intense Images是一个可以让用户全屏查看原像素照片的javascript库，高质量的照片大小一般不只有电脑屏幕这么大，它提供我们滑动查看，效果非常完美。
Hammer.js可以为你的网站添加触摸手势，是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。
Epoch是一个生成实时图表的javascript库，它专注于可视化编程的两个方面：为历史数据创建图表和实时的数据图表可视化显示。
Boba.js是一个易扩展的javascript库，它可以让添加谷歌统计变得简单，它不仅支持经典的ga.js库，而且支持新生的analytics.js，而且它有一个很酷的功能——trackLinks，trackLinks可以跟踪所有的子页面。
Lazy.js和Underscore和Lo-Dash的功能很像，但是有一个重要的区别：它是延迟执行的，它可以在大多数情景下展示出很好的性能，尤其是在解决大型数组的时候。
JSCapture是用纯JavaScript和HTML5写的屏蔽录制库。它允许你通过你的浏览器对桌面进行截图或录制，它使用getUserMedia来进行屏蔽捕捉，目前它只支持Chrome浏览器。
App.js是一个轻量级的JavaScript UI库，因为它有一个好名字，现在它已经算是一个明星库了，它可以为你的网站生成一个用户体验很好的手机应用，完全不会影响到性能。而且它是跨平台的，支持Android 2.2以上版本和IOS 4.3以上版本。
Shepherd是一个为应用创建用户指南的javascript库。它用到了另外一个开源的库——Tether。Tether可以确保用户指南不会受到浏览器布局的影响。目前Shepherd支持IE9以上和其它所有的现代浏览器。
RulersGuides.js是一个类似PhotoShop标尺的javascript库。
Seen.js渲染3D场景为SVG或者HTML Canvas。Seen.js包含对于SVG和HTML5 Canvas元素的图形功能的简单抽象。所以这个库的其它组件都是不用关心要渲染类型的。
At.js 是一个自动完成库，用来实现自动完成的提示，如表情等，就像你在 Github 或 Twitter 上看到的一样。它支持 HTML5 contentEditable 元素。你可以监听任何字符，而不仅仅是 ‘@’ 符号，可为不同的字符设置多个监听器以实现不同的行为和数据。
bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库，使用其特有的方式生成的动画效果。只需添加一个组件，选择预设，然后你就可以得到一个短网址或者导出为 CSS 代码。
Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化;二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵;三是图形，使用节点和边显示一个交互式图形或网络。
Draggabilly只有10K，如它的名字，作者对Draggabilly的介绍非常简单，Draggabilly 可帮你轻松实现网页上各种元素的拖放操作，支持 IE8+ 和多点触摸。
Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置，可定制的阴影。不依赖于第三方库，兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用，如果有需要会自动添加前缀。
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库，支持 Node.js 平台和浏览器中使用。Gremlins.js 随机模拟用户操作：单击窗口中的任意位置，在表格中输入随机数据，或者将鼠标移动到特别的元素。Gremlins.j 的目的是触发 JavaScript 错误或使应用程序失败。如果它不能让你应用程序崩溃，那么说明你的应用程序已经足够强大了，可以发布给真正的用户使用。
Contour是Forio的可视化库提供的一个核心的通用库。建立于受欢迎的D3引擎之上，它可以让你很容易的建立一个可视化的数据图形。
Sticker.js 是一个很小的 JavaScript 库，它允许您在网页中创建漂亮的贴纸效果。没有依赖关系(不需要 jQuery)，可以在大多数支持 CSS3 的主流浏览器工作。
Fattable是一个帮助创建无限滚动，及其无限行列数的Javascript类库。比较大的表(多余10000个单元格)使用DOM处理不是很方便。你的滚动会变得不均匀。同时比较大的表格增长的速度也更快。不太可能让用户去下载或者保留全部数据。Fattable可以帮助你很好的处理异步数据加载。
CutJS是一个帮助你开发高性能，动态互动2DHTML5图形的超迷类库。支持现代浏览器和移动设备，可以帮助你开发游戏和可视化的应用。CutJS提供了DOM类型的API来创建和播放基于画布的图形。
GridList是一个二维的可拖拉的响应式列表库。
fn.js是一个鼓励你使用函数编程风格的可选Javascript类库。主要帮助你基于性能和规则来支持函数化实践。为了保证你的路径正确。fn.js内部强制避免side effects，Object Mutation和Function state。支持Node.js或者浏览器，可以使用常规的script来引用或者通过AMD加载器，例如，RequireJS。即将支持Bower。fn.js基于MIT LIcensed，你可以在Github下载。
Progress.js是一个帮助开发人员使用JS和CSS3创建进度条的javascript类库。你可以自己设计进度条的模板或者自定义。你可以使用progess.js来展示加载内容的进度(images，Video等等)，可以应用到所有页面元素，比如，textbox，textarea甚至整个body。
用来帮助你实现网站提速的Javascript类库，能够帮助导航更加高效。它预加载你的用户可能会点击的一些链接。可以配置来在特定操作下加载，例如，mousedown。
帮助你在滚动过程中展示CSS动画效果。缺省你可以用它来触发animate.css动画。当然，你可以配置来触发其他你喜欢使用的动画类库。
Type Rendering Mix是个基于浏览器、应用CSS文本渲染的引擎。Type Rendering Mix通过解析用户代理字符串检测浏览器的文本rasterizer和antialiasing方法。
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。
Switchery是个简单的JavaScript组件，只要几个简单的步骤就可以帮助用户把默认的HTML复选框转换成漂亮iOS 7样式风格。用户可以很方便的自定义这种转换，所以可以很好的配合你的设计风格。
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库，压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法，当图片元素进入窗口可视区域的时候，它就会改变图像的 src 属性，从服务端加载所需的图片，这也是一个异步的过程。
文章源自：极客标签
英文原文地址：http://codegeekz.com/collection-of-best-javascript-libraries-for-2014/
图片 放大 失真 css 抗锯齿
图片放大失真就是看见边缘模糊，显得不好看，这里可以用CSS稍微调整。
.pixelated {
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}
感觉效果不是特别好，还是推荐使用SVG矢量图标不管放大多少都不会出现锯齿。