I bring SVG to the screen with D3js. In chrome, everything is ok (picture 1), and incomprehensible indents appear in safari (picture 2)

enter image description here enter image description here

index.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>electric</title> </head> <body> <script src="js/d3/d3.min.js"></script> <svg id="electric"></svg> <script src="js/main.js"></script> </body> </html>

main.js

 var mySVG = d3.select("#electric").append("svg:image") .attr("xlink:href", "js/energyCircleAES.svg") .attr("width", 100) .attr("height", 100) .attr("x", 0) .attr("y", 0)

energyCircleAES.svg

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <circle fill="#005F8D" cx="50" cy="50" r="50"/> </svg>

    0