目录
- 1简介
- 2优势
- 3文件结构
- 4SVG 绘图技术
- 5SVG坐标系
- 6坐标变换
- ▪平移变换
- ▪旋转变换
- ▪伸缩变换
- ▪歪斜变换
- ▪矩阵变换
>简介
SVG是一种开放标准的
矢量图形语言，可设计激动人心的、高分辨率的Web图形页面，因为软件提供了制作复杂元素的工具，如渐变、嵌入字体、透明效果、动画和
滤镜效果并且可使用平常的字体命令插人到
HTML编码中。2000年8月2日，W3C最终发布了SVG候选推荐标准，并希望开发者尽早开始实施SVG。2000年年底SVG推荐标准制定完毕。
SVG是一种新型的矢量图形标准，同时它也是一种矢量图形描述的一种标准的语言，这种语言具有非常强的开放性，所以其在应用的过程中主要的对象是网络。SVG在应用的过程中可以适应三种三种形式的图像对象，各种图像对象都可以在实际的工作中对对象进行全面的组合和处理，同时还能按照实际的需要更改其自身的形式，将其定义成预处理的对象。
>优势
SVG在应用的过程中也存在着十分明显的优势。首先它是基于一个普遍应用的标准，其次是这种技术所形成的图像质量非常好。再次是其所形成的图像并不是很大，所以对图像进行保存和显示都十分的便捷，在这一过程中所选取的文件格式也具有非常强的灵活性，使用起来也非常的便捷。最后一点就是其在运行的过程中可以起到很好的互动作用，同时还能够形成良好的动画效果。SVG的基础是纯文字格式的XML，这样一来也就直接的传承了
XML自身的特点，同时也使得不同系统之间的信息交流变得更加的容易，信息的储存和读取也变得更加的便捷，因此其在实际的工作中也具有非常强的可扩展性，此外它还可以对一些相对较为复杂的图像进行详细的描述，此外还可以将XML当做是数据运行的一个重要载体，这项技术在运行的过程中具备众多的优点和优势，也逐渐从青涩走向了成熟。
>文件结构
与HTML相类似，基于XML的SVG，语法和格式也是结构化的。所谓结构化，也就是文件中的对象通过特定的无素标签定义，任何无素都可以作为对象进行管理，文件是框架式的。掌握基本的文件框架，就可以阅读、编辑和创作自己的文件。
SVG使用一组组的元素标签，创建和组织文件以及文件中的对象。每一个SVG文件都包含最外层的<SVg></SVg>标签。该标签用于声明SVG文件的开始和结束。这等同于HTML文件中的HTML文件声明标签<Html></html>。
SVG主体中的语法和格式定义遵循XML标准，通过各类元素标签和标签对应的属性来描述SVG对象。
SVG对象主要包括图形，路径和文本。
可以将SVG文件嵌入到XML网页或HTML网页执行。
SVG文件主要包括三个部分：
（1）标准的SVG元素信息。它通常就是指图形本身的绘制信息，它可以有效的借助SVG浏览器对图形进行全面的浏览，这部分的信息对第三方系统建设和发展而言也具有非常强的可选择性。在SVG当中，图元对象的定义实际上就描述了一个新的图元类型，
图元对象自身的类型也使得图元的类型更加的真实可见，他们之间实际上存在着十分明显的定义域引用的关系。
（2）模型信息。它是指图形与描述对象之间的映射信息。
（3）私有属性信息。用于将导出的图形再次导入回源系统中，在图形的交互过程中，若目标系统是第三方系统，则可以忽略这些私有信息。
>SVG 绘图技术
SVG 绘图通过编写代码来实现，格式为XML，绘制出一个矢量图像。所以，对于一个SVG格式的图像，看到的最终形式是一个描述文本，相对比较容易读懂，易于修改使用，可以通过描述内容的关键字来建立索引，像表示图像的形状元素；同时，SVG还可以使用一些特殊处理，这些都可以通过修改代 码来实现，可以添加阴影，可以生成动态效果，这些都可以实现。
基于SVG构成一个矢量图像时，我们使用的基本是各种形状标签，这些标签元素包括根元素（svg），形状元素；还有特殊效果处理中的滤镜效果和渐变效果。
SVG提供了<circle>、<ellipse>、<line>、< polyline>、<reet>、<polygon>等6种基本的图形元素和<path>路径元素。可以对各种类型的几何图元进行描述。
在SVG中，线状实体要素一般采用<polyline>元素或<path>元素来表示。在SVG 中，使用path元素的椭圆弧曲线命令A重新定义椭圆弧，使用path元素重新定义多边形。
在SVG中使用分组元素<g>来表示基本重复单元，<g>元素可以嵌套使用来进一步表示图元及子图元，在<g>元素内可以定义任何可视化的基本几何图元元素。
形状元素：
矩形，用<rect>表示
圆形 用<circle>表示
椭圆，用<ellipse>表示
线， 用<line>表示
折线 ，用<polyline>表示
多边形，用<polygon>表示
>SVG坐标系
无论对于什么信息载体和载体设备而言，SVG文件的绘画区域总是抽象地定义为其图像对象所渲染的空间。然而不同的载体其性质是极为不同的，光是显示分辨率一项就存在着巨大的差异。SVG文件在处理这些问题上有着一定的规则。载体的尺寸虽不确定，但渲染的动作总是在此载体的一个确定的矩形中发生的，这个确定的矩形叫做“视口”(Viewport)。对于可视化的载体(如显示器、打印纸等)，视口就是绘有SVG图像的那部分表面。
视口的属性与具体设备有关，所以在SVG的解释程序渲染一个SVG图像之前，先要通过与具体设备的交互通讯来确定视口的尺寸和参数，一般需要确定以下3个:以该设备的像素数所定义的视口的高度值、宽度值，还有一个像素所代表的具体尺寸如多少毫米等。只有这样，SVG客户端的解释程序才能将一个SVG文件转换成具体设备上的图像。
SVG客户端的解释程序获得以上信息后，首先初始化视口，建立以像素为长度单位的视口坐标系，接着建立用户坐标系以使两者一致，也就是使用户坐标系中的一个单位等于视口坐标系中的一个像素。
渲染SVG文件时，如果SVG文件中的长度值与坐标值等没有规定单位，则缺省地采用用户坐标系的单位，也就是使用像素作度量标准。如果有特定的单位如mm、cm等，则满要经过换算将尺寸转换为用户坐标值。这也是SVG客户端解释程序初始化时，需要第三个参数的原因。
SVG还有一个功能，即可以定义自己的坐标系。其方法是在一段SVG文本中定义一种叫做变换(Transformation)的格式，其含义类似于解析几何中的坐标变换和映射规则。变换的格式中说明了此变换所作用的对象应该使用什么方式进行平移、缩放、旋转、歪斜等。变换提供了一种整体的方式，用它可对一个或一一组图像对象进行变换，改变其比例、位置、形状等，以达到使用自定义坐标系的目的。
>坐标变换
SVG的坐标变换方式主要分为五种，包括平移变换，旋转变换，伸缩变换， 歪斜变换，还有矩阵变换。
>平移变换
平移变换的特点是变换后，新坐标系的坐标轴方向不改变，它的表达式为：transform="translate(x，y)"，这个表达式表示新得到的坐标系的原点平移到原来坐标系的点（x，y）。
>旋转变换
旋转变换的关键是旋转角度，它的表达式为：transform="rotate(anglex，y)"，其中有两个关键值，一个是旋转角度，用angle表示，分为正负值，其正值表示顺时针旋转，负值表示逆时针旋转，单位是“度”；另一个关键值是旋转中心的坐标（x，y），当中心坐标为0时，可以省略。
>伸缩变换
伸缩变换顾名思义就是将图像进行伸展和缩小，它的表达式为transform="scale(x，y)"，其中的关键值为变化的比例因子，当比例因子>1时表示图像被拉伸变大了，当比例因子<1时表示图像被缩小了，其中比例因子x表示x轴方向的，比例因子y表示y轴方向的。当做等比例缩小放大时，即x=y，这时，y可以省略不写。
>歪斜变换
歪斜变换的关键是歪斜的角度，它有两种表达方式，一种为transform="skewX(x-angle)"是代表x轴上的变换，其中（x-angle）是沿x轴歪斜的角度，或者另一种为transform="skewY(y-angle)"，表示的是y轴的变化，所以（y-angle）是沿y轴歪斜的角度。
>矩阵变换
矩阵变换的最大特点就是他有6个参数，所以，这种变换很灵活，对于特别复杂的变换，对于矩阵变换也只需进行一次运算就行了。它的表达式为：transform="matrix(abcdef)"。
