svg修改画布大小及移动视图

`svg介绍`

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

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

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）

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

SVG 是可伸缩的

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

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

SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

简单编辑svg图片

代码示例：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="74px" height="54px" viewBox="0 0 104 64" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>logo-163yun-2color</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo-163yun-2color" transform="translate(6.000000, 2.000000)scale(2.5)">
            <g id="网易云logo.svg">
                <path d="M26.746087,23.3104696... Z" id="形状_50" fill="#379EF7"></path>
            </g>
        </g>
    </g>
</svg>

操作步骤：
1. 如果你的svg图片太大，那么可以使用以上代码中的width和height属性调整。
2. 如果你的svg图片中间的实际图形和边框空白地方太大，那么可以使用以上代码中的transform属性的scale(2.5)进行图形的整体大小缩放调整。
3. 如果你的svg实际图形并不在整个图片的中间位置则可以使用以上代码中的transform属性的translate(6.000000, 2.000000)属性进行调整。
4. 以上方式虽然不能改变图形的实际内容但是，简单的做一下位置的调整还是可以的。