Is there a way to stack two SVGs on top of each other?

I have two SVG images:

1

 <svg width="260" height="260" viewBox="0 0 16 16" fill="rgb(255, 115, 0)" xmlns="http://www.w3.org/2000/svg">   <path fill-rule="evenodd" fill="rgba(146, 168, 209, .7)" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><circle cx="8" cy="8" r="7"/> </svg>

2

<svg width="260" height="260" viewBox="0 0 147.9 65" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 147.9 0 L 147.9 5.1 L 139.2 5.1 L 139.2 59.9 L 147.7 59.9 L 147.7 65 L 125.4 65 L 125.4 59.9 L 133.5 59.9 L 133.5 14.1 L 133.1 14.1 L 110 62.2 L 106.5 62.2 L 83.2 14 L 82.8 14 L 82.8 59.9 L 91 59.9 L 91 65 L 68.8 65 L 68.8 59.9 L 77.3 59.9 L 77.3 5.1 L 68.6 5.1 L 68.6 0 L 82.4 0 L 108.3 53.7 L 108.7 53.7 L 134.1 0 L 147.9 0 Z M 64.7 0 L 64.7 5.1 L 58.6 5.1 L 35 65 L 30.1 65 L 6.4 5.1 L 0 5.1 L 0 0 L 22.5 0 L 22.5 5.1 L 12.6 5.1 L 32.6 56.8 L 33.1 56.8 L 52.7 5.1 L 42.6 5.1 L 42.6 0 L 64.7 0 Z" vector-effect="non-scaling-stroke"/></g></svg>

I have only a basic idea of how it works, but I want the second one to be inside of the first one.
The first one is actually already a combination of two:

1.1

<svg class="bi bi-circle-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

1.2

<svg class="bi bi-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

It was easy to combine 1.1 with 1.2, however, I can’t get my head around combining 1 and 2. I can understand that it has to do with different viewBox attributes for 1 and 2, but if I simply change it either for 1 or for 2 nothing good happens.

Given that the two SVG images have different viewBox attributes, Is there a way to put SVG 2 in the center of SVG 1 where 2 will be on the front and 1 will serve as a background?

There was a similar question here, but it describes combining two SVGs side by side. By recommendation of @mayersdesign I removed transform="translate(184.3)" attribute and it helped, it put one SVG on top of each other like that (not exactly the way I want it to look):

not exactly the way I want it to look

The code looks like this:

<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"
 viewBox="0 0 368.6 184.3" style="enable-background:new 0 0 184.3 184.3;" xml:space="preserve">

Can the combination be made to look better?

Answer

It appears that my task can be done easily in Inkscape. I installed Inkscape, inserted my SVGs and the rest was pretty easy to figure out. Thank you, Billy Kerr for making me try Inkscape again!

Attribution
Source : Link , Question Author : Vladimir Markiev , Answer Author : Vladimir Markiev

Leave a Comment