Menu
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
329
Custom icons To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image.
To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio).
The SVG format allows for the nesting of SVG graphics. It is possible for an “<svg>” elements, to be placed within another “<svg>” element. Though, within a nesting, the absolute placement is limited to the respective parent “<svg>” element.
The issue of blurriness arises when you upload an image that has the exact pixel dimensions of the space you are targeting. The exact reason has to do with the resolution of modern screens.
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
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
