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图片

1. 代码示例：

   <?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>
   

2. 操作步骤：

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