15

Is it possible to include one SVG inside another without rasterization effects? I've tried this

<svg version="1.2" width="600.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <image height="655.813953488" width="600.0" x="0" xlink:href="A.svg" y="0"/>
 <image height="740.540540541" width="600.0" x="0" xlink:href="B.svg" y="655.813953488"/>
</svg>

Which renders a composite image of A.svg and B.svg but they lose their vector graphics properties and turn into bitmaps (tested in chrome, inkscape, inkview and eog). The resulting svg will not be displayed inside a webbrowser so external javascript calls are not an option. How can I "include" one svg inside another without copying and pasting and preserving vectorization?

Zoomed in results of composite image in chrome:

enter image description here

(the effect is not present with A.svg alone)

EDIT: Here are the exact images I'm using to test:

A.svg

<?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="129pt" height="141pt" viewBox="0 0 129 141" version="1.2">
      <defs>
        <g>
          <symbol overflow="visible" id="glyph0-0">
     <path style="stroke:none;" d="M 133.296875 0 L 133.296875 -5.1875 C 122.734375 -5.1875 119.15625 -5.1875 116.5625 -12.546875 L 72.328125 -137.6875 C 71.328125 -140.265625 70.9375 -140.875 68.9375 -140.875 C 66.953125 -140.875 66.546875 -140.265625 65.546875 -137.6875 L 23.3125 -18.125 C 19.53125 -7.375 11.5625 -5.1875 4.578125 -5.1875 L 4.578125 0 C 8.171875 -0.40625 16.140625 -0.40625 19.921875 -0.40625 C 24.90625 -0.40625 32.875 -0.40625 37.65625 0 L 37.65625 -5.1875 C 28.296875 -5.578125 26.90625 -11.953125 26.90625 -14.34375 C 26.90625 -16.140625 27.296875 -17.140625 27.703125 -18.328125 L 38.25 -48.015625 L 90.453125 -48.015625 L 102.421875 -14.140625 C 103.40625 -11.75 103.40625 -11.359375 103.40625 -10.5625 C 103.40625 -5.1875 94.84375 -5.1875 91.0625 -5.1875 L 91.0625 0 C 96.828125 -0.40625 107.203125 -0.40625 113.375 -0.40625 C 118.546875 -0.40625 128.515625 -0.40625 133.296875 0 Z M 88.671875 -53.203125 L 40.046875 -53.203125 L 64.359375 -121.734375 Z M 88.671875 -53.203125 "/>
          </symbol>
        </g>
      </defs>
      <g id="surface1">
        <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
          <use xlink:href="#glyph0-0" x="-4.59" y="140.87"/>
        </g>
      </g>
    </svg>

B.svg

  <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="111pt" height="137pt" viewBox="0 0 111 137" version="1.2">
      <defs>
        <g>
          <symbol overflow="visible" id="glyph0-0">
     <path style="stroke:none;" d="M 120.9375 -36.265625 C 120.9375 -54.203125 104.609375 -69.53125 83.28125 -70.9375 C 102.421875 -74.71875 115.765625 -87.46875 115.765625 -102.609375 C 115.765625 -119.15625 99.421875 -136.09375 73.71875 -136.09375 L 10.359375 -136.09375 L 10.359375 -130.90625 C 24.109375 -130.90625 26.296875 -130.90625 26.296875 -121.9375 L 26.296875 -14.140625 C 26.296875 -5.1875 24.109375 -5.1875 10.359375 -5.1875 L 10.359375 0 L 78.90625 0 C 104.40625 0 120.9375 -18.125 120.9375 -36.265625 Z M 101.21875 -102.609375 C 101.21875 -87.46875 89.0625 -72.328125 67.546875 -72.328125 L 38.859375 -72.328125 L 38.859375 -123.140625 C 38.859375 -129.90625 39.25 -130.90625 47.21875 -130.90625 L 72.71875 -130.90625 C 92.453125 -130.90625 101.21875 -114.96875 101.21875 -102.609375 Z M 106.203125 -36.46875 C 106.203125 -21.921875 94.84375 -5.1875 73.125 -5.1875 L 47.21875 -5.1875 C 39.25 -5.1875 38.859375 -6.171875 38.859375 -12.953125 L 38.859375 -69.140625 L 75.71875 -69.140625 C 96.234375 -69.140625 106.203125 -51.015625 106.203125 -36.46875 Z M 106.203125 -36.46875 "/>
          </symbol>
        </g>
      </defs>
      <g id="surface1">
        <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
          <use xlink:href="#glyph0-0" x="-10.361" y="136.082"/>
        </g>
      </g>
    </svg>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
Hooked
  • 84,485
  • 43
  • 192
  • 261
  • I can't seem to reproduce this problem. In my attempt both images were not rasterized, when using Chrome and IE10. I was able to zoom the image and my ellipses maintained perfectly rounded edges, and were not jagged. – Mike Panter Feb 11 '13 at 03:01
  • @MikePanter I've updated the question. I think your answer might not hold if paths and groups are used, if you can confirm that that work though I'll mark yours as correct. – Hooked Feb 11 '13 at 04:20
  • Possible duplicate of [Embed SVG in SVG?](https://stackoverflow.com/questions/5451135/embed-svg-in-svg) – Dave Jarvis Oct 01 '17 at 21:49
  • Can't reproduce this problem. – cuixiping Dec 08 '17 at 03:15
  • Cannot reproduce with current major browsers (chrome, ff, edge, ie11) as display agents, voting to close. – collapsar Jul 13 '18 at 09:58
  • 2
    You can include an `svg` element inside an other the same way you would include a `symbol`. Please take a look at this SVG file https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat Open it in view-source – enxaneta Nov 15 '18 at 16:37

0 Answers0