1

I am trying to render an SVG string as an image in an React component using some straight forward way.

const svg = '<svg version="1" ><line x1="10.6566" y1="24.5918" x2="24.6412" y2="29.6972" stroke="#FF0000" stroke-width="1" /></svg>'

export default function Home(props: Props) {
  const { svg } = props;

  return (
    <div>
      <img src={`data:image/svg+xml;utf8,${svg}`} alt="" />
    </div>
  );
}

I expected this to work, but although the src value looks as expected, nothing is rendered.

user1283776
  • 19,640
  • 49
  • 136
  • 276
  • I'm thinking about using `
    ` for this purpose. Have you tried playing around with that?     – norbitrial Apr 17 '20 at 13:35
  • Does this answer your question? https://stackoverflow.com/questions/23616226/insert-html-with-react-variable-statements-jsx – keikai Apr 17 '20 at 14:00
  • The SVG is user uploaded. I know that I can sanitize it, but I would prefer to put it inside an img tag over setting inner HTML. You do however answer my original quersion. – user1283776 Apr 17 '20 at 21:22

1 Answers1

2

I've used the base64 alternative (btoa encodes to base_64), changed the svg to a working one, and it works.

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="612" height="502.174" viewBox="0 65.326 612 502.174" class="logo"><ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/><path class="kiwi" d="M210.333 65.331c-105.966.774-222.682 85.306-209.277 211.118 4.303 40.393 18.533 63.704 52.171 79.03 36.307 16.544 57.022 54.556 50.406 112.954-9.935 4.88-17.405 11.031-19.132 20.015 7.531-.17 14.943-.312 22.59 4.341 20.333 12.375 31.296 27.363 42.979 51.72 1.714 3.572 8.192 2.849 8.312-3.078.17-8.467-1.856-17.454-5.226-26.933-2.955-8.313 3.059-7.985 6.917-6.106 6.399 3.115 16.334 9.43 30.39 13.098 5.392 1.407 5.995-3.877 5.224-6.991-1.864-7.522-11.009-10.862-24.519-19.229-4.82-2.984-.927-9.736 5.168-8.351l20.234 2.415c3.359.763 4.555-6.114.882-7.875-14.198-6.804-28.897-10.098-53.864-7.799-11.617-29.265-29.811-61.617-15.674-81.681 12.639-17.938 31.216-20.74 39.147 43.489-5.002 3.107-11.215 5.031-11.332 13.024 7.201-2.845 11.207-1.399 14.791 0 17.912 6.998 35.462 21.826 52.982 37.309 3.739 3.303 8.413-1.718 6.991-6.034-2.138-6.494-8.053-10.659-14.791-20.016-3.239-4.495 5.03-7.045 10.886-6.876 13.849.396 22.886 8.268 35.177 11.218 4.483 1.076 9.741-1.964 6.917-6.917-3.472-6.085-13.015-9.124-19.18-13.413-4.357-3.029-3.025-7.132 2.697-6.602 3.905.361 8.478 2.271 13.908 1.767 9.946-.925 7.717-7.169-.883-9.566-19.036-5.304-39.891-6.311-61.665-5.225-43.837-8.358-31.554-84.887 0-90.363 29.571-5.132 62.966-13.339 99.928-32.156 32.668-5.429 64.835-12.446 92.939-33.85 48.106-14.469 111.903 16.113 204.241 149.695 3.926 5.681 15.819 9.94 9.524-6.351-15.893-41.125-68.176-93.328-92.13-132.085-24.581-39.774-14.34-61.243-39.957-91.247-21.326-24.978-47.502-25.803-77.339-17.365-23.461 6.634-39.234-7.117-52.98-31.273-29.365-51.617-81.947-74.215-137.452-73.811zM445.731 203.01c6.12 0 11.112 4.919 11.112 11.038 0 6.119-4.994 11.111-11.112 11.111s-11.038-4.994-11.038-11.111a11.01 11.01 0 0111.038-11.038z"/></svg>`;

function Home({ svg }) {
  return (
    <div>
      <img src={`data:image/svg+xml;base64,${btoa(svg)}`} alt="" width="100" height="100" />
    </div>
  );
}

ReactDOM.render(<Home svg={svg} />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
felixmosh
  • 32,615
  • 9
  • 69
  • 88