'xmlns'や 'version'などのSVGパラメータは必要ですか?


203

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

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

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

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

回答:


206

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

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

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


5
「すべてのUAはバージョン属性を無視するため、いつでも削除できます。」-しかし、仕様はその問題について何を言わなければならないのですか?「ブラウザはそれを回避することができます」は、明らかに不正確である(または不正確であった)多くの慣行に当てはまります(またはいつかはそうでした)。
Mark Amery 14

IE11では、配置し<!DOCTYPE svg xmlns="www.w3.org/2000/svg">ても機能しますが、xmlnsを削除したり変更したりする<!DOCTYPE svg xmlns="www.example.com">と機能しません。何故ですか?
ドナルドダック

8
この回答の出典を引用してもらえますか?
2540625

69
私はFirefoxでSVGコードのかなりの部分を書きました、そして私はそう言います。それは十分ではありませんか?そうでなければ、とにかくいくつかのリンクを追加しました。
ロバートロングソン、2015年

1
@Marcelは、それらのdata-urisがimage / svg + xmlである場合(通常そうです)ではなく、回答の最後の部分が成立します。
ロバートロングソン

228

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

  • 必要なため、画像/ SVG +のxmlファイル。1
  • オプションのためにインライン化 <svg>2

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

  • 必要なため、画像/ SVG +のxmlを持つファイルのxlink:属性。1
  • xlink:属性でインライン化 <svg>する場合はオプション2

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

  • image / svg + xmlファイル標準に準拠することをお勧めします。
  • どうやらすべてのユーザーエージェントによって無視されます。4
  • SVG 2. 5で削除されました。

1 国際化リソース識別子(RFC3987)
2 HTML5以降
3 Extensible Markup Language(XML)1.0
4おそらく、今後のメジャーバージョンのリリースまで。
5 SVG 2、W3C候補の推奨、2018年8月7日


2
httpにする必要がありますか、それともhttpsにすることもできますか?
JohannesB

2
@JohannesB両方のプロトコルに互換性があります:D
ncomputers

1
@JohannesBはい、ここにインラインのサンプルHTTP HTTPSと、xlink属性を持つインラインの svgを含むimage / svg + xmlファイルの例HTTP HTTPS
ncomputers

1
ありがとう、ニッククレイバーも間違いを犯すと思います;)
JohannesB

2
versionxml宣言<?xml version...version属性()を<svg>要素の属性と混同しないでください。前者はXMLマークアップ言語のバージョンに関するもので、後者はSVGのバージョンを指定します。この回答の作成者は、³のSVG仕様ではなく、XMLを参照することでその誤りを犯しました。私はそれを修正しようとしましたが、一部の馬鹿は編集を拒否しました。
Bachsau

7

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

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

0

MDN WebDocが言うSVGバージョン属性について

SVG 2以降非推奨
この機能は推奨されなくなりました。一部のブラウザーはまだそれをサポートしている可能性がありますが、関連するWeb標準から既に削除されているか、削除中か、互換性を保つ目的でのみ保持されている可能性があります。使用を避け、可能であれば既存のコードを更新してください。このページの下部にある互換性の表を参照して、判断を下してください。この機能はいつでも機能しなくなる可能性があることに注意してください。

version属性は、SVGドキュメントが準拠する仕様を示すために使用されます。ルート要素でのみ許可されます。これは単なる通知であり、レンダリングや処理には影響しません。

PS:SVG 2はまだ標準になるにはほど遠いです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.