Proper SVG markup for external files to be loaded with Snap.svg

Question

So here's the deal, I'm making some experiments with SVG and Snap.svg. I have an external SVG file, logo.svg, that was created with Adobe Illustrator, here's the markup:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="161.875px" height="144px" viewBox="0 0 161.875 144" enable-background="new 0 0 161.875 144" xml:space="preserve">
<polygon fill="#006098" points="144,144 27,144 57,0 144,0 144,54 161.875,72 144,90 "/>
<polygon fill="#00416A" points="57,144 0,144 0,0 87,0 "/>
<polygon fill="#98D5E9" points="72,57 72,27 87,27 117,27 117,57 117,72 117,94.5 117,117 87,117 87,94.5 57,94.5 57,72 87,72 
    87,57 "/>
<polygon fill="#288DC1" points="57,57 75.125,57 81.375,27 57,27 27,27 27,57 27,72 27,94.5 27,117 57,117 57,94.5 67.313,94.5 
    72,72 57,72 "/>
</svg>

I want to use this example and explore Snap.svg animations, so I'm loading it this way:

(...)
var s = Snap(element);
Snap.load('/images/logo.svg', function(f) {
  s.append(f);
});
(...)

But for this to work my element must be a <svg>, so I end up with a <svg> inside a <svg>:

<svg logo-svg>
  <desc>Created with Snap</desc>
  <defs></defs>
  <svg version="1.1" id="Layer_1" x="0px" y="0px" width="161.875px" height="144px" viewBox="0 0 161.875 144" enable-background="new 0 0 161.875 144" preserveAspectRatio="xMinYMin meet">
  <polygon fill="#006098" points="144,144 27,144 57,0 144,0 144,54 161.875,72 144,90 "></polygon>
  <polygon fill="#00416A" points="57,144 0,144 0,0 87,0 "></polygon>
  <polygon fill="#98D5E9" points="72,57 72,27 87,27 117,27 117,57 117,72 117,94.5 117,117 87,117 87,94.5 57,94.5 57,72 87,72 
    87,57 "></polygon>
  <polygon fill="#288DC1" points="57,57 75.125,57 81.375,27 57,27 27,27 27,57 27,72 27,94.5 27,117 57,117 57,94.5 67.313,94.5 
    72,72 57,72 "></polygon>
  </svg>
</svg>

Somehow I fill this is a bit messy, is this correct? Or there's a better way to load external SVG files?

Answer 1

I think the principle is fine, ie often you may load quite a few SVGs and they need to be inside another SVG.

Plus Snap.load is actually taking a document fragment which needs appending to something. So to me it makes sense, but if you can highlight certain problems you are facing because of this, it could be there is a workaround.

I'm just going to post an example to adjust the main paper to the new svg which could be used...

var s = Snap("#svgpaper"); 
var bird = Snap.load("bird.svg", function ( loadedFragment ) { 
            var b = s.append( loadedFragment );
            var bbox = b.getBBox();
            var vbox = bbox.x + " " + bbox.y + " " + bbox.width + " " + bbox.height;                                           
            s.attr({ viewBox: vbox });  
 } );

testing example here