I'm trying to get a simple SVG graphic in my react app. But nothing is visible.

I created the graphic in Inkscape and got rid of (what I assumed was garbage ) extra code. Any help would be appreciated I'm a noob with SVGs

const test = () => {
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

I got it working. Apparently my problem was importing in camelCase instead of PascalCase.

import testSVG from '../src/ponents/test';

function App() {
    return <testSVG />;
}

import TestSVG from '../src/ponents/test';

function App() {
    return <TestSVG />;
}

Screenshot of Chrome Browser not working Screenshot of working SVG

I'm trying to get a simple SVG graphic in my react app. But nothing is visible.

I created the graphic in Inkscape and got rid of (what I assumed was garbage ) extra code. Any help would be appreciated I'm a noob with SVGs

const test = () => {
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

I got it working. Apparently my problem was importing in camelCase instead of PascalCase.

import testSVG from '../src/ponents/test';

function App() {
    return <testSVG />;
}

import TestSVG from '../src/ponents/test';

function App() {
    return <TestSVG />;
}

Screenshot of Chrome Browser not working Screenshot of working SVG

• javascript
• reactjs
• svg

• Your code is working fine. What is the issue? Any error? – ravibagul91 Commented Aug 12, 2019 at 14:35

1 Answer 1

Your rendred element is,

<testsvg></testsvg>

it means youu have added your ponent like this,

<testsvg />

When you add element using lowercase name, React thinks it is simple HTML tag and not a React ponent.

Probably the issue with your Component name.

const test = () => {

You should use PascalCase name for your ponent, so your ponent should look like,

const Test = () => {   //Notice PacsalCase name
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

export default Test

Then you should import your ponent like this,

import Test from './Test'   //write correct filename

And finally usage,

<Test />

Demo