Adding SVGs to my html produces jQuery errors

Question

This is my core-navigation.html code:

<div class="re-core-navigation-menu">
  <ul class="re-navigation-sidebar" [ngClass]="{'re-sidebar-wide': !isSmallSidebar}">
    <li>
      <div (click)="toggleSidebar($event)">
        <!-- <img src="./assets/navigation/sidebar-extend-icon.svg" width="12" height="12" class="re-sidebar-expand-img" /> -->
      </div>
    </li>
    <li>
      <div>
         <object type="image/svg+xml" data="./assets/re-logo.svg" class="logo">
        </object> 
      </div>
    </li>
    </li>
  </ul>
</div>

and this is re-logo.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Logo-nav</title>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Logo-nav">
            <g>
                <circle id="Oval" fill="#FFFFFF" cx="24" cy="24" r="24"></circle>
                <path d="M20.848,32 L17.176,25.256 L15.784,25.256 L15.784,32 L11.752,32 L11.752,15.008 L18.232,15.008 C19.0480041,15.008 19.8439961,15.0919992 20.62,15.26 C21.3960039,15.4280008 22.0919969,15.711998 22.708,16.112 C23.3240031,16.512002 23.8159982,17.0399967 24.184,17.696 C24.5520018,18.3520033 24.736,19.1679951 24.736,20.144 C24.736,21.2960058 24.4240031,22.2639961 23.8,23.048 C23.1759969,23.8320039 22.3120055,24.3919983 21.208,24.728 L25.648,32 L20.848,32 Z M20.68,20.216 C20.68,19.815998 20.5960008,19.4920012 20.428,19.244 C20.2599992,18.9959988 20.0440013,18.8040007 19.78,18.668 C19.5159987,18.5319993 19.2200016,18.4400002 18.892,18.392 C18.5639984,18.3439998 18.2480015,18.32 17.944,18.32 L15.76,18.32 L15.76,22.28 L17.704,22.28 C18.0400017,22.28 18.3839982,22.2520003 18.736,22.196 C19.0880018,22.1399997 19.4079986,22.0400007 19.696,21.896 C19.9840014,21.7519993 20.2199991,21.5440014 20.404,21.272 C20.5880009,20.9999986 20.68,20.6480022 20.68,20.216 L20.68,20.216 Z M35.392,24.656 C35.392,24.0319969 35.196002,23.4960022 34.804,23.048 C34.411998,22.5999978 33.8240039,22.376 33.04,22.376 C32.6559981,22.376 32.3040016,22.4359994 31.984,22.556 C31.6639984,22.6760006 31.3840012,22.839999 31.144,23.048 C30.9039988,23.256001 30.7120007,23.4999986 30.568,23.78 C30.4239993,24.0600014 30.3440001,24.3519985 30.328,24.656 L35.392,24.656 Z M39.016,26.168 L39.016,26.648 C39.016,26.8080008 39.0080001,26.9599993 38.992,27.104 L30.328,27.104 C30.3600002,27.4400017 30.4599992,27.7439986 30.628,28.016 C30.7960008,28.2880014 31.0119987,28.523999 31.276,28.724 C31.5400013,28.924001 31.8359984,29.0799994 32.164,29.192 C32.4920016,29.3040006 32.8319982,29.36 33.184,29.36 C33.8080031,29.36 34.3359978,29.2440012 34.768,29.012 C35.2000022,28.7799988 35.5519986,28.4800018 35.824,28.112 L38.56,29.84 C37.9999972,30.6560041 37.2600046,31.2839978 36.34,31.724 C35.4199954,32.1640022 34.3520061,32.384 33.136,32.384 C32.2399955,32.384 31.392004,32.2440014 30.592,31.964 C29.791996,31.6839986 29.092003,31.2760027 28.492,30.74 C27.891997,30.2039973 27.4200017,29.5440039 27.076,28.76 C26.7319983,27.9759961 26.56,27.080005 26.56,26.072 C26.56,25.0959951 26.7279983,24.212004 27.064,23.42 C27.4000017,22.627996 27.8559971,21.9560028 28.432,21.404 C29.0080029,20.8519972 29.6879961,20.4240015 30.472,20.12 C31.2560039,19.8159985 32.1039954,19.664 33.016,19.664 C33.8960044,19.664 34.7039963,19.8119985 35.44,20.108 C36.1760037,20.4040015 36.8079974,20.8319972 37.336,21.392 C37.8640026,21.9520028 38.2759985,22.631996 38.572,23.432 C38.8680015,24.232004 39.016,25.1439949 39.016,26.168 L39.016,26.168 Z" id="Re" fill="#3B9DCD"></path>
                <rect id="Rectangle-3" fill="#3B9DCD" x="16" y="13" width="2.5" height="2"></rect>
                <rect id="Rectangle-3-Copy" fill="#3B9DCD" x="32" y="18" width="2.5" height="2"></rect>
                <rect id="Rectangle-3-Copy" fill="#3B9DCD" x="32" y="32" width="2.5" height="2"></rect>
            </g>
        </g>
    </g>
</svg>

When I display this SVG the browser ( chrome latest ) gives me this errors:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. jquery.js:2 Uncaught TypeError: Cannot read property 'opacity' of undefined colorpicker.js:397 Uncaught ReferenceError: jQuery is not defined jquery.tipsy.js:216 Uncaught ReferenceError: jQuery is not defined selectize.js:9 Uncaught ReferenceError: jQuery is not defined init.js:4 Uncaught ReferenceError: $ is not defined jquery.js:2 Uncaught TypeError: Cannot read property 'opacity' of undefined(…) colorpicker.js:397 Uncaught ReferenceError: jQuery is not defined(…) jquery.tipsy.js:216 Uncaught ReferenceError: jQuery is not defined(…) selectize.js:9 Uncaught ReferenceError: jQuery is not defined(…) init.js:4 Uncaught ReferenceError: $ is not defined(…)

I have no idea what is causing those. I have exported the SVG from Sketch application for Mac.

• Removing the SVG results in no errors being shown

• I have jQuery included in my index.html as follows:

• Using <img> instead of <object> does not result in errors ? But using <img> will not allow me to change the colors of the SVG so I need a way.

• Full PAGE

• When I hover over the error I get things like:

chrome-extension//loooong-string/libs/jquery.js:formatted:952

chrome-extension//looong-string/libs/tipsy/jquery.tipsy.js:216

Answer 1

tl;dr: try disabling any extensions you recently added or that recently updated. Specifically, look for StyleBot which has a known issue related to jQuery that produces exactly this combo of error messages.

I had the exact same string of error messages in Chrome. They appeared out of nowhere one day and no amount of reverting or branch-switching would make them go away.

Then I tried Firefox. No error messages.

My coworker was on the same version of Chrome as me and wasn't getting these errors, so I went back and looked for any new extensions I had added in the last week or so. There was only one new one. It was StyleBot. I disabled it and the jQuery errors magically vanished.

Then I found this: https://github.com/ankit/stylebot/issues/449 .