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


  • 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となり表示されない

参考