title: Dynamically loading and manipulating documents with Ember
body: <p>I'm working on <a href="https://github.com/oakscastle/event/" rel="nofollow">an app concept</a>, and would like to know if Ember is suitable to the task.</p>
  
  <p>I would like to go from a description of relationships between SVGs to a single SVG document.</p>
  
  <p>The program needs to dynamically load documents, and recursively insert itself at the end of them.</p>
  
  <p>So, from an object like:</p>
  
  <pre><code>[
    {
      id: 1,
      image: 'base.svg',
      contains: [
        {
          id: 2,
          position: { x: 50, y: 50 },
          size: { width: 35, height: 35 }
        },
        {
          id: 3,
          position: { x: 150, y: 150 },
          size: { width: 40, height: 40 }
        }
      ]
    },
    {
      id: 2,
      image: 'kitchen.svg'
    },
    {
      id: 3,
      image: 'den.svg',
      contains: [ {
        id: 4,
        position: { x: 25, y: 25 },
        size: { width: 10, height: 10 }
      } ]
    },
    {
      id: 4,
      image: 'tv.svg'
    }
  ]
  </code></pre>
  
  <p>To a page, <code>/areas/1</code>, like:</p>
  
  <pre><code>&lt;html&gt;&lt;body&gt;
    &lt;svg from='base.svg'&gt;
      &lt;!-- Contents of base.svg --&gt;
      &lt;a xlink:href='/areas/2'&gt;
        &lt;svg from='kitchen.svg' x='50' y='50' width='35' height='35'&gt;
          &lt;!-- Contents of kitchen.svg --&gt;
        &lt;/svg&gt;
      &lt;/a&gt;
      &lt;a xlink:href='/areas/3'&gt;
        &lt;svg from='den.svg' x='150' y='150' width='45' height='45'&gt;
          &lt;!-- Contents of den.svg --&gt;
          &lt;a xlink:href='/areas/4'&gt;
            &lt;svg from='tv.svg' x='25' y='25' width='10' height='10'&gt;
              &lt;!-- Contents of tv.svg --&gt;
            &lt;/svg&gt;
          &lt;/a&gt;
        &lt;/svg&gt;
      &lt;/a&gt;
    &lt;/svg&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>