htmlから別ファイルsvgをuseで表示できない

Question

htmlにsvg要素とuse要素を置いて、use要素のxlink:hrefで別ファイルのsvgを表示させたいのですが、use要素の中身が空になってしまいます。

色々なサイトを参考にしてuse要素を使うと別ファイルのsvgからidを目印にパスなどを表示させられることが分かったのですが、自分が書くとuse要素が0 * 0になってしまって表示されません。
ローカル環境だと表示されないことがあるそうなので、ローカルサーバーをたちあげて試してみましたが、だめでした。
無料ホームページスペースにアップロードして試してみてもだめでした。
同じsvgをimg要素で読み込むとちゃんと表示されます。

html

<svg>
	<use xlink:href="usesvg.svg#main" width="100px" height="100px"></use>
</svg>

usesvg.svg

<svg width="100px" height="100px" viewBox="0 0 100 100"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="main">
		<circle cx="50" cy="50" r="40"/>
</svg>

GoogleChromeとIEとFirefoxで表示できませんでした。

どこがどう間違っているのか全く分かりません。
情報が不足していたら補足します。
分かる方いらっしゃいましたらよろしくお願いします。

Comments

[m.ts10806]

外部サイトというのは自身が管理運営しているものではないものですか？

[h-y]

返信ありがとうございます。
外部svgのことでしたら、自分が管理しているスペースにhtmlと一緒にアップロードしたものです。
同じ階層に置いています。
外部svgと書いたのは、htmlにインラインで書くのではなく、別ファイルを参照するという意味のつもりでした。
書き直した方がいいでしょうか……？

[m.ts10806]

質問は編集できますので適宜ご調整ください

[h-y]

編集しました。
ありがとうございます。

Answer 1

解決とは言えないですが、特にファイルを書き換えていないのに、無料ホームページスペースにアップロードしたファイルで表示が確認できました。
心当たりはブラウザのキャッシュを削除したことですが、img要素ではずっと表示されていたし、このせいではない気もします。
ただ、htmlやsvgの書き方が間違っていたわけではないようですので、この質問は閉じさせていただきます。
アドバイス下さった方ありがとうございました。