title: My SVG won't scale
body: <p>[Update] I rephrased and got the perfect answer <a href="https://stackoverflow.com/questions/45570401/how-to-size-an-svg-viewbox-with-angularjs/45571103">here</a></p>
  
  <p>I do not see this as being a duplicate of the question mentioned above, for reasons given below</p>
  
  <hr>
  
  <p>I want a kiosk display, where a single browser tab is how, full-screen (press F11).</p>
  
  <p>I want a left and right column, with an SVG image in the centre.</p>
  
  <pre><code>Here is a minimal implementation:
  
  &lt;!doctype html&gt;
  &lt;html lang=en&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8&gt;
  &lt;title&gt;blah&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;table border="1" style="width: 90%; margin: auto"&gt;
          &lt;tr&gt;
              &lt;td style="width:25%"&gt;
                  Left column
              &lt;/td&gt;                       
              &lt;td style="width:60%; border-width:1px; border-color:red;border-style: solid"&gt;
  </code></pre>
  
  <p>The SVG goes here, but is 1,300 lines </p>
  
  <pre><code>            &lt;/td&gt;
              &lt;td style="width:15%"&gt;
                  Right column
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;    
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>as stated, the SVG is 1,300 lines, so I won't post it unless you <em>really</em> need it :-)</p>
  
  <p>I believe that only the start is of interest, and that's what I can't seem to get right. How should my <code>SVG</code> tag look to fill that table cell with the SVG, scaled to fit, maintaining the height / width ratio?</p>
  
  <p>It currently is </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
       width="7.22222in" height="10.0444in"
       viewBox="0 0 650 904"&gt;
  </code></pre>
  
  <p>with the rest of the file being <code>path</code> tags.</p>
  
  <p>which is obviously wrong, as it has a fixed height / width. Note that I cannot foresee the screen size of the various kiosk devices. </p>
  
  <hr>
  
  <p>[Update]</p>
  
  <p><a href="https://stackoverflow.com/questions/25689678/make-svg-scale-to-full-screen-size">This question</a> seems to imply that the viewBox must have a fixed size, rather than 100% - is that so?</p>
  
  <p>Also, I have to inline the <code>SVG</code> (I don't know if that makes a difference). I can't use an HTML <code>img</code> tag because I am using AngularJs and some of my paths look like </p>
  
  <pre><code>   &lt;path id="Top row 1" ng-click='RoomClicked($event, "A-1")'
          fill={{GetFillColour('A-1')}} stroke="black" stroke-width="1"
          d="M 226.00,69.00
             C 226.00,69.00  ...
  </code></pre>
  
  <p>and when I use an <code>img</code> tag, the browser reports an error </p>