6

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

Amit
  • 2,080
  • 3
  • 19
  • 24
  • One another answer I found was http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view – Amit Nov 04 '15 at 17:01

1 Answers1

7

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

macrog
  • 2,085
  • 1
  • 22
  • 30
  • Let me try that, but can't I use svg content passed as xml, inside $scope and render that inside ion-content ? – Amit Nov 04 '15 at 09:51
  • That is working fine, thanks for that. Somehow the rendered image is way too small though I gave width & height as 100%, where it might be pulling that from ? – Amit Nov 04 '15 at 11:03
  • not sure, try with px instead of % to see if it make a difference. – macrog Nov 04 '15 at 11:05
  • Yes it does but then I have to enter fairly large number some thing like 5000*7500 but then more then 90% of the page is empty so I have to specifically scroll to view that image ! – Amit Nov 04 '15 at 11:15
  • What about inline SVGs? How to read external data and append to a page? – giovannipds Jul 05 '17 at 13:56