スタンドアローンは、複数のブラウザでインラインSVGと異なるレンダリングが行われるのはなぜですか？

この矢印は、arrow.htmlとして保存し、最新のブラウザで開くとうまく表示されます。（Edge、Firefox、Chrome）スタンドアローンは、複数のブラウザでインラインSVGと異なるレンダリングが行われるのはなぜですか？

<!DOCTYPE html> 
<svg 
    width="490" height="385" 
    viewBox="0 0 490 385"> 
<defs> 
    <marker id="arrow-b" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth"> 
     <path d="M0,0 L0,4 L6,2 z" fill="#000" /> 
    </marker> 

    <marker id="arrow-a" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth"> 
     <path d="M0,2 L6,0 L6,4 z" fill="#000" /> 
    </marker> 
</defs> 

<line x1="10" y1="10" x2="480" y2="370" stroke="#000" stroke-width="2" marker-end="url(#arrow-b)" marker-start="url(#arrow-a)" /> 
</svg>

しかし、HTMLファイル内にそのインラインを有する再利用することが困難になり、私はarrow.svgに次のように保存され、私のブラウザであることをオープンし、そして、それは間違っているになります。

<?xml version="1.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" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="490" height="385" 
    viewBox="0 0 490 385"> 
<defs> 
    <marker id="arrow-b" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth"> 
     <path d="M0,0 L0,4 L6,2 z" fill="#000" /> 
    </marker> 

    <marker id="arrow-a" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth"> 
     <path d="M0,2 L6,0 L6,4 z" fill="#000" /> 
    </marker> 
</defs> 

<line x1="10" y1="10" x2="480" y2="370" stroke="#000" stroke-width="2" marker-end="url(#arrow-b)" marker-start="url(#arrow-a)" /> 
</svg>

興味深いのは何されますFirefox、Chrome、Edgeで間違っているようです。だから、私は何か間違っているのだろうか？誰かが私が間違っていることを知っていますか？

出典

2016-09-15 Gilles Marek