2

More than 5 years have passed since last update.

xlink:href属性を使用したSVGのDataURI変換

Posted at 2017-09-13

HTML5内でSVGを使う場合は名前空間宣言(xmlns属性)を省略できる
DataURIでSVGを生成する場合は名前空間宣言が必要となる

<svg xmlns="http://www.w3.org/2000/svg">

</svg>

svgの中でxlink:href属性を使用していた場合、xlinkの名前空間宣言も必要

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <textPath xlink:href="#MyPath">

</svg>

xmlns:xlink属性を忘れた場合、Chrome/Edgeは自動で補完したDataURI形式のSVGを作成してくれる
Firefoxは補完しないので、不正なSVGとなり表示されない

参考

2

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

2