SVG Scaling Giant in Internet Explorer, works in Chome(AngularJS) - html

Question

I've been having an issue I can't get my head around, I've tried many different fixes, mostly around viewBox 0 0 x x various width="" and height="" modifications (removing width and height, which I never had in the first place).
Basically, I use Angular ng-nepeat to construct a row of SVG of specific colour, this is deployed in a propriety visualisation website (PIVision) which deploys HTML pages as draggable resizable objects. I don't think thus has anything to do with the issue but the information may have been helpful.
In Chrome, my HTML symbol shows up nicely as so : Nice SVG
In IE however, the symbol shows up huge, and does not resize or scale as can be seen on the container resize box : IE's SVG
Below is my HTML, as I do not believe it to be a scripting issue, however if required I have attempted to create a JSFiddle (however doesn't work properly, I believe it is to do with my Angular JS set up in JSFiddle, as the implementation the company uses is prebuilt and slightly different, apologies).
HTML :
<div ng-style="{'height': config.Height, 'width':config.Width}" style="cursor:pointer" >
<table style="height:100%; width:100%">
<tr style="width:100%; height:100%" id="theTableRow">
<td ng-attr-title="{{getSortedValue($index)}}" ng-style="{'width':theCircleWidth + '%', 'padding':'0.3%'}" ng-repeat="n in config.makeCounterArray(config.columnMax) track by $index">
<svg ng-if="sortedListOfValues[$index].elementName.charAt(0) == 'P'" style="filter:url(#dropshadow);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" ng-attr-stroke="{{config.stateColours[getSortedValue($index)]}}" stroke-width="4" ng-attr-fill="{{config.stateColours[getSortedValue($index)]}}" />
</svg>
<svg ng-if="sortedListOfValues[$index].elementName.charAt(0) == 'H'" style="filter:url(#dropshadow);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
<rect height="100" width="100" ng-attr-stroke="{{config.stateColours[getSortedValue($index)]}}" stroke-width="4" ng-attr-fill="{{config.stateColours[getSortedValue($index)]}}" />
</svg>
</td>
</tr>
</table>
</div>
Is it possible to fix this or will I have to resort to using coloured border-radius div's to accomplish what I want?
Thanks in advance for any help given, apologies for anything wrong with the question, this is my first!
EDIT : After changing the table to include table-layout:fixed it scales a bit better, however I have this strange space above the table, link in first comment.

Answer 1

SVGs are subject to CSS when directly embedded in the document, different browsers just have different default rendering.
Try this:
svg {
max-width: 100%;
max-height: 100%;
}
For a new default styling. Resize them as needed in specific cases.