3

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?

  • 1
    This could be easily done in vector image editing software such as Illustrator or Inkscape (the latter is free). Are you interested in non-coding solutions? – Billy Kerr May 4 at 10:16
  • 2
    Does this answer your question? Joining together multiple SVG images – Zach Saucier May 4 at 11:56
  • @ZachSaucier, Only partially, I've already mentioned it in my question, starting from words "There was a similar question". – Vladimir Markiev May 5 at 7:56
  • @BillyKerr, I've never used Inkscape, when I opened it, I didn't understand the way it works because my image got distorted. I will try again, but coding's still in preference. – Vladimir Markiev May 5 at 7:58
2

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!

| improve this answer | |
0

Venturing close to stackoverflow territory here, but this can be achieved with one line of css:

svg {position: absolute }

You can size and arrange them similarly:

svg:last-of-type { width: 180px; left: 45px; }

https://jsfiddle.net/acmfuh6e/

enter image description here

| improve this answer | |
  • I want to be able to use the combined SVG as an image later so I don't want to use any HTML, CSS, or JS. Single file (first code, then file). – Vladimir Markiev May 3 at 10:49
  • 3
    Then your answer is likely this: graphicdesign.stackexchange.com/questions/90844/… – mayersdesign May 3 at 10:52
  • I saw this when I was searching for a solution, but it puts two SVG side by side, and I have no idea how to put them on top of each other. – Vladimir Markiev May 3 at 10:55
  • 1
    @VladimirMarkiev Simply remove the transform attribute from <g transform="translate(184.3)"> and they'll stack. – Scott May 3 at 11:05
  • @mayersdesign They truly do! But background just sticking in the left top corner, the letters are way larger than the circle. – Vladimir Markiev May 3 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.