HTML / CSS

HTML5でSVGを扱うときにxmlnsっているの?

html css

SVGで描画するサンプルコードをネットで探していると以下のようにxmlns属性や、xlinkがついているものがあります。

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

これはいったいなんなのだろう、必要なものなのか?と思い調べてみました。

xmlns、xmlns:xlinkは必要なのか

xmlnsってなに

そもそもxmlnsってなんだろうと思ったので調べてみました。

svgではxmlns属性を付与することができ、xmlnsは「XMLネームスペース (XML Name Space)」を意味しています。よくみれば英語の頭文字が使われてxmlnsとなっていることがわかります。
スペースというだけあって苗字のようなものとよく説明されていてリンクは基本固定だそうです。

xmlns:xlinkはめったに見かけませんがxmlns:xlinkは2つめのネームスペースといった感じだそうです。

HTML5では必要ない(インライン)

xmlnsはXHTMLで描画する際の手法でHTML5で描画する場合は記述する必要はないのだそうです。XMLを使う環境でなければ基本的にはHTML5では必要なしとのことなので書かなくて良さそうですね。。

参考サイト:https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed

追記

コメントをいただき、間違いを教えていただきました。

HTMLページ内のインラインでSVGタグを埋め込む際にはHTMLファイルはMINE形式がtext/htmlであるためxmlns, xmlns:xlinkは不要(あってもいい)ですが、外部ファイルとしてSVGファイルを読み込む場合はファイルのMINE形式がimage/svg+xmlとなりXMLデータとなるためxmlns, xmlns:xlinkが必須となります。

MINE形式参考:拡張子とMIMEタイプ – とほほのWWW入門

POSTED COMMENT

  1. AA より:

    HTML5に埋め込む「svgタグ」ではなく、
    外部の「SVGファイル」を使用する場合は、
    (中身がXMLなので)
    xmlns, xmlns:xlinkが必要だと思います。

    • Nakamoto より:

      AAさん
      ありがとうございます。
      おっしゃる通りですね。
      調べたら、外部の場合はxmlns, xmlns:xlink属性が必須とありました。
      そういう観点で調べていなかったので勉強になりました。

AA へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です