web-dev-qa-db-ja.com

「xmlns」や「version」などのSVGパラメーターは必要ですか？

インターネットで見たsvgの例の約半分では、コードは単純な<svg></svg>タグでラップされています。

残りの半分では、svgタグには次のような多くの複雑な属性があります。

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

私の質問は、単純なsvgタグを使用しても大丈夫ですか？私は複雑なものをいじってみましたが、それらを含めなくてもすべてがうまくいきます。

xmlsvgtags
172
Lars

すべてのユーザーエージェント（ブラウザ）はバージョン属性を無視するため、いつでも削除できます。

SVGをHTMLページにインラインで埋め込み、そのページをtext/htmlとして提供する場合、- xmlns属性は不要です 。 HTMLドキュメントにSVGをインラインに埋め込むことは、HTML5の一部として登場したごく最近の革新です。

ただし、ページをimage/svg + xmlまたはapplication/xhtml + xmlまたはユーザーエージェントがXMLパーサーを使用するようにする他のMIMEタイプとして提供する場合は、 xmlns属性 arerequired これは最近まで唯一の方法でしたので、このように多くのコンテンツが提供されています。

179
Robert Longson

xmlns="http://www.w3.org/2000/svg"属性は次のとおりです。

  • 必須image/svg + xmlファイルの場合。 1
  • オプションのforinlined<svg>。 2

xmlns:xlink="http://www.w3.org/1999/xlink"属性は次のとおりです。

  • 必須のimage/svg + xmlファイルにxlink：属性。 1
  • オプションのforinlined<svg> withxlink：属性。 2

version="1.1"属性は次のとおりです。

  • 推奨されるimage/svg + xmlファイル標準に準拠する。 3
  • すべてのユーザーエージェントによって明らかに無視されます。 4
  • SVG 2で削除 5

1 国際化リソース識別子（RFC3987）
2 HTML5以降
3 Extensible Markup Language（XML）1.
4 おそらく、さらなるメジャーバージョンがリリースされるまで。
5 SVG 2、W3C勧告候補、2018年8月7日

196
ncomputers

両方の回答に追加したいのですが、ポイントはありません。新しい回答を追加しています。 Chrome（バージョン63.0.3239.132（公式ビルド）（64ビットWindows））の最近のテストで、次のことがわかりました。

  1. テキストエディターまたはjavascriptとElm.innerHTMLを介してHTMLファイルに直接入力されるインラインSVGの場合、他の2つの回答で述べられているように、xmlns属性は不要です。
  2. ただし、javascriptおよびAJAXを介してロードされるインラインSVGには、2つのオプションがあります。
    • xhr.responseTextおよびElm.innerHTMLを使用します。これにはxmlnsは必要ありません。
    • xhr.responseXML.documentElementおよびElm.appendChild()またはElm.insertBefore()を使用します。インラインSVGを作成するこの方法は、xmlns="http://www.w3.org/2000/svg"のように、基本的なSVG名前空間を宣言せずに、半ば焼きの結果を生成します。 <svg>はHTMLにロードされますが、getElementById()などのドキュメントレベルの関数は<svg>要素では認識されません。これは、HTMLの外部でXMLHttpRequest XMLパーサーを使用しているためだと思います。
5
jamess