How to render svg inside ion-content

angularjs svg ionic ionic-view
Amit picture Amit · Nov 4, 2015 · Viewed 14.6k times · Source

My application is built using Angularjs and ionic, using cordova for hybrid mobile application, when trying to render svg content received from backend, application is unable to render expected diagram.

This is how my code looks like

<ion-tab title="Diagram" icon-on="mcfly">           
        <ion-view>
            <ion-content class="padding" ng-class="{'has-loading': header.isLoading}">
                <h4>System Diagram</h4>                 
                    {{diagram}}
        </ion-content>
    </ion-view>
</ion-tab>

But what I see is svg data instead of image, am I missing any declaration or any thing ?

Thanks

Answer

macrog picture macrog · Nov 4, 2015

You need to put it in image tag, like this:

<img class="title-image" src="path to your diagram" width="xxx" height="xxx" />

please check this plunker displaying svg

Related questions

AngularJS ng-href and svg xlink

I'd like some input on using xml namespaced attributes with angular. The problem is angular comes with a couple of directives to handle writing attributes such as href and src when angular has parsed the expresssions (otherwise the browser will …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More