Artifacts appear when rendering svg, how to remove them?

M
Marat Ivanov2019-05-02 11:17:40
css
Marat Ivanov, 2019-05-02 11:17:40
Here is such an svg, I copied it from the site, it looks normal there, it looks normal in Photoshop, but when you translate it into a react component, an artifact pops up during rendering.
the component itself:
const Title = ({ title }) => (
    <div className="title-wrapper">
        <svg id="Layer_1"  xmlns="http://www.w3.org/2000/svg" width="403" height="39" viewBox="0 0 403 39">
            <path className="cls-1" d="M53.71,24a8.29,8.29,0,0,0,3.16,2.13,11.88,11.88,0,0,0,4.51.76,19.39,19.39,0,0,0,2.4-.16,6.84,6.84,0,0,0,2-.51c0.6-.18,1.12-0.43,1.63-0.6s0.85-.43,1.19-0.59L68,23.77c-0.34.16-.67,0.34-1,0.51s-0.69.25-1.12,0.43a7.52,7.52,0,0,1-1.37.25,11,11,0,0,1-1.79.09,5.84,5.84,0,0,1-3.14-.76,6.32,6.32,0,0,1-2-2,9.78,9.78,0,0,1-.92-3,24.74,24.74,0,0,1-.27-3.74c0-1,.09-2.13.18-3.25a7.71,7.71,0,0,1,.76-2.89A6,6,0,0,1,59,7.32a5.43,5.43,0,0,1,3.07-.85,5.21,5.21,0,0,1,3.07.94,4.37,4.37,0,0,1,1.62,2.89h1.37V6.14C67.7,6,67.28,5.8,66.76,5.62a17.14,17.14,0,0,0-9.55.18A8.72,8.72,0,0,0,54,8a9.33,9.33,0,0,0-1.88,3.49,16,16,0,0,0-.6,4.68,14.25,14.25,0,0,0,.6,4.43A6.65,6.65,0,0,0,53.71,24h0Z"/>
            <path className="cls-1" d="M137.09,26.23a7.32,7.32,0,0,0,2.82-.85,4.73,4.73,0,0,0,2-2.13,8,8,0,0,0,.78-3.83,7.86,7.86,0,0,0-.51-3,4.61,4.61,0,0,0-1.62-2,8.61,8.61,0,0,0-2.91-1.12,22,22,0,0,0-4.35-.34h-1.78v-5a1.13,1.13,0,0,1,.34-1,2.63,2.63,0,0,1,1.37-.18h2.56a12.67,12.67,0,0,1,2,.09,2.23,2.23,0,0,1,1.19.43,2.38,2.38,0,0,1,.78,1,11.14,11.14,0,0,1,.59,1.79h1.12V5.37h-15.7V6c1,0,1.28.83,1.28,1.7V24c0,0.92-.11,1.7-1.28,1.7v0.69h7.94a21.75,21.75,0,0,0,3.48-.18h0Zm-5.18-1.53a0.79,0.79,0,0,1-.27-0.6c0-.25-0.09-0.6-0.09-1V14.22h1.79a4.28,4.28,0,0,1,3.5,1.28,6.6,6.6,0,0,1,1,4.1,9.22,9.22,0,0,1-.36,3,4,4,0,0,1-.92,1.7,5.41,5.41,0,0,1-1.28.76,9.13,9.13,0,0,1-1.54.16,8.83,8.83,0,0,1-1.19-.16,1.85,1.85,0,0,1-.67-0.34h0Z"/>
            <path className="cls-1" d="M114.69,25.72c-1,0-1.28-.83-1.28-1.7V18.14h2.13a18,18,0,0,0,3.14-.27,7.77,7.77,0,0,0,2.65-.92,4.75,4.75,0,0,0,1.79-2.06,7.9,7.9,0,0,0,.67-3.48,8.22,8.22,0,0,0-.59-3.25,5.3,5.3,0,0,0-1.7-1.88A5.77,5.77,0,0,0,119,5.53c-0.92-.09-1.86-0.16-2.89-0.16h-8.35V6c1,0,1.28.83,1.28,1.7V23.92c0,1-.2,1.7-1.28,1.7v0.69h6.91v-0.6h0Zm-1.21-18c0-1.12.75-1.1,1.7-1.1,3.05,0,3.92,1.92,3.92,4.59a8.59,8.59,0,0,1-.76,4.08,2.91,2.91,0,0,1-2.73,1.45h-2.13v-9h0Z"/>
            <path className="cls-1" d="M105,21.55h-1.37a15.19,15.19,0,0,1-.5,2,2.2,2.2,0,0,1-.69,1.12,1.69,1.69,0,0,1-1.19.43,14,14,0,0,1-2.13.09,11.75,11.75,0,0,1-2-.09,3.11,3.11,0,0,1-1.1-.34A0.9,0.9,0,0,1,95.58,24a4.62,4.62,0,0,1-.09-1.19V16.17h3.68c0.34,0,.67.09,1,0.09a4.18,4.18,0,0,1,1,.18,2.6,2.6,0,0,1,.85.34V14a2.47,2.47,0,0,1-.85.35,5.18,5.18,0,0,1-1,.16,3.91,3.91,0,0,1-1,.09H95.49v-7c0-.94.3-1.1,1.23-1.1h2.1a12.79,12.79,0,0,1,2,.09,2,2,0,0,1,1.19.43,2.2,2.2,0,0,1,.76,1,10.91,10.91,0,0,1,.6,1.79h1.1V5.37H89.77V6c1,0,1.28.83,1.28,1.7V23.92c0,0.92-.11,1.7-1.28,1.7v0.69H105V21.55Z"/>
            <path className="cls-1" d="M84.59,25.38a5.49,5.49,0,0,0,2-2.13,8,8,0,0,0,.76-3.83,7.86,7.86,0,0,0-.51-3,4.61,4.61,0,0,0-1.62-2,8.36,8.36,0,0,0-2.89-1.12A22.1,22.1,0,0,0,78,12.95H76.23v-5a1.18,1.18,0,0,1,.34-1,2.7,2.7,0,0,1,1.37-.18h2.56c0.75,0,2.61,0,3.16.51a2.49,2.49,0,0,1,.76,1,10.91,10.91,0,0,1,.6,1.79h1.1V5.37H70.42V6c1,0,1.28.83,1.28,1.7V23.92c0,0.92-.11,1.7-1.28,1.7v0.78h7.94c2.06,0,4.37,0,6.23-1h0Zm-8-.67a2.8,2.8,0,0,1-.34-1.63V14.22H78a4.3,4.3,0,0,1,3.5,1.28,6.61,6.61,0,0,1,1,4.1,9.82,9.82,0,0,1-.34,3,4,4,0,0,1-.94,1.7A5.41,5.41,0,0,1,80,25a6.38,6.38,0,0,1-2.72,0,1.94,1.94,0,0,1-.69-0.34h0Z"/><rect className="cls-2" x="51.33" y="32.37" width="351.67" height="2.04"/>
            <path className="cls-1" d="M193,25.72c-1,0-1.28-.83-1.28-1.7V7.84c0-.94.14-1.7,1.28-1.7V5.37H186V6c1,0,1.28.83,1.28,1.7V23.92c0,1-.14,1.7-1.28,1.7v0.69H193v-0.6Zm5.11-.85c0.34,0.51.59,1.12,0.85,1.61l7.16,0.09c-0.76-.76-1.44-1.53-2.22-2.29s-1.28-1.45-1.7-1.88l-1.79-2-1.62-1.88a23,23,0,0,1-1.44-1.88c-0.43-.59-0.94-1.35-1.37-2l0.34-.43c0.51-.67,1.1-1.37,1.79-2.22a28.3,28.3,0,0,1,2.13-2.47,27.65,27.65,0,0,1,2.22-2.31c0.76-.67,1.37-1.19,2-1.61h-4.94a12.61,12.61,0,0,1-.78,1.54,16.48,16.48,0,0,1-1.19,2c-0.43.69-.94,1.45-1.37,2.22s-0.92,1.45-1.44,2.13-0.94,1.37-1.37,1.88-0.76,1-1,1.44C192.69,17.29,197.73,24.28,198.07,24.86Z"/>
            <path className="cls-1" d="M147.07,23.85c0.27-1.21.76-2.91,1.46-5h6.73l0.94,2.73a24.54,24.54,0,0,1,.94,3.07,8,8,0,0,1,.43,1.86h5.36c-0.25-.43-0.5-1-0.85-1.7a23.87,23.87,0,0,1-1.19-3L156,8a7.49,7.49,0,0,1-.43-1.53,8.49,8.49,0,0,0-.16-1h-6.05V6.14a1.11,1.11,0,0,1,1.19,1.28,3.48,3.48,0,0,1-.25,1.37l-3.41,8.34c-0.6,1.54-1.21,2.91-1.63,3.92s-0.85,2-1.1,2.64-0.6,1.28-.85,1.7-0.43.76-.6,1.1h3.84c0.09-.59.27-1.44,0.51-2.62h0Zm4.87-15,2.81,8.51H149Z"/>
            <path className="cls-1" d="M171,25.72h-0.18c-1,0-1.28-.83-1.28-1.7V15.93h8.19v8c0,1-.18,1.7-1.28,1.7v0.69h6.91V25.63c-1,0-1.28-.83-1.28-1.7V7.66c0-.92.14-1.7,1.28-1.7V5.37h-6.73V6c1,0,1.28.83,1.28,1.7v6.72h-8.19V7.75c0-.92.12-1.7,1.28-1.7V5.37h-6.91V6c1.28,0,1.28,1.26,1.28,2.22V24c0,1-.14,1.7-1.28,1.7v0.69H171V25.72Z"/>
            <path className="cls-1" d="M37.27,7.57L36,5.8,12.36,19.33,0.94,12.77A11.41,11.41,0,0,0,.43,15l12,6.9Z"/>
            <path className="cls-1" d="M12.36,24.44L0.09,17.38A7.06,7.06,0,0,0,0,18.75a20.3,20.3,0,0,0,40.59,0,19.48,19.48,0,0,0-2.22-9.2Z"/>
            <path className="cls-1" d="M34.36,4.1c-0.59-.6-1.19-1-1.79-1.54L12.36,14.22,2.65,8.69c-0.34.6-.67,1.28-1,2l10.67,6.14Z"/>
            <path className="cls-1" d="M30.52,1.19A19.83,19.83,0,0,0,28.14,0L12.36,9.12l-7.07-4c-0.51.51-.94,1.12-1.46,1.7l8.45,4.86Z"/>
            <path className="cls-1" d="M231.83,25.72c-1,0-1.28-.83-1.28-1.7V20.45h2.13a18.24,18.24,0,0,0,3.16-.27,7.78,7.78,0,0,0,2.65-.94,4.6,4.6,0,0,0,1.79-2,7.93,7.93,0,0,0,.67-3.49,7.79,7.79,0,0,0-.6-3.23,5.14,5.14,0,0,0-1.7-1.88,5.62,5.62,0,0,0-2.47-.76c-0.94-.09-1.86-0.18-2.89-0.18h-2.73c0-.87.27-1.7,1.28-1.7h0V5.37h-6.91V6c1.1,0,1.28.69,1.28,1.61h-2.72c-1,0-2,.09-2.91.18a5.77,5.77,0,0,0-2.47.76,5.3,5.3,0,0,0-1.7,1.88,8.12,8.12,0,0,0-.59,3.23,7.93,7.93,0,0,0,.67,3.49,4.6,4.6,0,0,0,1.79,2,7.78,7.78,0,0,0,2.65.94,18,18,0,0,0,3.14.27h2.13V24c0,0.87-.25,1.7-1.28,1.7h0v0.6h6.91v-0.6h0Zm-5.7-15.66c0-1.12-.76-1.12-1.7-1.12a9.16,9.16,0,0,0-1.54.18c-2,.66-2.38,2.59-2.38,4.43a8.68,8.68,0,0,0,.76,4.08A2.91,2.91,0,0,0,224,19.08h2.13v-9Zm4.51,0c0-1.12.76-1.12,1.7-1.12a9.16,9.16,0,0,1,1.54.18c2,0.66,2.38,2.59,2.38,4.43a8.68,8.68,0,0,1-.76,4.08,2.91,2.91,0,0,1-2.73,1.45h-2.13v-9Z"/>
            <path className="cls-1" d="M244.47,23.85c0.27-1.21.76-2.91,1.46-5h6.73l0.94,2.73a24.54,24.54,0,0,1,.94,3.07,8,8,0,0,1,.43,1.86h5.36c-0.25-.43-0.51-1-0.85-1.7a23.87,23.87,0,0,1-1.19-3L253.42,8A7.49,7.49,0,0,1,253,6.47a8.49,8.49,0,0,0-.16-1h-6.05V6.14A1.11,1.11,0,0,1,248,7.41a3.48,3.48,0,0,1-.25,1.37l-3.41,8.34c-0.6,1.54-1.21,2.91-1.63,3.92s-0.85,2-1.1,2.64-0.6,1.28-.85,1.7-0.43.76-.6,1.1H244c0.09-.59.27-1.44,0.51-2.62h0Zm4.87-15,2.81,8.51h-5.79Z"/>
            <path className="cls-1" d="M268.94,25.72c-1,0-1.28-.83-1.28-1.7V7.84c0-.94.12-1.7,1.28-1.7V5.37H262V6c1,0,1.28.83,1.28,1.7V23.92c0,1-.14,1.7-1.28,1.7v0.69h6.91v-0.6Zm5.11-.85c0.34,0.51.59,1.12,0.85,1.61l7.16,0.09c-0.76-.76-1.46-1.53-2.22-2.29s-1.28-1.45-1.7-1.88l-1.79-2-1.62-1.88a23.26,23.26,0,0,1-1.46-1.88c-0.43-.59-0.92-1.35-1.35-2l0.34-.43c0.51-.67,1.1-1.37,1.79-2.22a28.3,28.3,0,0,1,2.13-2.47,27.65,27.65,0,0,1,2.22-2.31,23.73,23.73,0,0,1,2-1.61h-4.94a12.61,12.61,0,0,1-.78,1.54,16.48,16.48,0,0,1-1.19,2c-0.43.69-.94,1.45-1.37,2.22s-0.94,1.45-1.44,2.13-0.94,1.37-1.37,1.88-0.76,1-1,1.44l1.28,1.79S273.7,24.28,274.05,24.86Z"/>
            <path className="cls-1" d="M393.11,7.93a1.13,1.13,0,0,1,.34-1,2.63,2.63,0,0,1,1.37-.18h2.56a12.67,12.67,0,0,1,2,.09,2.18,2.18,0,0,1,2,1.45,11.14,11.14,0,0,1,.59,1.79H403V5.37H387.3V6c1.24,0,1.28,1.19,1.28,2.13V23.92c0,1-.12,1.7-1.28,1.7v0.78h7.08V25.63c-1.15,0-1.28-.73-1.28-1.7v-16h0Z"/>
            <path className="cls-1" d="M293.67,7.93a1.18,1.18,0,0,1,.34-1,9,9,0,0,1,3.16-.09,2.16,2.16,0,0,1,2,1.45,11.14,11.14,0,0,1,.59,1.79h1.12V5.37H282v4.68h1.12a11.14,11.14,0,0,1,.59-1.79,2.16,2.16,0,0,1,2-1.45,9,9,0,0,1,3.16.09,1.18,1.18,0,0,1,.34,1v16c0,1-.12,1.7-1.28,1.7v0.78H295V25.63c-1.15,0-1.28-.73-1.28-1.7v-16h0Z"/>
            <path className="cls-2" d="M311.66,26.9c-6.59,0-9.62-3.37-9.62-11C302,9,304.34,5,312.08,5c6.61,0,9.62,3.39,9.62,11,0,7-2.29,10.91-10,10.91h0Zm0.16-1.42c4.23,0,4.9-3.28,4.94-9,0.05-5.43-.55-10-4.85-10s-4.9,3.28-4.94,9c-0.05,5.44.55,10,4.85,10h0Z"/>
            <path className="cls-1" d="M331.42,25.72c-1,0-1.28-.83-1.28-1.7V18.14h2.13a18.24,18.24,0,0,0,3.16-.27,7.77,7.77,0,0,0,2.65-.92,4.75,4.75,0,0,0,1.79-2.06,7.9,7.9,0,0,0,.67-3.48A8.22,8.22,0,0,0,340,8.18a5.19,5.19,0,0,0-1.72-1.88,5.62,5.62,0,0,0-2.47-.76c-0.94-.09-1.86-0.16-2.89-0.16h-8.36V6a1.81,1.81,0,0,0,.43.09,1.37,1.37,0,0,1,.51.25,1.49,1.49,0,0,1,.27.51c0,0.25.07,0.51,0.07,0.85V23.92c0,1-.12,1.7-1.28,1.7v0.69h6.91v-0.6h0Zm-1.19-18c0-1.12.76-1.1,1.7-1.1,3,0,3.92,1.92,3.92,4.59a8.59,8.59,0,0,1-.76,4.08,2.91,2.91,0,0,1-2.73,1.45h-2.13v-9Z"/>
            <path className="cls-1" d="M372.14,25.72H372c-1,0-1.28-.83-1.28-1.7V15.93h8.19v8c0,1-.18,1.7-1.28,1.7v0.69h6.91V25.63c-1,0-1.28-.83-1.28-1.7V7.66c0-.9.12-1.7,1.28-1.7V5.37h-6.73V6c1,0,1.28.83,1.28,1.7v6.72h-8.19V7.75c0-.92.14-1.7,1.28-1.7V5.37h-6.91V6c1,0,1.28.83,1.28,1.7V24c0,1-.12,1.7-1.28,1.7v0.69h6.91V25.72Z"/>
            <path className="cls-2" d="M342.86,26.41V25.73c1.07-.23,1.21-0.53,1.21-1.67V7.71c0-1.15-.14-1.44-1.21-1.68V5.37h6.84V6c-1,.25-1.21.53-1.21,1.68V22.35l8.45-17h5.47V6c-1,.25-1.19.53-1.19,1.68V24.07c0,1.14.14,1.44,1.19,1.67v0.67h-6.82V25.73c1-.23,1.21-0.53,1.21-1.67V9.42l-8.45,17h-5.49Z"/>
        </svg>
        <h1 className="title">{ title }</h1>
    </div>

);
Help, pliz! Thanks everyone.
Reply
Answer the question
In order to leave comments, you need to log in
1 answer(s)
R
RAX7, 2019-05-02
@mrair
fill-rule lost
https://developer.mozilla.org/en-US/docs/Web/SVG/A...