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》,特意将此文转载致此。

在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG？以及SVG图形与其它格式图像相比，优势在哪。另外介绍怎么将SVG图像应用到HTML页面，让浏览器能显示。从文中了解到，SVG图形其实就是一段XML代码，在HTML页面引用是通过引用.svg文件格式，或者直接在.html文件中放置<svg>元素。而两者最大的区别就是，独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。

随着技术向前的推进，SVG相关的讨论也越渐频繁。为了紧跟时代的步伐，我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。

这篇文章是Daniel Stern的客座文章。Daniel和我分享了一个他做的工具叫做range.css，它用来给<input type="range">创建样式。这是一件比较复杂的事情，因为它需要组合一系列的标准选择和属性以及非标准的前缀选择器和属性。我邀请Daniel对所有这些内容做一个解释。随着IE10的发布，我们给range input创建样式的能力已经得到了引人注目提高。用纯CSS实现跨浏览器兼容的range input(sliders)已经成为可能。在这篇教程中，我们用基本的range input作为例子。