Creating an SVG Image by Merging Other SVG Files

Question

I like to create an svg file based on two arrays, the first array contains paths to svg files that should be combined into one svg resource, which is described by another array

Array of paths to drawing graphics

These templates are available as vector files. Each template has a size of 200x200px
. See the contents of the files below .

$pathesToPatternsArray = array("0"=>"circle.svg", "1"=>"square.svg");

Array describing the position of patterns in the image

$positionOnTheImageArray = array(
0=>array(0,0,0,0),
1=>array(0,0,0,0),
2=>array(1,1,1,1),
3=>array(1,1,1,1),
4=>array(1,0,1,0);

Result :

So, we got an image with 5 lines. The first two lines contain only circles. The next two lines contain only squares. The last line contains "square, circle, square, circle"

pseudo code

, , , , , SVG. , . , , , GD, Imagick , .

<?php

$svgOutputfile = createSVGFileRessource();

foreach($positionOnTheImageArray AS $row => $cellArray)
{
  $cell = 0;
  foreach($cellArray AS $selectedPattern)
  {
     $pattern = loadPattern($pathesToPatternsArray[$selectedPattern]);
     $svgOutputfile->write($row,$cell,$pattern);
     $cell++;
  }

$svgOutputfile->save();

triangle.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<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">
<circle fill="#000000" stroke="#000000" stroke-miterlimit="10" cx="100" cy="100" r="100"/>
</svg>

square.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<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">
<rect y="0" fill="#000000" stroke="#000000" stroke-miterlimit="10" width="200" height="200"/>
</svg>

Finaly

, .

Answer 1

, , SVG, XML PHP. .

1 -

SVG. , , , :

<svg>
  <svg></svg>
  <svg></svg>
  <svg></svg>
  ..etc..
</svg>

, , <svg>:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="800px" height="1000px" viewBox="0 0 800 1000">

SVG . , , .

• XML (<?xml> <!DOCTYPE>).
• x y, . . x * 200 y * 200

, . , id. . SVG , SVG , .

2 -

SVG , <use> .

<svg>
   <defs>
      <svg id="circle">...</svg>
      <svg id="square">...</svg>
   </defs>

   <use xlink:href="circle"/>
   <use xlink:href="square"/>
   ..etc..
</svg>

.