在Azure Web Apps發行時進行進行程式碼異動比較

使用版本控管(Version Control)(不論使用git、TFS、Visual Studio Online等管理系統)之後，異動的比較(Code Compare)是一個非常實用的功能，重點在於能即時與伺服器端版本控管進行程式碼比較，這絕對不是本機式比較軟體(如：http://winmerge.org/)所能比的上的。

今天無意中發現一個發行Azure Web Apps(之前稱Azure Websites)時好用的比較小技巧。可以在進行Azure的發行動作中進行比較的動作，等於是可以進行最後的確認動作。

需求：web.config的組態切換

我的需求是這樣，我的web.config針對Debug與Release有不同的組態設置，最常見的需求就是connectionString，Debug組態連接LoadDB或測試資料庫，Release組態切換至正式資料庫。原本的測試方式很笨，就是切換Debug或Release模式，然後執行網站，看看讀取對應的組態內容是否正確。

發行網頁 - 預覽

在Azure Web Apps提供發行前與發行後的差異預覽，之前都一直誤以為這只是個檔案更新清單：

今天突然好奇的去點擊了我那由Debug切換至Release的web.config組態檔，結果：

跑出了預覽變更視窗。這個技巧能用在所有文字類型的檔案上，例如：.cshtml / .js / .css。目前使用在像 Web.config 或重點更新的檔案幫了不小的忙，好幾次都是直接在預覽變更就發現問題，而省下不必要的浪費。例如上圖，從比較的結果就能知道組態檔的值已經替換成功，~~這一點反而是方案總管中的原始檔比較無法做到的~~。

解決.svg無法在Azure websites載入顯示的問題

SVG稱可縮放的向量圖形，它本身有兩種格式，一種是XML格式，簡單想，它就如同一般HTML tag一樣，在網頁的中它使用<svg></svg>標籤。

SVG的XML格式

以下是使用wiki上的範例程式碼，你只要使用<svg></svg>標籤，就能在網頁上畫面你想要的任何向量圖。

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Document</title>
  </head>
  <body>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
      width="467" height="462">
     <!-- This is the red square: -->
     <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
           stroke="black" stroke-width="2px" />
     <!-- This is the blue square: -->
     <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
           stroke="black" stroke-width="2px" fill-opacity="0.7" />
  </svg>
  </body>
  </html>