サイト上にあるSVG画像を保存し、chrome上で表示したい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Airbnbの模写コーディングをしています
サイトはこちらです
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1602494139_Yzg1ZjZjODgyZTE4の
Airbnbロゴの画像を保存し、VSCODEで入力しましたが表示されません

SVGを理解していないため初歩的な質問になっていると思いますが、
よろしくお願いいたします。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
画像
<svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height: 34px; width: 34px; fill: rgb(0, 132, 137);"><path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path></svg>

html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

<body>
    <header>
        <nav>
            <img src="img.svg" width="34" height="34">
            <ul>
                <li>概要</li>
                <li>準備</li>
                <li>安全</li>
                <li>マネープラン</li>
            </ul>
            <button>はじめる</button>
        </nav>
    </header>

試したこと

調べて
テキストエディタでSVGファイルを開き、xlink：href = "data：img/png;　(画像赤罫線で囲った箇所)　をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。とあったので試そうと思ったのですが画像内にxlink：href = "data：img/png;が見つけることができずに対応できませんでした。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

HTMLに埋め込まれたSVGは単体のSVGファイルと異なり、xmlns(XMLネームスペース)の指定が省略できます。当該サイトでも省略されています。
HTMLに埋め込まれたSVG部分だけをコピーしてきて単体のファイルとして使いたければ、xmlnsの指定が必須です。
また、XML宣言も本来存在しますが条件により省略可能です。
複雑なので「svg xmlns」などで検索するとよいと思いますが、とりあえずこちらやこちらあたりにまとまっていました。

投稿2020/10/14 16:35

ikadzuchi

総合スコア3047

konno0928

2020/10/14 23:38

なるほど。 xmlnsの指定が必要だったのですのね。サイトで学ばせていただきます。回答ありがとうございました。

行動規範の内容に同意します

ベストアンサー

模写の精度が分かりませんが、私ならスクリーンショットとってロゴ部分だけペイントツールなどで画像抽出します。
SVGでなければならない理由があれば別ですが、模写時点ではそこまで大事な要素ではないように思います。
模写の目的や達成のための条件、制約によりけりではあります。ただ、私が課題の出題者であればそこよりもコードのほうを優先、重要視するので。

投稿2020/10/13 00:02