Show Multiple Svgs In Single Img Tag

I have 4 svgs. I would like to show 4 svgs as single , which means let's say image has 4 equal parts, the 1st part has 1 svg and the 2nd part of the img tag has 2nd svg

Solution 1:

Like the comments said; combine them in one SVG

You can automate that.

Create your own <svg-grid> Web Component (supported in all modern browsers)

<svg-grid><svgwidth="48px"height="53px"></svg><svgwidth="65px"height="45px"></svg><svgwidth="56px"height="32px"></svg><svgwidth="39px"height="42px"></svg></svg-grid>

• The Component reads all 4 SVG cildren
  • records the width/height
  • records its outerHTML
• calculates the width/height needed for compiled SVG
• creates that new SVG
• adds the 4 SVGs calculating translate positions so they all align around the middle
• overwrites the <svg-grid> innerHTML with the created IMG

All code required to output:

<script>
  customElements.define('svg-grid', class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure all DOM SVG children are parsed
        let colors = ["red", "green", "gold", "blue", "purple"];
        let rect = i => `<rectwidth='100%'height='100%'fill='${colors[i]}'></rect>`;
        let sizes = [];
        let svgs = [...this.querySelectorAll("svg")].map((svg, idx) => {
          svg.innerHTML = rect(idx) // rect color for testing only
          sizes.push({
            width: svg.width.baseVal.value,
            height: svg.height.baseVal.value,
          });
          return svg.outerHTML;
        });
        let max = (x, y, wh) => Math.max(sizes[x][wh], sizes[y][wh]);
        let c1w = max(0, 2, "width"); // column1width
        let c2w = max(1, 3, "width"); // column2width
        let r1h = max(0, 1, "height"); // row1height
        let r2h = max(2, 3, "height"); // row2height
        let grect = (nr,x,y) => `<gtransform='translate(${x} ${y})'>${svgs[nr]}</g>`;
        let svg = `<svgwidth='${c1w+c2w}'height='${r1h+r2h}'xmlns='http://www.w3.org/2000/svg'>` +
          rect(4) + // extra background rect
          grect( 0 , c1w-sizes[0].width , r1h-sizes[0].height ) +
          grect( 1 , c1w                , r1h-sizes[1].height ) +
          grect( 2 , c1w-sizes[2].width , r1h                 ) +
          grect( 3 , c1w                , r1h                 ) +
          `</svg>`;
        // this.innerHTML = svg; // if you want the bare SVG
        this.innerHTML = `<imgsrc="data:image/svg+xml,${svg.replace(/"/g,"'").replace(/#/g, '%23')}">`;
      })
    }
  });
</script><style> svg-gridimg{ width:260px } </style><svg-grid><svgwidth="48px"height="53px"></svg><svgwidth="65px"height="45px"></svg><svgwidth="56px"height="32px"></svg><svgwidth="39px"height="42px"></svg></svg-grid>

Solution 2:

<svg width="500" height="500">

    <image x="20" y="20" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(255,0,0)"/></svg>' />

    <image x="100" y="20" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(255,255,0)"/></svg>' />

    <image x="20" y="100" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(0,255,0)"/></svg>' />

    <image x="100" y="100" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(0,255,255)"/></svg>' />

</svg>

<image ... xlink:href='data:image/svg+xml,svg1 string.../>

<image ... xlink:href='data:image/svg+xml,svg2 string.../>

...

result url: https://stackblitz.com/edit/js-ryh4kb?file=index.html