'SvgXml' for web

[hyxos]

I'm building an app with expo, and I get this error when using expo and trying to compile for web:

Attempted import error: 'SvgXml' is not exported from 'react-native-svg'.

I've noticed this issue has kind of come up before https://github.com/react-native-community/react-native-svg/issues/1236

But why isn't there SvgXml support for web?

Shouldn't we be able to apply this to web? It would be nice to be able to dynamically generate svgs from strings and for it to work across all platforms. SVGs are already first class citizens in the browser, I feel like there should be some type of mechanism to just pass the markup to the DOM.

I'm not sure I understand the technical reasons for not including it or if it just hasn't been implemented yet. If it is a matter of implementation, I would be willing to put in a PR but I need some direction and what the scope of that would be.

[msand]

It's mainly due to the different processing modes available in the browser, and the different security tradeoffs it has. https://www.w3.org/TR/SVG2/conform.html#examples

People are likely not to understand the full implications of it, and use it when inappropriate. Thus I've left it up to consumers of the library to implement that if they need it, and then according to the security / risk model of the product it's applied to. Besides, svg / xml content from the web can be shown using e.g. <img /> tags, and making a component do that is very easy for the ones where that is suitable. If you just want to dump a bunch of xml inside the dom, just use https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

[nyousaf47]

any solution?

[msand]

Many solutions with different tradeoffs, thus no pre-prepared solution.

[msand]

You probably want to read these two threads:

https://github.com/react-native-community/react-native-svg/issues/1235

https://github.com/expo/expo/issues/6660

It depends very much on your web setup, what bundlers you use, other plugins, security considerations etc. There are too many. possible ways to want it to function to satisfy all possibilities of the configuration space. A maximally restrictive (security wise) default might make sense, i.e. not to parse the xml of content loaded from uri but rather let the browser handle it using img or css backgrounds https://svgwg.org/specs/integration/#secure-static-mode

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>' />

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Or something like this for ie compat: "Optimized URL-encoded" https://css-tricks.com/probably-dont-base64-svg/

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224%20387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E" />

[msand]

Mind making a pr for a maximally secure version?

[Sharcoux]

Would this be fine:

let svg = `<svg xmlns="http://www.w3.org/2000/svg" ...`;
let blob = new Blob([svg], {type: 'image/svg+xml'});
let url = URL.createObjectURL(blob);
let image = document.createElement('img');
image.src = url;
image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});

source: https://dev.to/benjaminblack/using-a-string-of-svg-as-an-image-source-8mo

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[Sharcoux]

@msand Would this be acceptable? https://github.com/react-native-community/react-native-svg/pull/1414 (not tested yet. Just asking to validate the idea)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[Sharcoux]

Is this project completely dead? Should we find another solution?

[Raflos10]

Is this project completely dead? Should we find another solution?

Just want to say I also have this issue, would be great to have your PR merged (if it works)

[Sharcoux]

Well, we created and are using this lib in the end: import { SvgXml } from '@cantoo/rn-svg'. Feel free to use it `

[zaptrem]

Well, we created and are using this lib in the end: import { SvgXml } from '@cantoo/rn-svg'. Feel free to use it `

Thanks for your fix! Using now and looking forward to it being merged upstream.

[Cogneter]

Well, we created and are using this lib in the end: import { SvgXml } from '@cantoo/rn-svg'. Feel free to use it `

Thanks a lot, this worked for my project too - SvgUri is working properly with Webpack now.

Also hoping your pull request https://github.com/react-native-svg/react-native-svg/pull/1686 will be merged into this repo in the near future.

[cojo]

Just commenting to follow up on the recent (closed) Issues #2111 and #2075 and note that this also affects our project. It seems a bit bizarre to have these elements but not export them for web.

Obviously developers can and should be responsible for understanding the security implications - but to simply not even export the components and instead silently break with a generic error (this took me over an hour to track down as a result) is not good developer experience.

We are very grateful for this library and its devleopers, and have benefited from it for many years. I hope you will prioritize addressing this issue (which should not be that difficult to address in a basic way with the proper warnings for developers re: security) as soon as possible.

[cojo]

Also, thanks to @Sharcoux and team for maintaining their fork at https://github.com/cantoo-scribe/rn-svg which addresses this in the meantime! Much appreciated.

[Sharcoux]

The react-native-svg project evolution was stopped due to the lack of maintainers, but it's being active again and this problem should be solved shortly. We are going to update the pull request and it should now be accepted. Everything should be back to normal. Just keep updated through the PR https://github.com/software-mansion/react-native-svg/pull/1686 for the details.

[cojo]

That’s great to hear!

Thanks for the follow-up / update. Very much appreciated!