title: Create SVG image by merging other SVG files
body: <p>I like to create a svg file based on two arrays the first array hold the paths to svg files
  that should be combined in one svg resource that is described by another array </p>
  
  <p><strong>Array of paths to pattern graphics</strong></p>
  
  <p>These patterns are available 
  as vector files. Each pattern has a size of 200x200px<br>
  <strong>See content of the files below</strong>.</p>
  
  <pre><code>$pathesToPatternsArray = array("0"=&gt;"circle.svg", "1"=&gt;"square.svg");
  </code></pre>
  
  <p><strong>Array that describe the position</strong> of the patterns on an image</p>
  
  <pre><code>$positionOnTheImageArray = array(
  0=&gt;array(0,0,0,0),
  1=&gt;array(0,0,0,0),
  2=&gt;array(1,1,1,1),
  3=&gt;array(1,1,1,1),
  4=&gt;array(1,0,1,0);
  </code></pre>
  
  <p><strong>The Result</strong>:</p>
  
  <p>So we got an image with 5 rows. The first two rows contain only circles. The next two rows contain only squares. The last row contains "square,circle,square,circle"</p>
  
  <p><strong>Pseudocode</strong></p>
  
  <p>This is the way I think it will work but unfortunately I don't know how to handle the SVG merging. I hope you can help me with this. I think it will work maybe with GD, Imagick or simple text file handling but I couldn't find a solution yet. </p>
  
  <pre><code>&lt;?php
  
  $svgOutputfile = createSVGFileRessource();
  
  foreach($positionOnTheImageArray AS $row =&gt; $cellArray)
  {
    $cell = 0;
    foreach($cellArray AS $selectedPattern)
    {
       $pattern = loadPattern($pathesToPatternsArray[$selectedPattern]);
       $svgOutputfile-&gt;write($row,$cell,$pattern);
       $cell++;
    }
  
  $svgOutputfile-&gt;save();
  </code></pre>
  
  <p><strong>Content of triangle.svg</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;
  &lt;svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"&gt;
  &lt;circle fill="#000000" stroke="#000000" stroke-miterlimit="10" cx="100" cy="100" r="100"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Content of square.svg</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;
  &lt;svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"&gt;
  &lt;rect y="0" fill="#000000" stroke="#000000" stroke-miterlimit="10" width="200" height="200"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Finaly</strong></p>
  
  <p>I'm really looking forward to an answer that helps me to find a solution.  </p>