title: Align multiple elements in an SVG-container
body: <p>I'm trying to write an SVG-page where we have an icon and to its right a dynamic text (the distance between those two is fixed). The icon has a fixed width and height, but the text can vary in its width.</p>
  
  <p>Both elements are surrounded by a group and they should be centred in there. The group also contains a free text that is also centred.</p>
  
  <pre><code>.-------------------------------------.
  |                                     |
  |             some text               |
  |                                     |
  |   .----.                            |
  |   |    |  blah blah blah blah blah  |
  |   `----´                            |
  `-------------------------------------´
  
  .-------------------------------------.
  |                                     |
  |             some text               |
  |                                     |
  |        .----.                       |
  |        |    |  blah blah blah       |
  |        `----´                       |
  `-------------------------------------´
  </code></pre>
  
  <p><em>Anyone to admire my ASCII-skills? ;)</em></p>
  
  <p>My approach would be to compile the icon and the text into one group and then centre that one into the parent group. The header text, too.</p>
  
  <p>I read that I can centre texts in a group, but I didn't find a way to align images or actually groups.</p>
  
  <pre><code>&lt;g id="MainGroup"&gt;      
    &lt;text id="InfoText" x="90" y="0" width="320" text-anchor="middle" font-size="20" fill="#FFFFFF"/&gt;
    &lt;g x="90" y="0" width="320" text-anchor="middle"&gt;
      &lt;image id="UserIcon" x="0" y="25" width="48" height="48"/&gt;
      &lt;text id="Username" x="58" y="55" font-size="22" fill="#FFFFFF"/&gt;
    &lt;/g&gt;    
  &lt;/g&gt;
  </code></pre>
  
  <p>How would I do this?</p>
  
  <p>Note that I'm totally new to this SVG-stuff, so I might miss the obvious. If I missed some info you need, feel free to ask for it.</p>