.svg拡張子の画像を.png拡張子の画像に変更したうえで、ブラウザ上にて1つの変数に画像がその時その時によって応じて出るようにしたいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
JavaScriptの基礎を学ぶで現在、APIを使ってwebアプリを作ることを学んでいます。
お天気のイメージ図の拡張子がサンプルでは.svgなのですが、windows10では常に.svgを表示するようにしておかないとブラウザでは見られません。
そこで、画像の拡張子を.pngに変更したうえで本のメッセージリテラルによるコードも最後の拡張子部分を,pngに変更しました。
ですが、ブラウザでは画像が表示されませんでした。
そこで.svgで見るようにできないかと検索して.svgのコードを見てみましたが「'<img src="">'を'<image src="">'にするといい」という検索結果も画像中にそういったコードがなく、また「widthとheightを追加するといい」という回答もデフォルトの画像サンプルにはすでに両方ともあることからお手上げ状態です。
.png画像でブラウザ上にてマルチに表示できるようにするには、例えばどのようなコードがありますか？

ご教授いただけると幸いです。
よろしくお願いします。
パソコンのスペックはwindowa10(64メガバイト)、普段使用しているブラウザはGoogle Chromeです。

該当のソースコード

function ajaxRequest(lat, long) {
   const url = 'https://api.openweathermap.org/data/2.5/forecast';
   const appId = '保存しておいたAPI Key';

   $.ajax({
       url: url,
       data: {
           appid: appId,
           lat: lat,
           lon: long,
           units: 'metric',
           lang: 'ja'
       }
   })
   .done(function(data) {
       // 都市名、国名
       $('#place').text(data.city.name + ', ' + data.city.country);

       // 天気予報データ
       data.list.forEach(function(forecast, index) {
           const dateTime = new Date(utcToJSTime(forecast.dt));
           const month = dateTime.getMonth() + 1;
           const date = dateTime.getDate();
           const hours = dateTime.getHours();
           const min = String(dateTime.getMinutes()).padStart(2, '0');
           const temperature = Math.round(forecast.main.temp);
           const description = forecast.weather[0].description;
           const iconPath = `images/${forecast.weather[0].icon}.svg`;

           // 現在の天気とそれ以外で出力を変える
           if(index === 0) {
               const currentWeather = `
               <div class="icon"><img src="${iconPath}"></div>
               <div class="info">
                   <p>
                       <span class="description">現在の天気：${description}</span>
                       <span class="temp">${temperature}</span>°C
                   </p>
               </div>`;
               $('#weather').html(currentWeather);
           } else {
               const tableRow = `
               <tr>
                   <td class="info">
                       ${month}/${date} ${hours}:${min}
                   </td>
                   <td class="icon"><img src="${iconPath}"></td>
                   <td><span class="description">${description}</span></td>
                   <td><span class="temp">${temperature}°C</span></td>
               </tr>`;
               $('#forecast').append(tableRow);
           }
       });
   })
   .fail(function() {
       console.log('$.ajax failed!');
   })
}

.svgのコードです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f4684d;}</style></defs><title>01d</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="outlined"><rect class="cls-1" width="200" height="200"/><circle class="cls-2" cx="100" cy="100" r="43.14"/><path d="M100,149.14A49.14,49.14,0,1,1,149.14,100,49.19,49.19,0,0,1,100,149.14Zm0-86.28A37.14,37.14,0,1,0,137.14,100,37.18,37.18,0,0,0,100,62.86Z"/><path d="M100,45a6,6,0,0,1-6-6V19.36a6,6,0,0,1,12,0V39A6,6,0,0,1,100,45Z"/><path d="M56.86,62.86a6,6,0,0,1-4.24-1.76L38.74,47.22a6,6,0,0,1,8.48-8.48L61.1,52.62a6,6,0,0,1-4.24,10.24Z"/><path d="M39,106H19.36a6,6,0,0,1,0-12H39a6,6,0,1,1,0,12Z"/><path d="M43,163a6,6,0,0,1-4.24-10.24L52.62,138.9a6,6,0,1,1,8.48,8.48L47.22,161.26A6,6,0,0,1,43,163Z"/><path d="M100,186.64a6,6,0,0,1-6-6V161a6,6,0,0,1,12,0v19.63A6,6,0,0,1,100,186.64Z"/><path d="M157,163a6,6,0,0,1-4.24-1.76L138.9,147.38a6,6,0,1,1,8.48-8.48l13.88,13.88A6,6,0,0,1,157,163Z"/><path d="M180.64,106H161a6,6,0,0,1,0-12h19.63a6,6,0,0,1,0,12Z"/><path d="M143.14,62.86a6,6,0,0,1-4.24-10.24l13.88-13.88a6,6,0,0,1,8.48,8.48L147.38,61.1A6,6,0,0,1,143.14,62.86Z"/></g></g></svg>



### 試したこと
ワードリテラルで本のように、次のようなコードをかきました。
const iconPath = `images/${forecast.weather[0].icon}.svg`;

補足情報（FW/ツールのバージョンなど）

m.ts10806

2020/10/19 22:19

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、下記は何を見られたのでしょうか。現在やりたいことと合致していないものであれば参考にしても意味がないですし、それはこちらでも確認してみないと判断はできません。URLをご提示ください。＞そこで.svgで見るようにできないかと検索して.svgのコードを見てみましたが「'<img src="">'を'<image src="">'にするといい」という検索結果も画像中にそういったコードがなく、また「widthとheightを追加するといい」という回答もデフォルトの画像サンプルにはすでに両方ともあることからお手上げ状態です。

ashiato_1963

2020/10/20 02:05

依頼ありがとうございます。「'<img src="">'を'<image src="">'にするといい」に関するリンクは下記になります。 https://qiita.com/hibikikudo/items/4d5678b041d55bb3fcca 「widthとheightを追加するといい」という解決策はこちらを参照にさせていただきました。 https://teratail.com/questions/245202

m.ts10806

2020/10/20 03:21 編集

質問は編集できます。特にコードのマークダウン対応は必要です。そちらは解決後でも対応願います。