SVG on ionic is blurry

I am not sure why my SVG image is blurry I thought the whole point of SVGS are that they can scale correctly to dynamic sizes. Do you think its because the height and width ratios are misaligned?

<img src='assets/img/image.svg'  style='display:inline-block; width: 165px; height:auto; marginTop: -31px; marginRight:-25px;'>

I think the issue is that I have the svg in an img tag, is there another way to display svg files in ionic?

On what device are you looking? It could also be the OS trying to resize based on bitmap - maybe indeed because wrapped in IMG?

1 Like

iPhone 12, it is also blurry in the browser too. It seems this is not an ionic issue? I think I am handling the SVG wrong, according to this post, there seems to be a certain way you handle SVG images:

Try this

1 Like