Menu
This arrow renders just fine when you save it as arrow.html and open it in a modern browser. (Edge, Firefox, Chrome).
<!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>
But having that inline in an HTML file makes it hard to reuse, so I saved the following into arrow.svg and opened that in my browser, and it looks wrong:
<?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>
What's interesting is that it looks wrong in Firefox, Chrome and Edge. So, maybe I'm doing something wrong? Does anybody know what I'm doing wrong?
525
asked Oct 16 '25 15:10
standalone SVG is XML based which is case sensitive.
HTML is not case sensitive and when you embed SVG in HTML the HTML parser tries to fix up any case sensitivity issues for you.
You have the marker refX and refY attributes entirely in lower case which is invalid and causes them to be ignored in a standalone file.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
