WB
Web Bae•11mo ago
Caerus

Custom SVG not working

Hi there, the custom SVG function does not seem to be working for me. I have an image that is 16:9 ratio, and I have made a similar SVG in Figma. However, the SVG does not seem to render properly in the clipper. I've attached a copy of the SVG, properties of the image I am clipping, and how it looked in the viewer (as well as after being clipped).
7 Replies
AtomicZBRA
AtomicZBRA•11mo ago
Hey @Caerus I dont think you attached the view after it's been clipped in the designer, I just tried this out with your svg and it's looking okay but I'd be curious to see how it's rendering for you!
Caerus
CaerusOP•11mo ago
@AtomicZBRA here you go! It doesn't render correctly either
No description
AtomicZBRA
AtomicZBRA•11mo ago
gotcha i see what you're saying let me play around a bit see if i can get it
Caerus
CaerusOP•11mo ago
Thank you for your help! 🙂
AtomicZBRA
AtomicZBRA•11mo ago
Alright so I think this has been an issue in the past and I thought there was an update for the app but I'm getting the same problem as you, I do have a work around though if you're up for it! And then when web bae is back from his vacay I'll talk to him more about the issue! Basically for the element you're trying to clip, after you applied the clipping path from clip path bae, 1. click the element you're applying it to and navigate over to where the custom attributes would be in the settings panel (press d), 2. from there you'll see there's a new custom attribute that the app put's on it called style, and the value will be something like clip-path: somefileid 3. delete what's in the value field and paste this instead:
clip-path: polygon( 100% 4.444%,100% 4.444%,99.967% 3.724%,99.873% 3.04%,99.721% 2.402%,99.518% 1.82%,99.268% 1.302%,98.976% 0.858%,98.649% 0.496%,98.29% 0.227%,97.905% 0.058%,97.5% 0%,79.063% 0%,79.063% 0%,78.657% 0.058%,78.272% 0.227%,77.914% 0.496%,77.586% 0.858%,77.295% 1.302%,77.045% 1.82%,76.842% 2.402%,76.69% 3.04%,76.595% 3.724%,76.563% 4.444%,76.563% 9.444%,76.563% 9.444%,76.53% 10.165%,76.435% 10.849%,76.283% 11.487%,76.08% 12.069%,75.83% 12.587%,75.539% 13.031%,75.211% 13.393%,74.853% 13.662%,74.468% 13.831%,74.063% 13.889%,2.5% 13.889%,2.5% 13.889%,2.094% 13.947%,1.71% 14.115%,1.351% 14.385%,1.024% 14.746%,0.732% 15.191%,0.482% 15.709%,0.279% 16.291%,0.127% 16.929%,0.033% 17.612%,0% 18.333%,0% 48.889%,0% 48.889%,0.033% 49.61%,0.127% 50.294%,0.279% 50.931%,0.482% 51.514%,0.732% 52.032%,1.024% 52.476%,1.351% 52.837%,1.71% 53.107%,2.094% 53.275%,2.5% 53.333%,6.875% 53.333%,6.875% 53.333%,7.281% 53.392%,7.665% 53.56%,8.024% 53.829%,8.351% 54.191%,8.643% 54.635%,8.893% 55.153%,9.096% 55.735%,9.248% 56.373%,9.342% 57.057%,9.375% 57.778%,9.375% 95.556%,9.375% 95.556%,9.408% 96.276%,9.502% 96.96%,9.654% 97.598%,9.857% 98.18%,10.107% 98.698%,10.399% 99.142%,10.726% 99.504%,11.085% 99.773%,11.469% 99.942%,11.875% 100%,86.563% 100%,86.563% 100%,86.968% 99.942%,87.353% 99.773%,87.711% 99.504%,88.039% 99.142%,88.33% 98.698%,88.58% 98.18%,88.783% 97.598%,88.935% 96.96%,89.03% 96.276%,89.063% 95.556%,89.063% 93.333%,89.063% 93.333%,89.095% 92.612%,89.19% 91.929%,89.342% 91.291%,89.545% 90.709%,89.795% 90.191%,90.086% 89.746%,90.414% 89.385%,90.772% 89.115%,91.157% 88.947%,91.563% 88.889%,97.5% 88.889%,97.5% 88.889%,97.905% 88.831%,98.29% 88.662%,98.649% 88.393%,98.976% 88.031%,99.268% 87.587%,99.518% 87.069%,99.721% 86.487%,99.873% 85.849%,99.967% 85.165%,100% 84.444%,100% 4.444% );
clip-path: polygon( 100% 4.444%,100% 4.444%,99.967% 3.724%,99.873% 3.04%,99.721% 2.402%,99.518% 1.82%,99.268% 1.302%,98.976% 0.858%,98.649% 0.496%,98.29% 0.227%,97.905% 0.058%,97.5% 0%,79.063% 0%,79.063% 0%,78.657% 0.058%,78.272% 0.227%,77.914% 0.496%,77.586% 0.858%,77.295% 1.302%,77.045% 1.82%,76.842% 2.402%,76.69% 3.04%,76.595% 3.724%,76.563% 4.444%,76.563% 9.444%,76.563% 9.444%,76.53% 10.165%,76.435% 10.849%,76.283% 11.487%,76.08% 12.069%,75.83% 12.587%,75.539% 13.031%,75.211% 13.393%,74.853% 13.662%,74.468% 13.831%,74.063% 13.889%,2.5% 13.889%,2.5% 13.889%,2.094% 13.947%,1.71% 14.115%,1.351% 14.385%,1.024% 14.746%,0.732% 15.191%,0.482% 15.709%,0.279% 16.291%,0.127% 16.929%,0.033% 17.612%,0% 18.333%,0% 48.889%,0% 48.889%,0.033% 49.61%,0.127% 50.294%,0.279% 50.931%,0.482% 51.514%,0.732% 52.032%,1.024% 52.476%,1.351% 52.837%,1.71% 53.107%,2.094% 53.275%,2.5% 53.333%,6.875% 53.333%,6.875% 53.333%,7.281% 53.392%,7.665% 53.56%,8.024% 53.829%,8.351% 54.191%,8.643% 54.635%,8.893% 55.153%,9.096% 55.735%,9.248% 56.373%,9.342% 57.057%,9.375% 57.778%,9.375% 95.556%,9.375% 95.556%,9.408% 96.276%,9.502% 96.96%,9.654% 97.598%,9.857% 98.18%,10.107% 98.698%,10.399% 99.142%,10.726% 99.504%,11.085% 99.773%,11.469% 99.942%,11.875% 100%,86.563% 100%,86.563% 100%,86.968% 99.942%,87.353% 99.773%,87.711% 99.504%,88.039% 99.142%,88.33% 98.698%,88.58% 98.18%,88.783% 97.598%,88.935% 96.96%,89.03% 96.276%,89.063% 95.556%,89.063% 93.333%,89.063% 93.333%,89.095% 92.612%,89.19% 91.929%,89.342% 91.291%,89.545% 90.709%,89.795% 90.191%,90.086% 89.746%,90.414% 89.385%,90.772% 89.115%,91.157% 88.947%,91.563% 88.889%,97.5% 88.889%,97.5% 88.889%,97.905% 88.831%,98.29% 88.662%,98.649% 88.393%,98.976% 88.031%,99.268% 87.587%,99.518% 87.069%,99.721% 86.487%,99.873% 85.849%,99.967% 85.165%,100% 84.444%,100% 4.444% );
this is just applying the clip-path manually, instead of linking to the other svg that the app creates. (you'll also be able to delete that svg) Let me know if this works out, or if you'd I can create a loom going through the process
Caerus
CaerusOP•11mo ago
Yeap that works. Thank you for your help! May I ask how do you retrieve these values? I seem to be getting a different set of values when I click "copy as SVG" from the Figma board. Sorry I'm not very versed in SVG! Oh nevermind! I found a clip path generator online and managed to get the set of codes. Thanks again!
AtomicZBRA
AtomicZBRA•11mo ago
Yeah that’s exactly what I did haha, glad you got it working. I did see a thread where Keegan encountered this before but not sure how he fixed it
Want results from more Discord servers?
Add your server