Multiple inline SVGs break HTML files

[zhaoterryy]

I'm submitting a...

[x] Bug report 

Behavior

Inserting multiple inline SVGs gives a broken HTML page due to code injection from live-server being cutoff.

expected injection (first SVG):

	//   <-- 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();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// 

resulting injection (after the 1st SVG):

	//   <-- 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

Environment

Browser:
All Browsers

For Tooling issues:

- Live Server: 5.1.1
- Platform: Mac
- Visual Studio Code: 1.26.0-insider

Other

Same issue: https://github.com/tapio/live-server/issues/272

[ghost]

Seeing the same Issue on win10. Does moving svg to external files help?

[LucyI]

Same issue on Win10.

[aprather51]

Same issues on win10 - had to kill netstat task by force to reload live server again.

[angeliquejw]

Am currently encountering this on VS Code Version 1.32.1 (1.32.1) on MacOS in Firefox, Chrome and Safari. Only 3 of the 5 SVGs show up and the extension crashes silently.

[julius-spudvilas]

Confirmed on 1.32.3. If we reference SVG files with live server breaks silently and we get bunch of JS injected in SVG tag

[jboarman]

As indicated by others, the issue appears due to multiple attempts by live-server to inject the client-side javascript code. The defect is around the matching and/or processing of those matches of injection candidates.

The current injection candidates are based on regular expression matches (new RegExp("</svg>")). The simplest way to resolve this particular issue may be to make the regex a bit smarter by having it match only the last occurrence of </svg> in the contents being served.

A proof-of-concept is outlined in the link below based on a convoluted-looking expression of <\/svg>(?![\s\S]*<\/svg>)

Sample SVG File with Nest SVG Elements nested.svg

Fix Proof-of-Concept https://regexr.com/4elgb

Location of Issue in Live Server Code https://github.com/ritwickdey/vscode-live-server/blob/d7c4d49ae236004e0e57041ddfe91e884b528bb2/lib/live-server/index.js#L60-L104

[Thuoq]

this issue y should change live-server to static-server ( on npm ). Because underhood live-server have st so, SVG it not work.

[Harshithvellala]

can you says how to fix it

[Aissablk]

did you fix it guys?

[billpendrydotcom]

This bug is affecting me, can't add multiple inline SVGs to my page. HTML code gets truncated. Please fix.