Apakah mungkin untuk menyematkan atau menautkan satu dokumen SVG inkscape ke dalam yang lain?

Saya ingin mengambil satu file SVG kecil (dibuat dengan Inkscape), dan menyematkan atau menautkannya ke yang lain (lebih besar). Ketika ditampilkan oleh browser, saya berharap untuk melihat yang lebih kecil muncul di dalam placeholder yang lebih besar.

Apa itu mungkin?

Lebih memilih <use>untuk <image>sebagai kemudian diberikan pada resolusi tetap dan tidak skala sebagai obyek vektor biasa lakukan di dalam dokumen. http://www.w3.org/TR/SVG11/struct.html#ImageElement

Tetapi elemen <use>tidak dapat mereferensikan seluruh file SVG, xlink:hrefatributnya adalah referensi ke elemen / fragmen dalam dokumen SVG ( http://www.w3.org/TR/SVG11/struct.html#UseElement ). Elemen 'use' dapat merujuk sumber daya lokal atau non-lokal.

contoh:

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"/>

Dukungan fitur tersebut dapat bervariasi untuk editor / pemirsa SVG yang berbeda, sejauh yang saya tahu seharusnya berfungsi (setidaknya) di Inkscape, Firefox dan Batik.

Gunakan imageelemen dan referensi file SVG Anda. Untuk bersenang-senang, simpan yang berikut ini sebagai 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>

Sumber: /programming/5451135/embed-svg-in-svg/5451238#5451238