SVGにSVGを埋め込みますか？

私はSVGドキュメントを持っていて、その中に外部svg画像を含めたいです。

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

（「オブジェクト」は単なる例です-外部ドキュメントはxhtmlではなくSVGになります）。

何か案は？これは可能ですか？それとも、logo.svg xmlを外側のSVGドキュメントに単純にスラップするのが最善ですか？

image要素を使用してSVGファイルを参照します。楽しみのために、以下を次のように保存しますrecursion.svg。

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg>

または、次のように実際に子svgを親svgに埋め込むことができます。

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

デモ：http :
//hitokun-s.github.io/old/demo/path-between-two-svg.html

SVGを別のSVGに埋め込むときは、次の点に注意してください。

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

次に、埋め込まれたSVGは、指定された寸法の長方形の形状をとります。

つまり、埋め込まれたSVGが円形または正方形以外の形状である場合、透明度のある正方形になります。したがって、マウスイベントはその埋め込まれた四角形にトラップされ、親SVGには到達しません。気をつけて。

より良いアプローチは、パターンを使用することです。形状を塗りつぶすには、円、正方形、またはパスのいずれかです。

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

次に、次のようなパターンを使用します。

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

これで、マウスイベントが透明な画像の四角形に引っ掛からなくなります。

<image>タグを使用すると、埋め込まれたファイルのレンダリングが低品質になることがわかりました。ただし、次の手法は機能しました（SVGファイルをSVGファイル内に埋め込むには-HTMLページでのレンダリングに必ずしも必要ではありません）。

• テキストエディタでSVGファイルを編集します。

• メタデータの終わりを見つけます。

  </metadata>
    <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">

• そのグループタグの後に次の行を挿入します。

  <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />

• この場合、ファイルにOTHERFILE.svgとすべてのlayer1（最初のデフォルトのレイヤー）を含めています。

• これを保存して、Inkscapeでファイルを開きます。

この手法は、すべてのページに標準の背景またはロゴを配置する場合に役立ちます。それをファイルの最初に置くことにより、最初に（したがって、最後に）レンダリングされます。この属性を追加してロックすることもできます：

sodipodi:insensitive="true" 

言い換えると：

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />

SVGにSVGを埋め込む必要がありましたが、その色を変更して変換を適用する必要もありました。

ネストされたsvg要素の "transform"属性をサポートするのはFirefoxのみです。<image>の色を変更することもできません。したがって、両方の組み合わせが必要でした。

私がやったことは次のことでした

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

これは少なくともFirefox、Chrome、Inkscapeで動作します。

これは、変換を適用できることを除いて、親svg回答の子svgと同じように動作します。

注xlink:hrefは廃止されました。href代わりに使用してください。例：

<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>

viewBox、widthおよびheight（この回答の）値は単に説明のためのものであり、それに応じてレイアウトを調整します（詳細）。

<image> と同様の仕様を共有しているので<img>、Christiaanの回答で述べたように、SVGスタイリングをサポートしていません。たとえば、svgシェイプの色をフォントの色と同じに設定する次のcss行がある場合、

svg {
  fill: currentColor;
}

上記のスタイル<image>が使用されている場合は適用されません。そのためには、ニックの答えに<use>示されているように、を使用する必要があります。

注id="layer1"とhref="OTHERFILE.svg#layer1"彼の回答の値は必須です。

あなたが追加しなければならないことの意味 id属性を外部svgファイルする必要があるため、（変更された）外部svgファイルを自分（またはWebサイト）または他の場所でホストする必要があります。結果の外部svgファイルは次のようになります（私がを置いた場所に注意してくださいid）：

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

idの値は何でもかまいません。この例では「ロゴ」を使用します。

そのsvgを埋め込むには、

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

上記のsvgをHTML内でインラインとして使用する場合、xmlns属性は必要ありません（少なくとも私がsvgoから知っていること）。