• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Help with .ai to svg, shapes and text not smooth, straight

New Here ,
Oct 08, 2022 Oct 08, 2022

Copy link to clipboard

Copied

I am a newbie so bear with me. I successfully created a calendar in AI. The calendar has line segments, rectangles, and text. It looks great in AI. When I prepare the file to download as an SVG and save as such, the text, rectangles, and lines are not smooth and exact; corners are messed up.
I tried smoothing, but that would take forever and didn't work anyway. I tried simplifying paths but that didn't work.
Any ideas?

I uploaded my SVG to Cricut and it works great, but again the lines are all wonky! I need perfect squares and lines. Help and thank you!

TOPICS
Draw and design , How to , Import and export , Tools

Views

53

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 09, 2022 Oct 09, 2022

Copy link to clipboard

Copied

Without a comparative screenshot for AI and info about your document and export settings we can't really tell you much. Looking at the SVG source code suggests that you eitehr designed it at a not so ideal scale or did not export it with adequate precision. Many of the paths and points have minute discrepancies in their values, which would explain why it looks jittery. Where those quantization problems come from is a whole different matter.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 09, 2022 Oct 09, 2022

Copy link to clipboard

Copied

If you want lines to be precice for a screen you may want to snap to pixel grid. Vector graphics are constrained by mathematics and sometimes a compromise is made to get smaller files where numbers are rounded up or down, which can cause minor discrepancies. (In  theory vectors are scalable without loss, but there is normally a rounding of decimals which makes this not quite true) Text uses a technology called hinting to balance out these kind of unevenness you describe, converting text to curves will remove this smart way of prioritising the way the shape will scale. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 09, 2022 Oct 09, 2022

Copy link to clipboard

Copied

Why are there so many anchors along straight lines?

Did you autotrace this?

This is the thing you need to address. Make a clean drawing.

 

Then when saving as an SVG enter a high Decimals setting like 5.

 

Aligning the objects to the pixel grid might make things worse. Exporting to SVG is not the use case it has been invented for.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Oct 10, 2022 Oct 10, 2022

Copy link to clipboard

Copied

LATEST

Hello @SunnyC1414,

 

Thanks for reaching out. As suggested by Monika, it would help if you redo this artwork. Kindly follow the suggestions shared in this help article to create pixel-perfect artwork (https://helpx.adobe.com/illustrator/how-to/pixel-perfect.html) and check if it helps.

 

Looking forward to hearing from you.

 

Thanks,

Anubhav

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines