Malformed svg produced

[villesau]

Hi, We have a following svg: https://gist.github.com/villesau/2f4182fca1f5c61e5b4246c188617c74

Locally, following data uri is produced: https://gist.github.com/villesau/856334688e6dc1643c5410ecb85cf6b2
When building the production build, the result is following: https://gist.github.com/villesau/a2b43088424eb3ab60989941785bb236

The problematic part in prod build is this:

	<text transform='translate(138.826 81.235)' class='st2' style='font-size:22px;font-family:' IBMPlexSans-MediumItalic
	''>ABC</text>

As you see, the font name is placed outside the single quotes whereas in dev it's in the style correctly: .st5{font-family:'IBMPlexSans-MediumItalic';}.

[bhovhannes]

Hi,
Do you have any other webpack loaders configured?

Replacement logic in svg-url-loader is pretty simple (it is actually a series of simple regex replacements) and while I am not 100% sure without writing a failing test case, it should not change places of characters, only replace them with correspondent code.

[villesau]

Yeah, css-loader& less-loader. However, this started happening when moving from url-loader to svg-url-loader. Though, there's a chance that simultaneously changing the limit property revealed the actual issue here. The svg is imported in less file, and the error was not there before changing to svg-url-loader and changing the limit. Maybe either css-loader or less-loader is not properly compatible with utf8 encoded svgs then? The error happens in a less file compiled to css via less-loader, css-loader & MiniCssExtractPlugin, but that setup was not changed when the error started to happen.

[bhovhannes]

I don't know about css-loader and less-loader. There are many different pieces in such setup and a variety of options. If you can put together a minimal repo with the issue that will be super useful.

I will look into this issue in a week, got some high-priority work related stuff to do.