0

I am trying to embbed svg file on react component but it attaches as flattaned. Is there any way to post it as pure svg.

please see the where its posted
https://abk-react-portfolio.herokuapp.com/

and how its supposted to view like

https://abk-react-portfolio.herokuapp.com/static/media/wordcloud_ahmet.445abff9.svg

i used like this way

import WordCloud from '../assets/images/landing/wordcloud_ahmet.svg';

thanks in advance.

ahmetburhan
  • 1

1 Answers1

1

Well, u can inline simple svg, but u will have to convert all the style attributes inside svg into JSX type styles attributes, class to classNames.

This can be done for smaller svg file

Here is codepen example Inline SVG, 

    function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="70" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}


ReactDOM.render(<SvgWithXlink fill="violet" />, document.querySelector('body > div'));

Also refer this question for more info embedding-svg-into-reactjs

Since ur svg file is very big file, it would be better to flatten it,

If u import it by flattening it, It will also be easier to edit it in future, if u want to change something, by just importing it in any svg editor.

However, if u convert it into JSX style, it cannot be imported into any SVG editor

Gautam Naik
  • 8,990
  • 3
  • 27
  • 42