하나의 잉크 스케이프 SVG 문서를 다른 문서에 포함 시키거나 연결할 수 있습니까?

하나의 작은 SVG 파일 (잉크 스케이프로 생성)을 가져 와서 다른 (더 큰) 파일에 포함 시키거나 연결하고 싶습니다. 브라우저에 표시되면 작은 것이 큰 자리 표시 자 안에 표시되기를 바랍니다.

가능합니까?

후자는 고정 해상도로 렌더링되고 현재 문서에서 일반 벡터 객체처럼 스케일되지 않는 <use>것을 선호 합니다 <image>. http://www.w3.org/TR/SVG11/struct.html#ImageElement

그러나 요소 <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"/>

해당 기능에 대한 지원은 (적어도) Inkscape, Firefox 및 Batik에서 작동하는 것으로 알고있는 한 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"
     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>

출처 : /programming/5451135/embed-svg-in-svg/5451238#5451238