Eine SVG-Grafik validieren

Hallo und frohe Weihnachten wünsche ich euch!

Ich finde im Netz keinen SVG-Validator und bin gerade total überfragt… SVG, das ist dieser neueste shice…

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="128" height="128" viewBox="0 0 128 128" xml:space="preserve">
	<desc>Created with Fabric.js 5.2.4</desc>
	<g transform="matrix(1 0 0 1 64 64)" style="filter: url(#SVGID_1258);" id="a">
		<filter id="SVGID_1258" y="-34%" height="168%" x="-32%" width="164%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="3.5"/>
			<feOffset dx="7" dy="7" result="oBlur"/>
			<feFlood flood-color="rgb(128,128,128)" flood-opacity="1"/>
			<feComposite in2="oBlur" operator="in"/>
			<feMerge>
				<feMergeNode/>
				<feMergeNode in="SourceGraphic"/>
			</feMerge>
		</filter>
		<text font-family="Lato" font-size="40" font-style="normal" font-weight="normal" text-decoration="underline" style="fill: rgb(255,128,0);">
			<tspan x="-58.7" y="-14.55">a</tspan>
			<tspan x="-41.78" y="-14.55">b</tspan>
			<tspan x="-17.54" y="-14.55">c</tspan>
			<tspan x="6.82" y="-14.55">d</tspan>
			<tspan x="19.06" y="-14.55">e</tspan>
			<tspan x="41.34" y="-14.55">f</tspan>
		</text>
		<text font-family="Lato" font-size="40" font-style="normal" font-weight="normal" text-decoration="underline" style="fill: rgb(255,128,0);">
			<tspan x="-54.94" y="39.69">g</tspan>
			<tspan x="-29.74" y="39.69">h</tspan>
			<tspan x="-19.26" y="39.69">i</tspan>
			<tspan x="-7.02" y="39.69">j</tspan>
			<tspan x="17.22" y="39.69">k</tspan>
			<tspan x="32.7" y="39.69">l</tspan>
		</text>
	</g>
<script xmlns=""/></svg>

Das ist meine SVG.

Firefox stellt sie (ohne Murren) so dar:

grafik

Wie man sieht, ist da in der Mitte ein Strich drin, wo ich nicht weiß, wo der herkommt. (Jetzt mal unabhängig davon, dass das wie betrunken aussieht.)

Edge stellt sie (ohne Murren) so dar:

grafik

Was ist am XML falsch oder warum spinnt der Firefox?

The W3C Markup Validation Service der sagt, dass es sich zumindest um valides XML handelt. Das ist ja schon mal was.

Edit: Ich weiß nicht, ob man die transform unbedingt braucht, oder wofür das feMerge gut sein soll…

Könnte das jemand glattziehen? Danke.

Hm, es hat geklappt. :face_with_open_eyes_and_hand_over_mouth:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="128" height="128" viewBox="0 0 128 128" xml:space="preserve">
	<desc>Created with Fabric.js 5.2.4</desc>
		<filter id="filter1">
			<feGaussianBlur in="SourceAlpha" stdDeviation="1.0"/>
			<feOffset dx="3" dy="6" result="oBlur"/>
			<feFlood flood-color="darkorange" flood-opacity="1.0"/>
			<feComposite in2="oBlur" operator="in"/>
			<feMerge>
				<feMergeNode/>
				<feMergeNode in="SourceGraphic"/>
			</feMerge>
		</filter>
		<text font-family="monospace" font-size="22" font-style="normal" font-weight="normal" text-decoration="underline" style="fill: rgb(255,128,0);" filter="url(#filter1)" x="22" y="50">abcdef</text>
		<text font-family="monospace" font-size="22" font-style="normal" font-weight="normal" text-decoration="underline" style="fill: rgb(255,128,0);" filter="url(#filter1)" x="22" y="95">ghijkl</text>
</svg>

Man muss eigentlich nur wissen, was zu tun ist, auf wenige Elemente reduzieren. Oder man sollte alles nur generieren lassen… Also entweder oder.^^