How to include a non-centered svg into another one and make sure it is centered?

I would like to place a svg path (which comes from an external source) at some exact location inside an other svg. For instance, placing a drawing at the center of a rectangle. Here is an example:

<svg width="450" height="500" 
  xmlns="http://www.w3.org/2000/svg">
    <rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
    <svg x="50" y="50" width="300" height="350">
        <g style="display:inline;fill:#fcef3c;stroke:#000000;stroke-width:3" id="main">
            <path d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" />
        </g>
    </svg>
</svg>

However, the external path I handle has non-centered coordinates, so it does not appear centered on the result:

Is there some way to correct this? While some manual process could be done on the external path before doing this, the inclusion of the path into the other svg is done in a script, so I should find a non-manual method to put it to the correct place.

Following enxaneta comment, I put the path in a symbol element, which I call from a use element (also added a green rectangle filling the symbol element, in order to see its borders):

<svg width="450" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="lionHead" viewBox="0 0 350 400">
     <rect x="0" y="0" width="350" height="400" style="fill:green" />
     <g style="fill:#fcef3c;stroke:#000000;stroke-width:3" id="main">
        <path d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" />
     </g>
    </symbol>
    <rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
    <use x="50" y="50" xlink:href="#lionHead" width="350" height="400" /> <!--  -->
</svg>

However the path still does not center properly: what do I do wrong?

Transform the nested svg in a symbol with a viewBox attribute reflecting the bounding box of the path. Use the symbol with a use element. Since the symbol has a viewBox you can give the use element a position (x,y) and a size (width height) . Observation: it is pointless to give display:inline; to a group

<svg width="450" height="500">
    <rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
    <symbol viewBox="88 44 218 179" id="theSymbol">
        <g style="fill:#fcef3c;stroke:#000000;stroke-width:3" id="main">
            <path id="kk" d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" />
        </g>
    </symbol>
    
    <use xlink:href="#theSymbol"  x="75" y="125" width="300" height="247"/>
</svg>

How to include a non-centered svg into another one and make sure it is centered?

1 Answers