Application error: a client-side exception has occurred

[bufgix]

I got the error when I drop my SVG file to svgps.app

Application error: a client-side exception has occurred (see the browser console for more information).

I checked the browser console but didn't find anything usefully

error links: https://reactjs.org/docs/error-decoder.html/?invariant=62

SVG that I tried

Orginial SVG string (if github change content while uploading)

<svg width="210" height="229" viewBox="0 0 210 229" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_210_1354)">
<path d="M128.319 6L204.089 49.7455L123.526 189.284C114.824 204.356 95.5507 209.521 80.4779 200.819L59.2918 188.587C44.219 179.884 39.0547 160.611 47.7569 145.538L128.319 6Z" fill="white"/>
<path d="M128.319 6L204.089 49.7455L123.526 189.284C114.824 204.356 95.5507 209.521 80.4779 200.819L59.2918 188.587C44.219 179.884 39.0547 160.611 47.7569 145.538L128.319 6Z" fill="url(#paint0_linear_210_1354)"/>
</g>
<rect x="128.319" y="6" width="87.4911" height="140.064" transform="rotate(30 128.319 6)" fill="url(#paint1_linear_210_1354)"/>
<rect x="128.319" y="6" width="87.4911" height="140.064" transform="rotate(30 128.319 6)" fill="black" fill-opacity="0.15"/>
<rect x="128.319" y="6" width="87.4911" height="122.93" transform="rotate(30 128.319 6)" fill="black" fill-opacity="0.2" style="mix-blend-mode:overlay"/>
<rect x="128.319" y="6" width="87.4911" height="121.685" transform="rotate(30 128.319 6)" fill="url(#paint2_linear_210_1354)"/>
<path d="M190.536 139L191.8 144.887C193.025 150.591 197.481 155.047 203.186 156.272L209.073 157.536L203.186 158.8C197.481 160.025 193.025 164.481 191.8 170.186L190.536 176.073L189.272 170.186C188.047 164.481 183.591 160.025 177.887 158.8L172 157.536L177.887 156.272C183.591 155.047 188.047 150.591 189.272 144.887L190.536 139Z" fill="white"/>
<path d="M43.2435 45L45.163 53.9389C46.3879 59.6431 50.8439 64.0991 56.5481 65.324L65.487 67.2435L56.5481 69.163C50.8439 70.3879 46.3879 74.8439 45.163 80.5481L43.2435 89.487L41.324 80.5481C40.0991 74.8439 35.6431 70.3879 29.9389 69.163L21 67.2435L29.9389 65.324C35.6431 64.0991 40.0991 59.6431 41.324 53.9389L43.2435 45Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6827 168H12.9754V180.975H16.6827V168ZM29.658 180.975H16.6826V184.683L12.9754 184.683V197.658H16.6827V184.683L29.658 184.683V180.975ZM0 180.975H12.9754V184.683H0V180.975Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.512 206H149.731V215.732H152.512V206ZM162.244 215.732H152.512V218.512H162.244V215.732ZM140 215.732H149.732V218.512L152.512 218.512V228.243H149.731V218.512L140 218.512V215.732Z" fill="white"/>
<rect x="128.401" y="0.502777" width="93.3364" height="113.002" transform="rotate(30 128.401 0.502777)" fill="url(#paint3_linear_210_1354)"/>
<defs>
<filter id="filter0_ii_210_1354" x="43.5295" y="3.71488" width="160.559" height="201.331" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="9.9974"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_210_1354"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-2.28512"/>
<feGaussianBlur stdDeviation="6.58818"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_210_1354" result="effect2_innerShadow_210_1354"/>
</filter>
<linearGradient id="paint0_linear_210_1354" x1="166.204" y1="27.8728" x2="69.8848" y2="194.703" gradientUnits="userSpaceOnUse">
<stop stop-color="#EE9800"/>
<stop offset="1" stop-color="#FFCF34"/>
</linearGradient>
<linearGradient id="paint1_linear_210_1354" x1="172.065" y1="6" x2="172.065" y2="146.064" gradientUnits="userSpaceOnUse">
<stop stop-color="#FD9346"/>
<stop offset="1" stop-color="#FCD459"/>
</linearGradient>
<linearGradient id="paint2_linear_210_1354" x1="172.065" y1="6" x2="172.065" y2="127.685" gradientUnits="userSpaceOnUse">
<stop stop-color="#E6EDFF"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint3_linear_210_1354" x1="175.069" y1="0.502777" x2="175.069" y2="113.505" gradientUnits="userSpaceOnUse">
<stop offset="0.0731637" stop-color="#222222"/>
<stop offset="1" stop-color="#222222" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

Enviorment

OS: MacOs Monterey 12.5.1
Browser: Firefox Developer Edition 107.0b3 (64-bit)

[brkcrdk]

Hello @bufgix;

<rect x="128.319" y="6" width="87.4911" height="122.93" transform="rotate(30 128.319 6)" fill="black" fill-opacity="0.2" style="mix-blend-mode=overlay"/>

I checked your svg in detail and i saw that you put style attribute to rect element. As far as i know svg elements doesnt support style attribute like this but you can add your desired style attribute directly to them like this:

<rect x="128.319" y="6" width="87.4911" height="122.93" transform="rotate(30 128.319 6)" fill="black"  color="red" mix-blend-mode="overlay" />

To test this i modified another working svg that i have, i added style attribute like this to some of the rect element. That working svg wasnt working anymore on this app. When a user wants to import broken svgs like this these two will happen:

• Because our svgs saved on local storage we cant see our app without deleting icons from our storage.
• When we delete our storage this means we lose all of our icons which is not good thing i must say.

I think if we filter style attribute when we extract svgs, this issue will be prevented @aykutkardas. I want to try to fix this :)

[aykutkardas]

Thanks for the review. You can try this under a new issue. @brkcrdk