本文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。没有复杂的计算和不可分析的图表，只是按照划分直截了当地将内容呈献给读者，便于读者理解或是直接运用到设计过程中。如果你发现有错误的地方，需要了解更多细节或者有任何问题或建议，请联系sgabriel.contact@gmail.com Twitter, G+ 或者 Facebook

创造夺目UI的7条规则是一个系列文章，主要包括两个部分。总共包括七个设计规则：光来自天空、黑白优先、双倍空白、学习图片上放置文本的方法、使文本突出——或不突出、 只使用好看的字体和像艺术家一样偷师。这两篇文章在国外有关于UI设计引起很大的轰动性。特意将译文发出来与大家一起分享。最后非常感谢@李诺同学的分享。希望这两篇文章能给大家带来些许帮助。

在SVG绘制的任何一个时刻，你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中，我们将看一下我们如何这样做，以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活（或流动）。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是， SVG viewport, viewBox和 preserveAspectRatio属性。在第二篇文章里，你可以了解到任何你需要了解的关于SVG系统变换的内容。

SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是， SVG viewport, viewBox 和 preserveAspectRatio 属性。

SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而，一旦你理解了SVG坐标系和变换，操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性：viewport， viewBox， 和 preserveAspectRatio。接下来通过三篇文章分别向大家阐述这方面相关的知识。

首先，这篇文档不是给所有人看的。给谁呢？急需自己设计UI的开发者、想让自己的作品看上去比Pentagon PowerPoint、漂亮的UX设计师。或者想靠自己的UI挣钱的UX设计师。如果你曾就读过艺术学校，或者已自称为一名UI设计师，你可能会感到这篇文档a.)枯燥，b.)错误，c.)气人。没关系。你的批评都是正确的。关掉Tab页，离开即可。让我来告诉你你将从这篇文章中学到什么。

SVG其实相当于一块画板，然后在这块画板上绘图形，而每个画板都会有一个坐标系统。比如说画板的原始起点，绘制图形的起始点坐标，终点坐标等。这一切的一切都离开不坐标，而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲，最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统（当前用户坐标系统）。例如，一个<svg>中使用<circle>绘制的一个圆，他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。

CSS Sprites对于前端人员都比较熟悉，为了让Web网站减放Http的请求数，很多同学都常使用Sprites（国内称之为雪碧图或精灵）。但随着技术的更新，位图的Sprites已无法满足我们实际的需求了。这篇译文就用另外的一种方式，向大家阐述了Sprites——如何实现跨浏览器的SVG Sprites。

对表单感兴趣的人并不多，但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松，甚至可能更富有趣味性。

viewport、viewBox和preserveAspectRatio是SVG中基础而且必须了解的几个部分，如果这几个部分没有理解清楚，对大家今后学习SVG相关知识以及使用会带来很大障碍。这几日看到张大师(@张鑫旭)写了一篇与此相关的文章《理解SVG的viewport,viewBox,preserveAspectRatio》,特意将此文转载致此。