iOS: Passing SVG source string to src property shows empty canvas

[dangrima90]

I'm upgrading ui-svg from v0.0.8 to the latest version v0.1.7 and I'm having issues with iOS.

Simply put I cannot seem to be able to load SVGs via string on iOS, it is working on Android and it used to work on iOS with v0.0.8 as well. I'm testing in a NativeScript Vue application using the latest version v8.4.7.

Example:

<template>
  <SVGView :src="svgString" stretch="aspectFit" />
</template>

<script>
export default {
  data() {
    return {
      svgString: `
        <svg height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
        </svg>`
   };
  }
};
</script>

When testing out a file path, it always works. However on iOS only, having an SVG string it fails to show anything - is this a breaking change with the newer versions of ui-svg?

[dangrima90]

@farfromrefug any ideas on the above please?

[farfromrefug]

@dangrima90 dont think this is supported on ios. It depends on what the native lib supports

[dangrima90]

@farfromrefug so there was a breaking change in the library? Sorry to ask again but I'm sure that with version 0.0.8 this used to work.

[farfromrefug]

@dangrima90 ok missed that. Will take a look

[dangrima90]

Hi @farfromrefug sorry to send again, any way forward on this please? Asking as this issue is a bit of a blocking issue in our application at the moment.

[farfromrefug]

@dangrima90 i just tested and it is still working. What i saw is that you need to add xmlns='http://www.w3.org/2000/svg' to the svg tag or it wont work

[dangrima90]

@farfromrefug Thanks for that it is one of the problems. Just to explain my scenario, basically we have an internal library of SVG icons that have been in use for a while. These are exported with a width and height of 1em, which for some reason setting this width and height fails on iOS. I'm sure that this used to work before.

Is it something that's not supported anymore?

Example SVGs:

<svg width="1em" height="1em" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M1 6C0.447715 6 0 6.44772 0 7C0 7.55228 0.447715 8 1 8H13C13.5523 8 14 7.55228 14 7C14 6.44772 13.5523 6 13 6L1 6Z" fill="red"/>
    <path d="M6.29289 12.2929C5.90237 12.6834 5.90237 13.3166 6.29289 13.7071C6.68342 14.0976 7.31658 14.0976 7.70711 13.7071L13.7071 7.70711C14.0857 7.32853 14.0989 6.71894 13.7372 6.32428L8.23715 0.324276C7.86396 -0.0828428 7.23139 -0.110347 6.82427 0.262846C6.41716 0.636039 6.38965 1.26861 6.76284 1.67572L11.6159 6.96992L6.29289 12.2929Z" fill="blue"/>
  </g>
</svg>

<svg width="1em" height="1em" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M1 6C0.447715 6 0 6.44772 0 7C0 7.55228 0.447715 8 1 8H13C13.5523 8 14 7.55228 14 7C14 6.44772 13.5523 6 13 6L1 6Z" fill="red"/>
    <path d="M6.29289 12.2929C5.90237 12.6834 5.90237 13.3166 6.29289 13.7071C6.68342 14.0976 7.31658 14.0976 7.70711 13.7071L13.7071 7.70711C14.0857 7.32853 14.0989 6.71894 13.7372 6.32428L8.23715 0.324276C7.86396 -0.0828428 7.23139 -0.110347 6.82427 0.262846C6.41716 0.636039 6.38965 1.26861 6.76284 1.67572L11.6159 6.96992L6.29289 12.2929Z" fill="blue"/>
  </g>
  <defs>
    <clipPath id="clip0">
      <rect width="14" height="14" fill="purple"/>
    </clipPath>
  </defs>
</svg>

With the above I don't see the SVGs, however if I remove the width and height, both are displayed as expected.

[farfromrefug]

@dangrima90 not sure about the em issue. Someone would have to debug this deeper. In the meantime you can simply modify the string before passing it to the plugin.

[dangrima90]

@farfromrefug yes of course that was the workaround I will be testing out tomorrow. The 1em is there as these icons are used both for web and mobile, but anyway, it shouldn't be an issue to change the logic a bit for mobile. Will keep you up to date.

[dangrima90]

@farfromrefug I can confirm that removing 1em width and height attributes solved my issues.