2013-08-27 1 views
110

私はインターネット上で見るsvgの例の約半分で、コードは普通の単純な<svg></svg>タグで包まれています。残りの半分で 'xmlns'や 'version'などのSVGパラメータは必要ですか?

、SVGタグは、このような複雑な属性の多くを持っている:

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

私の質問です:それは簡単なSVGタグを使用しても大丈夫でしょうか?私は複雑なもので遊んでみましたが、私がそれらを含めなければ、私の最後にはうまくいっています。

答えて

110

すべてのUAはversion属性を無視するので、いつでも削除できます。

HTMLページにSVGをインラインで埋め込み、そのページをtext/htmlとして提供する場合は、xmlns attributes are not requiredとします。 HTML文書にSVGインラインで埋め込むことは、HTML5の一環として行われたかなり最近のイノベーションです。

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

+3

*「すべてのUAは、バージョン属性を無視するので、あなたは常にそれをドロップすることができます。」* - しかし、どのような問題について言っているスペックのでしょうか? 「ブラウザは、あなたがそれを取り除くことを可能にするでしょう」と明言されています。 –

+0

IE11では、 '<!DOCTYPE svg xmlns =" www.w3.org/2000/svg ">'それは動作しますが、xmlnsを取り除くか、 '<!DOCTYPE svg xmlns =" www .example.com ">'それは動作しません。何故ですか? –

+3

この回答はソースを引用してください。 – jtheletter

118

xmlns="http://www.w3.org/2000/svg"属性は次のとおりです。画像/ SVG + xmlのファイル用

  • 必要ため
  • オプション<svg>をインライン化。

xmlns:xlink="http://www.w3.org/1999/xlink"属性は次のとおりです。属性:XLINKと画像/ SVG + xmlのファイル用

  • 必要。属性:ための1
  • オプションXLINKで<svg>をインライン化。

version="1.1"属性は次のとおりです。画像/ SVG + xmlのファイルの規格に適合するためにはを推奨

  • すべてのユーザエージェントでは、明らかに無視されます()。

Internationalized Resource Identifiers (RFC3987)
Since HTML5
Extensible Markup Language (XML) 1.0
おそらくさらにメジャーバージョンのリリースまで。

+5

非常に明確な情報、良い答え。 – Semicolon

+0

httpにする必要がありますか、それともhttpsでもかまいませんか? – JohannesB

+0

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

1

私は両方の回答に追加したいと思いますが、私はポイントがありません。私は新しい回答を追加しています。クロム(バージョン63.0.3239.132(公式ビルド)(64ビットWindows))の最近のテストで は、私がいることを発見した:テキストエディタを経由して、直接HTMLファイルに入力されたインラインSVGについて

  1. をかjavascriptとelm.innerHTMLでは、他の2つの答えで述べたように、xmlns属性は必要ありません。
  2. しかし、JavaScriptやAJAXを介してロードされたインラインSVGのために、2つのオプションがあります。
    • 使用xhr.responseTextelm.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パーサを使用しているためです。
関連する問題