☰

1 つの inkscape SVG ドキュメントを別の inkscape SVG ドキュメント内に埋め込んだりリンクしたりすることは可能ですか?

tag-icon • tag-icon svg inkscape
1 つの inkscape SVG ドキュメントを別の inkscape SVG ドキュメント内に埋め込んだりリンクしたりすることは可能ですか?

1 つの小さな SVG ファイル (Inkscape で作成) を別の (より大きな) SVG ファイルに埋め込むかリンクしたいと思います。ブラウザーで表示したときに、小さい方のファイルが、大きい方のファイルのプレースホルダー内に表示されることを期待しています。

出来ますか？

答え1

後者は固定解像度でレンダリングされ、現在のドキュメント内の通常のベクター オブジェクトのように拡大縮小されないため、後者を優先します<use>。<image>http://www.w3.org/TR/SVG11/struct.html#イメージ要素

しかし、要素は<use>SVGファイル全体を参照することはできません。そのxlink:href属性はSVGドキュメント内の要素/フラグメントへの参照です（http://www.w3.org/TR/SVG11/struct.html#UseElement）。「use」要素は、任意のローカル リソースまたは非ローカル リソースを参照できます。

例：

MyLibrary.svg:
<svg (...)>
        <rect x="0" y="0" width="200" inkscape:label="upper-left-blue"
              style="fill:#729fcf;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="upper-left-blue" height="200"/>

UseParts.svg:
        <use x="0" y="0" width="400" xmlns:xlink="http://www.w3.org/1999/xlink"
             xlink:href="MyLibrary.svg#upper-left-blue" xlink:type="simple"
             xlink:actuate="onLoad" height="400" id="use8793" xlink:show="embed"/>

この機能のサポートは SVG エディター/ビューアによって異なる場合がありますが、私の知る限りでは、(少なくとも) Inkscape、Firefox、Batik では動作するはずです。

答え2

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

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

ソース：https://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238

関連情報