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. 以上方式雖然不能改變圖形的實際內容但是，簡單的做一下位置的調整還是可以的。