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