SVG에 SVG를 포함 하시겠습니까?

SVG에 SVG를 포함 하시겠습니까?

---

SVG 문서가 있는데 그 안에 외부 svg 이미지를 포함하고 싶습니다. 예를 들면 다음과 같습니다.

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

( "object"는 예일뿐입니다. 외부 문서는 xhtml이 아닌 SVG입니다.)

어떤 아이디어? 이것이 가능할까요? 아니면 내 외부 SVG 문서에 logo.svg xml을 간단히 넣는 것이 가장 좋은 방법입니까?

---

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>

---

또는 실제로 다음과 같이 부모 svg에 자식 svg를 포함 할 수 있습니다.

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

데모 :
http://hitokun-s.github.io/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를 임베드하고 색상을 변경하고 변형을 적용해야했습니다.

Firefox만이 중첩 된 svg 요소에서 "transform"속성을 지원합니다. <이미지>의 색상 변경도 불가능합니다. 그래서 둘의 조합이 필요했습니다.

내가 한 일은 다음과 같았습니다.

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

이것은 적어도 Firefox, Chrome 및 Inkscape에서 작동합니다.

이것은 이제 변환을 적용 할 수 있다는 점을 제외하고는 부모 svg 응답의 자식 svg와 동일하게 작동합니다.

---

Note xlink:href has been deprecated, just use href instead, e.g.

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

viewBox, width and height values (in this answer) are simply for illustration purpose, adjust the layout accordingly (read more).

Since <image> shares similar spec as <img>, meaning it doesn't support SVG styling, as mentioned in Christiaan's answer. For example, if I have the following css line that set the svg shape color to be the same as the font color,

svg {
  fill: currentColor;
}

The above style wouldn't apply if <image> is used. For that, you need to use <use>, as shown in Nick's answer.

Note id="layer1" and href="OTHERFILE.svg#layer1" values in his answer are mandatory.

Meaning you have to add the id attribute to the external svg file, so you need to host the (modified) external svg file by yourself (your website) or somewhere else. The resulting external svg file looks like this (notice where I put the id):

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

The value of id can be anything, I use "logo" in this example.

To embed that svg,

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

If you use the above svg as inline in your html, you don't need xmlns attribute (at least what I know from svgo).

참고URL : https://stackoverflow.com/questions/5451135/embed-svg-in-svg