У меня есть две SVG картинки и я хочу, чтобы одна располагалась в другой. Я выяснил, что можно добавить один в другой через , как здесь. Но сложность в том, что, когда я так делаю, один SVG располагается на фоне, другой как надо на переднем плане, но первый вместо того, чтобы быть фоном для всего переднего плана, он остаётся маленьким в левом верхнем углу.
Первый SVG выглядит так:
<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>
Второй выглядит так:
<svg width="260" height="260" viewBox="0 0 16 16" fill="rgb(255, 115, 0)" xmlns="http://www.w3.org/2000/svg">
Второй должен служить фоном первому, но почему-то, если их объединить под получается вот так:
<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 147.9 65" style="enable-background:new 0 0 147.9 65;" xml:space="preserve">
Живое превью можно увидеть, если вставить код здесь.
Я мало понимаю в векторных изображениях, просто хочу использовать итоговую картинку как favicon для сайта. Должно получиться что-то такое:
Я пытался добавлять атрибуты ширины и высоты для , которые, видимо, неприменимы для этого, пробовал задать идентичный viewBox для каждого из SVG и добавить в , но тоже не получилось.
Как можно объединить два SVG, чтобы получилось как на картинке выше, не используя HTML, CSS, JS и т.д. - используя только SVG?