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

An SVG can't be converted #307

Open
NevisAdam opened this issue Apr 12, 2023 · 0 comments
Open

An SVG can't be converted #307

NevisAdam opened this issue Apr 12, 2023 · 0 comments

Comments

@NevisAdam
Copy link

What did you do?

I've pasted the following SVG into the editor:
<svg width="208" height="398" viewBox="0 0 208 398" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 20C20 16.134 23.134 13 27 13V13C30.866 13 34 16.134 34 20V20C34 23.866 30.866 27 27 27V27C23.134 27 20 23.866 20 20V20Z" fill="#EDF1F2"/> <path d="M42 13H114V27H42V13Z" fill="#EDF1F2"/> <path d="M20 48H60V58H20V48Z" fill="#EDF1F2"/> <path d="M100 76V62H20V76H100Z" fill="#EDF1F2"/> <path d="M20 84H60V94H20V84Z" fill="#EDF1F2"/> <path d="M100 112V98H20V112H100Z" fill="#EDF1F2"/> <path d="M20 120H60V130H20V120Z" fill="#EDF1F2"/> <path d="M100 148V134H20V148H100Z" fill="#EDF1F2"/> <path d="M20 172H60V182H20V172Z" fill="#EDF1F2"/> <path d="M100 200V186H20V200H100Z" fill="#EDF1F2"/> <path d="M20 204H188V228H20V204Z" fill="#EDF1F2"/> <path d="M76 243C76 236.925 71.0751 232 65 232H31C24.9249 232 20 236.925 20 243C20 249.075 24.9249 254 31 254H65C71.0751 254 76 249.075 76 243Z" fill="#EDF1F2"/> <path d="M20 270H60V280H20V270Z" fill="#EDF1F2"/> <path d="M140 284H20V298H140V284Z" fill="#EDF1F2"/> <path d="M20 302H116V316H20V302Z" fill="#EDF1F2"/> <path d="M60 332H20V342H60V332Z" fill="#EDF1F2"/> <path d="M20 346H140V360H20V346Z" fill="#EDF1F2"/> <path d="M116 364H20V378H116V364Z" fill="#EDF1F2"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0H12C5.37258 0 0 5.37258 0 12V386C0 392.627 5.37259 398 12 398H196C202.627 398 208 392.627 208 386V12C208 5.37258 202.627 0 196 0ZM4 12C4 7.58172 7.58172 4 12 4H196C200.418 4 204 7.58172 204 12V36H4V12ZM4 40H204V160H4V40ZM4 164V386C4 390.418 7.58173 394 12 394H196C200.418 394 204 390.418 204 386V164H4Z" fill="#EDF1F2"/> </svg>

What did you expect to happen?

To convert into a proper content-loader.

What happened actually?

The conversion happens but the preview doesn't show anything and got these errors in the developer console:

  • Error: attribute d: Expected arc flag ('0' or '1'), "…M 4 12 a 8 8 0 18 -8 h 184 a 8 8…".
  • Error: attribute d: Expected number, "… 7 0 1114 0 7 7 a 0 11 -14 0 z M…".

Which versions of react-content-loader, and which browser are affected by this issue?

6.0.3 is the version of the react-content-loader. I'm using angular and there I've also got the above mentioned issues when pasted into my code. I'm using chrome (111.0.5563.147) on Windows 10 and on Ubuntu but it also happens in Firefox on Windows (it shows the basic rectangle but not the details inside). Also I'd like to mention that I've exported this SVG from a Figma document (Figma)

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

No branches or pull requests

1 participant