Getting an SVG to pay nicely in IE

#1

http://affordablesouthafricanhunting.com/test/system_architecture.html
Had to get rid of the width/height attributed on the SVG, only used the viewbox. But why does IE not follow the rest?
I also tried to follow
https://codepen.io/Mukudori/pen/oLQYxL
but
http://affordablesouthafricanhunting.com/test/system_architecture_test.html

#2

In my limited web programming experience I have found that it is easier to debug faulty pages by isolating the problem and to have about three test case SVG images. Once all HTML errors and warnings are cleared then there is a good chance that increasing the number of SVG elements will not add any more errors or warnings.

Also it is easier to copy and paste a test case with only three SVG elements because users can easily replicate the problem page.

Currently there are over 350 errors and warnings related to the page, many occurrences are duplicated which makes a simple three SVG element so much easier to debug.

Please check and clear the following problems:

https://validator.w3.org/nu/?doc=http%3A%2F%2Faffordablesouthafricanhunting.com%2Ftest%2Fsystem_architecture_test.html

#3

I think I got pretty far, 1 error remains but shouldn’t

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

solve it?

then (once its responsive, ill place this on top)
http://stevenh.fatcow.com/test/fid_lines.svg

To produce

1 Like
#4

Well done - I just checked and there are no errors or warnings.

Document checking completed. No errors or warnings to show.

#5

I am hitting a stumbling block with this SVG
(im just trying to overlay this (http://stevenh.fatcow.com/test/fid_lines.svg) on top of the blue blocks just to show the connection between them.
But I was thinking, should I just forget the whole SVG mess and duplicate the whole lines functionality to use relative positioning so that IE wont give me any issues?