<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-sanitize.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>SVG & Angular 1.2.0-RC2</h1>
<div ng-bind-html="svg"></div>
</body>
</html>
var app = angular.module('app', [])
// register the SVG fetching service
app.factory("SVGFetcher", ['$http', function($http) {
var get = function() {
return $http({
method: "GET",
url: "svg.html"
}).success(function(resp, status, headers, config) {
return resp;
}).error(function(resp, status, headers, config) {
console.log("EPIC fail", resp);
});
};
return { get: get };
}]);
app.controller('MainCtrl', ['$scope', '$sce', 'SVGFetcher', function($scope, $sce, SVGFetcher) {
SVGFetcher.get().then(function(resp) {
$scope.svg = $sce.trustAsHtml(resp.data);
});
}]);
<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="570" height="600" xml:space="preserve">
<g transform="translate(294.96 305.71) scale(0.93 0.93)">
<image xlink:href="http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-162 -121.5)" width="324" height="243">
</image>
</g>
<g transform="translate(293 469)">
<text font-family="'Lato'" font-size="12" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-39.59 11)">
<tspan x="26.49" y="-28.8" fill="rgb(0,0,0)">EPIC</tspan>
<tspan x="25.84" y="-14.4" fill="rgb(0,0,0)">TEST</tspan>
<tspan x="0" y="0" fill="rgb(0,0,0)">(this is a kitten)</tspan>
</text>
</g>
</svg>