Как правильно наложить SVG на SVG?

Подскажите, пожалуйста, как правильно вставлять внешнюю SVG картинку с возможностью задания её координат?

Правильнее создать спрайт, в котором будут два или больше изображений SVG, каждое из которых будет иметь свой уникальный ID

#1. Добавить спрайт в HTML с помощью <object>

<object data="SVG/Bcg.svg" type="image/svg+xml"  width="1920" height="1080" ></object>

Note

Объектам <object> бесполезно присваивать id, так как они не могут быть вызваны целиком из SVG

#2. И далее вызывать каждое изображение SVG из спрайта по его уникальному id

<use xlink:href="Bcg.svg#atom" x="10" y="10" /> 
  <use xlink:href="Bcg.svg#znak" x="500" y="10" />   

Изменяя координаты x, y достаточно просто позиционировать изображения SVG относительно друг друга. См. ответ

Можно попробовать использовать ваш вариант с вызовом каждого изображения с помощью отдельных <object>

Каждое изображение поместить в свой родительский блок, задав одному блоку относительное позиционирование, другому абсолютное.

И тогда можно накладывать и смещать одно изображение относительно другого, используя правила CSS

<div style="position:relative; margin-left:-450px"> 
<object id="bcg" data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/atom.svg" type="image/svg+xml"  width="1920" height="1080" ></object>
</div>  
<div style="position:absolute;top:6%;left:35.5%"> 
<object data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/bzr.svg" type="image/svg+xml" id="bcg" width="100" height="100" ></object>
</div> 

Как сделать спрайт и взаимно позиционировать, масштабировать изображения, вызванные из этого спрайта

Если у вас немного svg изображений, то можно быстро сделать спрайт вручную, не подключая сторонних монстров для этих целей.
Преимущество очевидно, пока вручную делается спрайт легко разобраться, как всё устроено, что нужно настроить, чтобы получить желаемый результат.

Допустим у нас 2 SVG изображения:

Андроид

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="200"      viewBox="0 0 96 105" style="border:1px solid" >  
  
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
 </svg> 

Дорожный знак

<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
  <path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
  <path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#FE4" stroke-width="3"/>
  <path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#CA0" fill="#CA0"/>
  <path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"/>
</svg>

Структура спрайта

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="200"      viewBox="0 0 96 105" style="border:1px solid" >  
         
  <!-- viewBox можно добавлять  в symbol для более тонкой настройки размеров изображения -->
  <symbol id="android"  viewBox="0 0 96 105"> 
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
 </symbol> 
   <symbol id="znak" viewBox="0 0 180 180">
     <path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
   </symbol>
</svg> 

Изменяя viewBox для каждого symbol можно индивидуально настроить размеры каждого изображения.

Note

Увеличение 3 и 4-го атрибута viewBox уменьшает размеры изображения и наоборот, - уменьшение атрибутов увеличивает размеры.

Обратите внимание, что я увеличил viewBox у дорожного знака, чтобы уменьшить размер знака.
Было: viewBox="0 0 100 100" Стало viewBox="0 0 180 180"

Вызов изображений из спрайта и их позиционирование

 <use xlink:href="#android" x="0" y="0" />   
  <use xlink:href="#znak" x="20" y="20" />   

Ниже полный код:

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="200"      viewBox="0 0 96 105" style="border:1px solid" >  
         
  <symbol id="android"  viewBox="0 0 96 105"> 
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
 </symbol> 
   <symbol id="znak" viewBox="0 0 180 180">
  <path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
  <path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#FE4" stroke-width="3"/>
  <path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#CA0" fill="#CA0"/>
  <path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"/>
  </symbol>
  <use xlink:href="#android" x="0" y="0" />   
  <use xlink:href="#znak" x="20" y="20" />   
</svg>