Call external svg in to another svg

Question

I've got multiple inline svgs. In all of those there is a common path + an image. Usually this common part is supposed to change regularly.

So if I save the common area as a separate svg file. Is it possible to call the common svg file in to another inline svg?

E.g.:

main.svg

    <svg height="130" width="500">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
//I need to include external.svg here
    </svg>

external.svg

<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
<image width="20" height="20" xlink:href="man.png"></image>

I think this may be a duplicate of this question http://stackoverflow.com/questions/5451135/embed-svg-in-svg — saoyr5, Jul 14 '15 at 21:07
@saoyr5 I did come across that solution but calling an `` inside an `` did not work. I'm looking for something like `` (not sure if that's the way to go though) — Bekki, Jul 14 '15 at 21:16

Paul LeBeau · Accepted Answer · 2018-08-14T08:56:12.103

0

If you are embedding the SVGs using an <img> (or background-image), then those SVGs must be self contained. They cannot reference other external files whether they be CSS, images, fonts or other SVGs.

However it should work if you use inlined SVGs, <object> etc.

edited Aug 14 '18 at 08:56

answered Jul 15 '15 at 08:32

Paul LeBeau

97,474
9
154
181

Call external svg in to another svg

1 Answers1