3

I have an SVG (originally made in Adobe Illustrator - AI and exported) which renders properly in browser and photoshop. But when I load it in sketch (where I really need it for an ios app mockup), it renders svg differently.

Am I hitting a sketch bug or there is an issue with the svg?

File in chrome/photoshop: photoshop

Same file in Sketch:

sketch

  • Is it possible to link to test documents that show the issue? Preferably the SVG and Sketch doc. – Marc Edwards Jun 1 '17 at 6:30
  • 1
    Was the SVG made in AI? I've seen this happen with shapes that have fx like distort/transform that were not Expanded when saved as SVG. – Alin Jun 1 '17 at 9:15
  • 2
    Check on the export settings, specifically the decimal places that it is set to. I ran into this problem exporting vector images to SVG out of Adobe Illustrator. The decimals setting was set to 0, so everything got rounded and looked really janky. – Andy Mercer Jun 1 '17 at 12:05
  • Thanks Andy! To what decimal value would you set it to? – zengr Jun 1 '17 at 17:22
  • Also updated the question - yes the file was originally created in AI and exported as svg. – zengr Jun 1 '17 at 18:01
1

So there are 2 possible fixes.

  1. Get rid of "clipping mask": Our designer who created the .ai just removed it. And it fixed the problem for me.
  2. Change decimal settings: As Andy Mercer commented, "Check on the export settings, specifically the decimal places that it is set to. I ran into this problem exporting vector images to SVG out of Adobe Illustrator. The decimals setting was set to 0, so everything got rounded and looked really janky."
1

I had similar issues when resizing an SVG image I drag'n'dropped into Sketch. Points that were anchored together in the original image (created using Illustrator) and looked OK after first importing the file to Sketch would suddenly get separated after resizing. What helped me get rid of this issue was creating a symbol out of the image. Afterwards, I could resize it normally and the points would still look correct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.