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

SVG File exported from Illustrator displaying wrong

New Here ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Hi there, 

 

I'm relatively new to using Illustrator so I apologise if this is a silly question. This SVG is exporting very differently from how it should be. After mucking around with the export settings a few times I've had these results:
 Screen Shot 2022-05-26 at 5.59.10 pm.pngScreen Shot 2022-05-26 at 5.53.42 pm.png

 

This is how the SVG is previewed in Illustrator: 

Screen Shot 2022-05-26 at 5.53.49 pm.png

I'm not sure if I've done something wrong while creating the SVG or if it is an exporting related issue. 

Any guidance would be much appreciated, I've spent hours googling with no luck. 

Thanks! 

TOPICS
How to , Import and export

Views

67

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 ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Which application are you using to preview the SVG?

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
New Here ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Just the latest version of Illustrator 

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 ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

In which application are the SVGs going to be used?

Illustrator is kind of famous for not being able to import its own SVGs. That has been improved in the latest versions, but it might still fail.

 

So can you try and open the SVGs in a browser such as Firefox or Chrome and see if they look correct? Or what about Inkscape? Does it show them correctly?

 

And then of course the application in which you want to use them. This should not be Illustrator. For Illustrator SVG should be a one direction file format: only out, not roundtrip. As long as you still work on a file, save it as an AI file.

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
New Here ,
May 26, 2022 May 26, 2022

Copy link to clipboard

Copied

Hi Monica, 

 

Just website graphics. I created these SVGs on Illustrator from scratch. They look fine until I export, I've tried opening them on multiple browsers and they show up the same. 

Appreciate your assistance!

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 ,
May 27, 2022 May 27, 2022

Copy link to clipboard

Copied

The photo is in a clipping mask, right?

 

There is currently a bug with clipping mask export if I remember that correctly. It has been discussed the recent days. https://community.adobe.com/t5/illustrator-discussions/saving-svgs-with-clip-paths-adds-extra-groups...

 

I don't know in which way it could affect positioning as well, but maybe dig deeper at that end?

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 ,
May 27, 2022 May 27, 2022

Copy link to clipboard

Copied

LATEST

Can we see your settings.

 

Try Save as SVG Use Artboards enabled and embed.

 

Screen Shot 2022-05-27 at 9.26.57 AM.png

 

I have an issue with the export that drops my blends, so try one of the other methods of making a .svg.

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