When embedding an SVG within an <object> tag, it is not displayed in IE 11 and Edge. Instead, they only show the innerHTML as "SVG no supported," giving the impression that the tag is not supported at all.
Interestingly enough, both browsers do display embedded SVGs when not used alongside Angular components. This behavior may be related to Angular's shadowRoot emulation, as IE does not currently support Shadow DOM (IE doesn't support Shadow DOM yet)
Strangely, if I switch on IE 10 emulation within IE 11, the SVG appears properly.
Source code: http://plnkr.co/edit/ZKRIMans0qgXVyRkjKcP?p=preview
app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml">SVG not supported</object>'
})
export class AppComponent { }
main.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70111e17051c11024230425e405e405d121504115e49">[email protected]</a>/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394d40495c4a5a4b50494d79081701170b">[email protected]</a>/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->