Skip to main content
Mark Pad Creative
Participant
September 21, 2021
Answered

Illustrator SVG export circle (O character) offset problem

  • September 21, 2021
  • 5 replies
  • 3822 views

When I export artwork as an SVG, the Os (circles) within the text are misaligned and filled incorrectly (see attached).

 

I converted the type to shapes before exporting. Same problem.

 

Any ideas?

This topic has been closed for replies.
Correct answer Anshul_Saini

Thank you for sharing the details. Is there any particular reason you are using "Export As"? I suggest you to do " File > Save As > SVG" rather than export for better output. I tried saving the SVG file using Save As, and it exported without any issues. I hope it helps!

 

Regards,

Anshul Saini

5 replies

Participant
October 3, 2024

My lightroom app haven't opened for some weeks now, please what could be the issue?

Monika Gause
Community Expert
Community Expert
October 3, 2024
Community Expert
September 25, 2021

Another note on export to or save as SVG:

 

If you plan to place the SVG file in InDesign for Publish Online to preserve vector outlines in the endproduct for example, you must disable option [ ] Responsive. That would avoid severe issues with scaling the graphic in InDesign. No problem with export to PDF, but a bug with Publish Online.

 

Especially see into:

https://community.adobe.com/t5/indesign-discussions/images-not-exporting-properly-when-publishing-online/m-p/12357366#M443485

 

Regards,
Uwe Laubender

( ACP )

Monika Gause
Community Expert
Community Expert
September 25, 2021

That options doesn't make a lot of sense when publishing on the web either. Web developers don't like it a lot and they can invoke it in the HTML code if needed.

manal shanableh
Legend
September 24, 2021

I used to create many icons with text and illustrations and exported to svg files for final output, i suggest to remove any clipping mask from the O (when created outline, and use shape builder tool to make empty from inside.

make it simple as possiple

 

when export, try to use export > export as> svg  with the following options.

 

Mark Pad Creative
Participant
September 22, 2021

Thanks for getting back to me. To answer your questions...

  • I am using File > Export > Export As, then choosing SVG as format
  • I have attached a screenshot of my settings (or see https://share.nim.bz/BluxA72K)
  • I outlined the text before exporting via Type > Create Outlines
  • The original font is called BECKMAN
  • Layers are also visible in the attached screenshot
  • I cannot attach the AI file so please see https://share.nim.bz/GGupjndL
Anshul_Saini
Community Manager
Anshul_SainiCommunity ManagerCorrect answer
Community Manager
September 24, 2021

Thank you for sharing the details. Is there any particular reason you are using "Export As"? I suggest you to do " File > Save As > SVG" rather than export for better output. I tried saving the SVG file using Save As, and it exported without any issues. I hope it helps!

 

Regards,

Anshul Saini

Mark Pad Creative
Participant
September 24, 2021

How interesting! That appears to have worked!

 

I was using "Export As" since that's the way I had always done it in order to use on the web.

 

I wonder what the difference is between the two approaches? I can see some different options, like which SVG version to use, and I don't get a choice over CSS implementation, but otherwise, all good.

 

Thanks!

Anshul_Saini
Community Manager
Community Manager
September 21, 2021

Hi there,

 

Sorry about the trouble. Could you please share a few more details like:

  • Are you exporting the SVG as "Save As" or "Export As" or Collect for Export?
  • Screenshot of your export settings.
  • Did you outline the text or select the "Convert to Outline" Type option while exporting the SVG?
  • Which font is this?
  • Please share the screenshot of your layer panel and expand all the groups.
  • Is the issue happening while exporting a specific document? If yes, could you please share the document with us? You can upload it to the Creative Cloud (https://helpx.adobe.com/in/creative-cloud/help/share.html) and share the download link.

 

We are here to help. We just need more information.

 

Thanks & Regards,

Anshul Saini