Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Path> Appears to Break Image #1595

Closed
smilingkylan opened this issue May 29, 2021 · 1 comment
Closed

<Path> Appears to Break Image #1595

smilingkylan opened this issue May 29, 2021 · 1 comment
Labels

Comments

@smilingkylan
Copy link

Version 12.1.1

When I try to use <g> attributes it seems to work fine but the <path> attribute seems not to work. Also, onError seems not to be triggered. Can anyone figure out why this SVG image won't load correctly?

<?xml version="1.0" encoding="UTF-8"?>
<svg width="331px" height="221px" version="1.1" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331.22 121.95">
  <defs>
    <style>.cls-1{fill:#010035;}.cls-2{fill:#571aff;}</style>
  </defs>
  <title>telos-logo</title>
  <path class="cls-1" d="M0,33.08H12.53V5.85H26.06V33.08H42.77v11H26.06v56.13q0,4.51,2.25,6.26a10.28,10.28,0,0,0,6.43,1.75,19.55,19.55,0,0,0,4-.42q2-.41,3.17-.75h.5v11.69q-2.34.5-5.09.83a48.13,48.13,0,0,1-5.76.33q-8.36,0-13.7-3.76t-5.35-12.95V44.1H0Z"/>
  <path class="cls-1" d="M88.07,121.78a41.54,41.54,0,0,1-17.62-3.59,38.36,38.36,0,0,1-13.11-9.77A43.3,43.3,0,0,1,49.15,94a53.82,53.82,0,0,1-2.84-17.62,52.48,52.48,0,0,1,2.92-17.62,43.68,43.68,0,0,1,8.35-14.45A40,40,0,0,1,70.53,34.5,38.26,38.26,0,0,1,87.23,30.9a38.92,38.92,0,0,1,17.12,3.59,34.73,34.73,0,0,1,12.45,10,45.19,45.19,0,0,1,7.6,15.37A70.38,70.38,0,0,1,127,79.52H60.17a43,43,0,0,0,2.34,12.2A31.36,31.36,0,0,0,68,101.57a24.52,24.52,0,0,0,8.52,6.52,27,27,0,0,0,11.53,2.34q9.52,0,15.54-4.43T112,92.71h13.2q-3,14-12.7,21.55T88.07,121.78ZM87.23,41.6a26,26,0,0,0-10.69,2.09,22.48,22.48,0,0,0-7.93,5.85,31.78,31.78,0,0,0-5.35,8.85A40.87,40.87,0,0,0,60.5,69.33h52q-.67-13-7.1-20.38T87.23,41.6Z"/>
  <path class="cls-1" d="M139.39,0h13.53V119.44H139.39Z"/>
  <path class="cls-2" d="M207.6,121.78a47.65,47.65,0,0,1-18.94-3.59A42.36,42.36,0,0,1,165.26,94a50.32,50.32,0,0,1,0-35.25,42.36,42.36,0,0,1,23.4-24.22,51.73,51.73,0,0,1,37.88,0,43,43,0,0,1,14.3,9.77,41.94,41.94,0,0,1,9,14.45,51.71,51.71,0,0,1,0,35.25,41.91,41.91,0,0,1-9,14.45,43,43,0,0,1-14.3,9.77A47.65,47.65,0,0,1,207.6,121.78Z"/><path class="cls-1" d="M297.14,121.95q-17.88,0-27.56-7.94T258.89,91.38h13.87a23.69,23.69,0,0,0,2.84,9.35,17.69,17.69,0,0,0,5.43,5.85,21.59,21.59,0,0,0,7.43,3.09,41.88,41.88,0,0,0,9,.92q10.69,0,15.37-4.09a12.91,12.91,0,0,0,4.68-10.11,13.21,13.21,0,0,0-1.25-6.1,10.46,10.46,0,0,0-4-4.09,27.89,27.89,0,0,0-7-2.84Q301,82.19,295,80.85q-6.35-1.33-12.19-2.84a36.46,36.46,0,0,1-10.27-4.26,21.1,21.1,0,0,1-7.1-7.27Q262.73,62,262.73,55q0-10.86,7.94-17.29t23.14-6.43q16.2,0,24.31,7.18t9.61,19.88H313.85q-1-8.52-5.85-12.45t-14.53-3.93q-9.36,0-13.36,3.59a11.34,11.34,0,0,0-4,8.77,10.19,10.19,0,0,0,1.5,5.76,11.35,11.35,0,0,0,4.51,3.76,33.22,33.22,0,0,0,7.35,2.51q4.34,1,9.86,2.17,6.51,1.34,12.28,2.92a35.51,35.51,0,0,1,10.19,4.51,20.71,20.71,0,0,1,6.93,7.6q2.5,4.68,2.51,12.19a24.92,24.92,0,0,1-2.51,11.44,22.6,22.6,0,0,1-7,8.19,32.48,32.48,0,0,1-10.77,4.93A53.48,53.48,0,0,1,297.14,121.95Z"/>
</svg>
@bohdanprog
Copy link
Member

I think it isn't a relevant issue. I tried to render your SVG, and everything worked well. Here is an example:

 import {SvgCss} from 'react-native-svg/css';
export default function App() {
  return (
    <SvgCss
      xml={`
        <?xml version="1.0" encoding="UTF-8"?>
        <svg width="331px" height="221px" version="1.1" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331.22 121.95">
          <defs>
            <style>.cls-1{fill:#010035;}.cls-2{fill:#571aff;}</style>
          </defs>
          <title>telos-logo</title>
          <path class="cls-1" d="M0,33.08H12.53V5.85H26.06V33.08H42.77v11H26.06v56.13q0,4.51,2.25,6.26a10.28,10.28,0,0,0,6.43,1.75,19.55,19.55,0,0,0,4-.42q2-.41,3.17-.75h.5v11.69q-2.34.5-5.09.83a48.13,48.13,0,0,1-5.76.33q-8.36,0-13.7-3.76t-5.35-12.95V44.1H0Z"/>
          <path class="cls-1" d="M88.07,121.78a41.54,41.54,0,0,1-17.62-3.59,38.36,38.36,0,0,1-13.11-9.77A43.3,43.3,0,0,1,49.15,94a53.82,53.82,0,0,1-2.84-17.62,52.48,52.48,0,0,1,2.92-17.62,43.68,43.68,0,0,1,8.35-14.45A40,40,0,0,1,70.53,34.5,38.26,38.26,0,0,1,87.23,30.9a38.92,38.92,0,0,1,17.12,3.59,34.73,34.73,0,0,1,12.45,10,45.19,45.19,0,0,1,7.6,15.37A70.38,70.38,0,0,1,127,79.52H60.17a43,43,0,0,0,2.34,12.2A31.36,31.36,0,0,0,68,101.57a24.52,24.52,0,0,0,8.52,6.52,27,27,0,0,0,11.53,2.34q9.52,0,15.54-4.43T112,92.71h13.2q-3,14-12.7,21.55T88.07,121.78ZM87.23,41.6a26,26,0,0,0-10.69,2.09,22.48,22.48,0,0,0-7.93,5.85,31.78,31.78,0,0,0-5.35,8.85A40.87,40.87,0,0,0,60.5,69.33h52q-.67-13-7.1-20.38T87.23,41.6Z"/>
          <path class="cls-1" d="M139.39,0h13.53V119.44H139.39Z"/>
          <path class="cls-2" d="M207.6,121.78a47.65,47.65,0,0,1-18.94-3.59A42.36,42.36,0,0,1,165.26,94a50.32,50.32,0,0,1,0-35.25,42.36,42.36,0,0,1,23.4-24.22,51.73,51.73,0,0,1,37.88,0,43,43,0,0,1,14.3,9.77,41.94,41.94,0,0,1,9,14.45,51.71,51.71,0,0,1,0,35.25,41.91,41.91,0,0,1-9,14.45,43,43,0,0,1-14.3,9.77A47.65,47.65,0,0,1,207.6,121.78Z"/><path class="cls-1" d="M297.14,121.95q-17.88,0-27.56-7.94T258.89,91.38h13.87a23.69,23.69,0,0,0,2.84,9.35,17.69,17.69,0,0,0,5.43,5.85,21.59,21.59,0,0,0,7.43,3.09,41.88,41.88,0,0,0,9,.92q10.69,0,15.37-4.09a12.91,12.91,0,0,0,4.68-10.11,13.21,13.21,0,0,0-1.25-6.1,10.46,10.46,0,0,0-4-4.09,27.89,27.89,0,0,0-7-2.84Q301,82.19,295,80.85q-6.35-1.33-12.19-2.84a36.46,36.46,0,0,1-10.27-4.26,21.1,21.1,0,0,1-7.1-7.27Q262.73,62,262.73,55q0-10.86,7.94-17.29t23.14-6.43q16.2,0,24.31,7.18t9.61,19.88H313.85q-1-8.52-5.85-12.45t-14.53-3.93q-9.36,0-13.36,3.59a11.34,11.34,0,0,0-4,8.77,10.19,10.19,0,0,0,1.5,5.76,11.35,11.35,0,0,0,4.51,3.76,33.22,33.22,0,0,0,7.35,2.51q4.34,1,9.86,2.17,6.51,1.34,12.28,2.92a35.51,35.51,0,0,1,10.19,4.51,20.71,20.71,0,0,1,6.93,7.6q2.5,4.68,2.51,12.19a24.92,24.92,0,0,1-2.51,11.44,22.6,22.6,0,0,1-7,8.19,32.48,32.48,0,0,1-10.77,4.93A53.48,53.48,0,0,1,297.14,121.95Z"/>
        </svg>
        `}
    />
  );
}

But if you still have any questions, feel free to ask them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants