1

[Update] I rephrased and got the perfect answer here

I do not see this as being a duplicate of the question mentioned above, for reasons given below

I want a kiosk display, where a single browser tab is how, full-screen (press F11).

I want a left and right column, with an SVG image in the centre.

Here is a minimal implementation:

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>blah</title>
</head>
<body>

    <table border="1" style="width: 90%; margin: auto">
        <tr>
            <td style="width:25%">
                Left column
            </td>                       
            <td style="width:60%; border-width:1px; border-color:red;border-style: solid">

The SVG goes here, but is 1,300 lines 

            </td>
            <td style="width:15%">
                Right column
            </td>
        </tr>
    </table>    

</body>

as stated, the SVG is 1,300 lines, so I won't post it unless you really need it :-)

I believe that only the start is of interest, and that's what I can't seem to get right. How should my SVG tag look to fill that table cell with the SVG, scaled to fit, maintaining the height / width ratio?

It currently is 

<svg xmlns="http://www.w3.org/2000/svg"
     width="7.22222in" height="10.0444in"
     viewBox="0 0 650 904">

with the rest of the file being path tags.

which is obviously wrong, as it has a fixed height / width. Note that I cannot foresee the screen size of the various kiosk devices.

[Update]

This question seems to imply that the viewBox must have a fixed size, rather than 100% - is that so?

Also, I have to inline the SVG (I don't know if that makes a difference). I can't use an HTML img tag because I am using AngularJs and some of my paths look like 

   <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  ...

and when I use an img tag, the browser reports an error

Mawg says reinstate Monica
  • 38,334
  • 103
  • 306
  • 551
  • 1
    Possible duplicate of [Scale SVG to container without mask/crop](https://stackoverflow.com/questions/9566792/scale-svg-to-container-without-mask-crop) – gfullam Aug 07 '17 at 17:09
  • That was helpful but the Fiddle given uses absolute pixel sizes, as does the `viewport` (which I don't quite understand). - I require something that will work at any screen resolution. I am hoping that someone will post a fiddle using that code and an SVG of their choice. – Mawg says reinstate Monica Aug 07 '17 at 17:21
  • [This question](https://stackoverflow.com/questions/25689678/make-svg-scale-to-full-screen-size) seems to imply that the viewport must have a fixed size, rather than 100% - is that so? – Mawg says reinstate Monica Aug 07 '17 at 17:29

2 Answers2

3

It seems to work for me (at least in Firefox) if I use an image tag pointing to an SVG, with the following CSS used:-

#container img {
    width: 100%;
    max-height: 100%;
}

Where container is a flexible div constraining the size of the SVG (this could be your table cell). The SVG is filling the width of the container, with proportions kept in pro, but if the container gets too wide the max-height kicks in and restricts the height of the SVG as expected without stretching.

Darren Crabb
  • 570
  • 2
  • 10
-4

Just take out the width and height attributes and you should be fine.

Seth Warburton
  • 2,234
  • 1
  • 16
  • 17