How to properly encode content of img src data:image/svg+xml?
Let's say we have a simple SVG like this:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="25">
<rect x="0" y="0" width="120" height="25" stroke-wdith="1px" stroke="#000000" fill="#ffffff"/>
<text x="60" y="15" stroke-width="0pt" font-family="arial,helvetica,sans-serif" font-size="11px" font-weight="normal" font-style="normal" text-decoration="none" display="inherit" text-anchor="middle">
Some text & Other text
</text>
</svg>
Notice the '&' caracters and the "nbsp" HTML entity.
This produce this image:
Now if I use encodeURIComponent to get the proper data for my image, I get this:
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2225%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22120%22%20height%3D%2225%22%20stroke-wdith%3D%221px%22%20stroke%3D%22%23000000%22%20fill%3D%22%23ffffff%22%2F%3E%3Ctext%20x%3D%2260%22%20y%3D%2215%22%20stroke-width%3D%220pt%22%20font-family%3D%22arial%2Chelvetica%2Csans-serif%22%20font-size%3D%2211px%22%20font-weight%3D%22normal%22%20font-style%3D%22normal%22%20text-decoration%3D%22none%22%20display%3D%22inherit%22%20text-anchor%3D%22middle%22%3ESome%20text%20%26%20Other%26nbsp%3Btext%3C%2Ftext%3E%3C%2Fsvg%3E
Using this in an HTML image the <img src="data:image/svg+xml,...,/> the image won't load.
To fix the "nbsp" part, I can use a library like he to decode the HTML. If I remove the '&' it works.
But the '&', even if I see it gets encoded with %26, prevents the image from loading.
I don't know if there's other caracters like this that would prevent the image from loading so I'm wondering how I should deal with the text (which can be anything) to be sure it is always rendered properly.
It is not valid XML. You should replace & with & in first place. There are only 5 XML entities (<, >, &, ", '). Other HTML entities is not part of SVG at all. You can replace with unicode \u00A0 or   or real unicode character " ".
Final <text> content can be one of
Some text & Other\u00A0text
Some text & Other text
Some text & Other text
- Add newlines before selected hyphen symbols
- Why Puppeteer PDF generation not working on Windows?
- How do I get the current date in JavaScript?
- Passing "Id" selected checkbox to Modal bootstrap and send to controller
- ASP.Net MVC Make navigation bar disappear when in full screen mode
- How to resolve uncaught error createSelector method?
- Cordova will not open iframe target links in system browser (or at all)
- How to JSON.stringify a dom element?
- Failed Deployment on Netlify
- Wait until all promises complete even if some rejected
- Warning: Page: Support for defaultProps will be removed from function components in a future major release
- How to prevent the right and bottom edges of my grid from being white on certain grid sizes?
- Issue Controlling Label Font Size on xAxis in LightningChartJS with React and TypeScript
- ReactJS regex doesn't work on a splitted string
- HTTPS block my audio playlist. How to solve it?
- How to make a Proxy trap assignment to itself?
- Is there a way to programmatically override a datasource url with nest config?
- How to find the key code for a specific key
- Cannot read property of undefined React Hooks
- Vue 3 defineExpose doesn't expose child method or property
- What are core files by Node.js?
- Parse and format date in string
- How to load Google Tag Manager with next/script component (Next.js 11)?
- How to format date with date-fns?
- Function declaration is block scoped
- Setting cors in strapi 4
- storing base64 in localstorage
- loading env variables in react app using vite
- functional programming efficiency vs imperative
- Understanding map with comma operator