Multiple inline svg's break html files

[Duncank]

Issue description

When running a live-server for my webapp, some .html files containing inline svg's are not returned completely.

This is the command I use to start the server: live-server www/ --port=1234 --entry-file=index.html. The index.html (also with inline svg's) is delivered correctly, but I use ajax-requests to get html-files in the /pages/-folder and they return incomplete, with some injected websocket code by live-server around the svg-parts:

This is my schools.html in the folder:

<welcome>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6v11h4V6M2 17h4V6H2m5 13h10V4H7v15z"/></svg>
</welcome>
<page class="page__search">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
</page>

This is the same file in Chrome's network-response-tab:

<welcome>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6v11h4V6M2 17h4V6H2m5 13h10V4H7v15z"/><!-- Code injected by live-server -->
<script type="text/javascript">
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function() {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					head.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					head.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function(msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			console.log('Live reload enabled.');
		})();
	}
	// ]]>
</script>
</svg>
</welcome>
<page class="page__search">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/
<!-- Code inje

As you can see, the returned code is cutoff and the injected code (almost) appears twice, breaking my app.

Using the --no-css-inject option doesn't change this.

Software details

Basic .html & .js

• Command line used for launching live-server:
• OS: Windows 10
• Browser (if browser related): Chrome 68
• Node.js version: 8.11.3
• live-server version: 1.2.0

[zhaoterryy]

Having the same issue.

//   <-- For SVG support
if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					head.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					head.appendChi

[palecek]

Any chance to merge pull request https://github.com/tapio/live-server/pull/279 fixing this issue?

[avwie]

Found out this issue after 2 hours searching why some of my SVG, embedded via , were broken and some not.

I see this issue is still not resolved? Is it such a big issue to fix the RegExp? I solved it now by removing the SVG regexp check from my local live-server.js file.

[elisaado]

I have the same issue, half my page is missing when I use >2 SVGs in it