5

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?

Improve this question
4
  • 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, 2020 at 10:16
  • 2
    Does this answer your question? Joining together multiple SVG images
    – Zach Saucier
    May 4, 2020 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, 2020 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, 2020 at 7:58

2 Answers 2

Reset to default
4

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
1

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
6
  • 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, 2020 at 10:49
  • 3
    Then your answer is likely this: graphicdesign.stackexchange.com/questions/90844/…
    – mayersdesign
    May 3, 2020 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, 2020 at 10:55
  • 1
    @VladimirMarkiev Simply remove the transform attribute from <g transform="translate(184.3)"> and they'll stack.
    – Scott
    May 3, 2020 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, 2020 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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