$ du -k ./file.svg 
4	./file.svg

内容がマズいのかと思いましたが，動的な要素(<script>...みたいな)もないですし，例示してくださったSVGには<foreignObject>...みたいな複雑めの要素があったりするので，中身の問題ではなさそう……？

うーむ……。

内容

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 482 34" xmlns="http://www.w3.org/2000/svg">

<style><![CDATA[
/* The default color scheme is light */
:root {
	--color_red: rgb(255, 59, 48);
	--color_orange: rgb(255, 149, 0);
	--color_yellow: rgb(255, 204, 0);
	--color_green: rgb(52, 199, 89);
	--color_mint: rgb(0, 199, 190);
	--color_teal: rgb(48, 176, 199);
	--color_cyan: rgb(50, 173, 230);
	--color_blue: rgb(0, 122, 255);
	--color_indigo: rgb(88, 86, 214);
	--color_purple: rgb(175, 82, 222);
	--color_pink: rgb(255, 45, 85);
	--color_brown: rgb(162, 132, 94);
	--color_gray: rgb(142, 142, 147);
	--color_gray_2: rgb(174, 174, 178);
	--color_gray_3: rgb(199, 199, 204);
	--color_gray_4: rgb(209, 209, 214);
	--color_gray_5: rgb(229, 229, 234);
	--color_gray_6: rgb(242, 242, 247);
}

@media (prefers-color-scheme: dark) {
:root {
	--color_red: rgb(255, 69, 58);
	--color_orange: rgb(255, 159, 10);
	--color_yellow: rgb(255, 214, 10);
	--color_green: rgb(48, 209, 88);
	--color_mint: rgb(99, 230, 226);
	--color_teal: rgb(64, 200, 224);
	--color_cyan: rgb(100, 210, 255);
	--color_blue: rgb(10, 132, 255);
	--color_indigo: rgb(94, 92, 230);
	--color_purple: rgb(191, 90, 242);
	--color_pink: rgb(255, 55, 95);
	--color_brown: rgb(172, 142, 104);
	--color_gray: rgb(142, 142, 147);
	--color_gray_2: rgb(99, 99, 102);
	--color_gray_3: rgb(72, 72, 74);
	--color_gray_4: rgb(58, 58, 60);
	--color_gray_5: rgb(44, 44, 46);
	--color_gray_6: rgb(28, 28, 30);
}
}

:root {
	fill: var(--color_gray);
	background-color: var(--color_gray_6);
}

.label {
	dominant-baseline: central;
	font-family: sans-serif;
	font-size: 10px;
}

.parser {
	stroke: var(--color_green);
	fill: var(--color_green);
}

.fetch {
	stroke: var(--color_blue);
	fill: var(--color_blue);
}

.execution {
	stroke: var(--color_red);
	fill: var(--color_red);
}

.progress {
	stroke-width: 2;
}

.progress.parser:not(.first) {
	marker-start: url(#parser-marker);
}
.progress.parser:not(.last) {
	marker-end: url(#parser-marker);
}

.progress.fetch:not(.first) {
	marker-start: url(#fetch-marker);
}
.progress.fetch:not(.last) {
	marker-end: url(#fetch-marker);
}

.progress.execution:not(.first) {
	marker-start: url(#execution-marker);
}
.progress.execution:not(.last) {
	marker-end: url(#execution-marker);
}

marker > circle {
	stroke-width: 0;
}

.connector {
	stroke: var(--color_gray_4);
	stroke-width: 1;
}
]]></style>

<defs>
<marker id="parser-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
	<circle cx="1.5" cy="1.5" r="1.5" class="parser"/>
</marker>
<marker id="fetch-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
	<circle cx="1.5" cy="1.5" r="1.5" class="fetch"/>
</marker>
<marker id="execution-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
	<circle cx="1.5" cy="1.5" r="1.5" class="execution"/>
</marker>
</defs>

<g>
<text x="0" y="9" class="label">即譜実行:</text>
<text x="0" y="24" class="label">HTML解析:</text>
</g>

<g>
<line x1="207" x2="207" y1="9" y2="24" class="connector"/>
<line x1="354" x2="354" y1="9" y2="24" class="connector"/>
<line x1="56" x2="207" y1="24" y2="24" class="parser progress first"/>
<line x1="207" x2="304" y1="9" y2="9" class="fetch progress"/>
<line x1="304" x2="354" y1="9" y2="9" class="execution progress"/>
<line x1="354" x2="482" y1="24" y2="24" class="parser progress last"/>
</g>

</svg>