React renders blank svg images

Question

I created an svg image to use in React, and saved it into a folder in src (I'm using react-create-app). Then I tried to import it:

import  waterDropPathEmpty from "../images/waterDropPathEmpty.svg";

And use it in a component

render() {
        return (
            <DataSection color="blue">
                <h3>Water Requirements</h3>
                <svg><img src={waterDropPathEmpty} /></svg>

The image is blank in the React component, but when I click on it and open the image in a separate tab, it shows up just fine. I tried the suggestions in this post, including importing as a ReactComponent, but had the same effect. It's just a blank square of the right height and width.

This is what the SVG looks like, in case maybe I'm missing something in the file - it was a quick and dirty tester image I created myself because I want to create some custom icons:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 200">
  <image id="Background" width="200" height="200" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAA8UlEQVR4nO3RQQHAQAwEobT+Pe/Z4DFY4Nu2C+OvwlIIphBMIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphBMIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphBMIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphBMIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphDJ3T0IYATEmP4svAAAAABJRU5ErkJggg=="/>
  <image x="44" y="4" width="110" height="171" xlink:href="data:img/png;base64,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"/>
</svg>

tarzen chugh · Answer 1 · 2021-08-01T18:53:59.353

Just import SVG directly as React components.

Reference - https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

There could be issue with your svg, you are trying to use png into svg, instead object tag is working fine. I have used another svg and it renders fine.

Working codesandbox link

import "./styles.css";
import { ReactComponent as Drop } from "./../public/drop.svg";
import logo from "./try2.svg";
import safari from "./safari.svg";

export default function App() {
  return (
    <div className="App">
      <h1>SVG 1 as React component</h1>
      <Drop />
      <h1>SVG 2 using object tag</h1>
      <object type="image/svg+xml" aria-label="logo" data={logo}></object>
      <h1>SVG 3 using img tag</h1>
      <img src={safari} alt="logo" />
    </div>
  );
}

React renders blank svg images

1 Answers1