Illustrator shifts embedded image when exporting to SVG

Community Beginner ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Hi all, I am trying to update my lab's website logo and as part of that I have placed an embedded image into the AI file. (My PI updated the "Q" with some unknown program, because I only have bitmaps of it) It looks great in Illusterator, but, like the title says, when I export it, it moves the embedded image so that it partially lays outside the artboard, which causes massive problems when loading in HTML (it is moving it a lot, not by a pixel or two). I have tried turning off responsive in the SVG dialog, using the "use artboard" option when exporting, (which, BTW, pointlessly adds a -01 to the end of the file when there is only one artboard, requiring manual renaming each time) editing the exported SVG after finishing in Illustrator, and all combinations of the above. I treid vectorizing the image, but in 2021, we're apparently still really, really bad at that (after vectorizing, when you go to export the SVG, or just make it pixel perfect, a TONN of cracks appear all over the image, rendering it unusable). Does anyone have any suggestions? I have added the image below in case that helps. Thank!

Views

361

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

correct answers 1 Correct answer

Community Beginner , Oct 24, 2021 Oct 24, 2021

It appears I have somehow accidently fixed this. I believe the only thing I changed was to upload the AI file to the cloud, but the next time I went to export, it just worked... I have no idea why, but appaerently if you are having any strage problems with AI files, try uploading it to the cloud.

Likes

Translate

Translate
Community Beginner ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Sorry, I made a mistake uploading the file, I uploaded the SVG that demonstrates the misalignment. I just tried to upload the actual AI file, but according to Adobe: "The attachment's logo_transparent.ai content type (application/postscript) does not match its file extension and has been removed." So, I guess Adobe does not know the correct format of Adobe Illustrator files (or otherwise they are very bad at error messages)...

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 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Hi there,

 

Sorry to hear about your experience. In addition to what Jacob has asked, you may share the document using Creative Cloud or any other cloud service you prefer. Just upload the file on drive and share the link with us. Additionally, let us know if you see this behavior in a specific file only. Please share version of OS & Illustrator as well.

This information would help us assist you accordingly.

 

Regards,

Ashutosh

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 Beginner ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Thanks! I am running Windows 11 and the latest version of Illustrator.

 

https://assets.adobe.com/id/urn:aaid:sc:US:ef6bffe0-9842-4e19-a23b-631c20a7a8c6?view=difile

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 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Moving thread to the Illustrator forum from Using the Community

 

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 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

David,

 

Maybe a silly question, but are you sure that the SVG artwork is aligned with the Artboard?

 

 

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 Beginner ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Yes, I did not do it at first, but have started. I have realized after playing around with it further that it is actually scaling the image as well. It seems when I have it aligned to the artboard, that acts like an anchor point and doesn't move, but the image is enlarged so that it still falls over the border on the opposite side.

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 Beginner ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

I have realized that it is scaling the image, not simply moving it. Before exporting to SVG, the embedded image is 89x89 points, but after exporting, it is magically made to be 95.55x95.55 points. Does anyone know how that could happen?

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 Beginner ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

It appears I have somehow accidently fixed this. I believe the only thing I changed was to upload the AI file to the cloud, but the next time I went to export, it just worked... I have no idea why, but appaerently if you are having any strage problems with AI files, try uploading it to the cloud.

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 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Thank you for sharing, David.

 

I wonder what you make of the mysterious scaling, Ashutosh.

 

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 ,
Apr 08, 2022 Apr 08, 2022

Copy link to clipboard

Copied

I am having exactly the same issue. 

I use the following settings when exporting. 

Styling: Presentation Attibutes

Font: SVG

Images: Embed

Object IDs: Layer names

Decimal: 2

No minify

No Responsive

 

I tried rolling back to previous versions, but it does not help. 

In all cases of exporting the image get a zoom factor on them. 

It happens with images that have been manually scaled in the mother 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
Community Expert ,
Apr 08, 2022 Apr 08, 2022

Copy link to clipboard

Copied

Exactly which issue?

Please tell us step by step what is happening.

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 ,
Apr 08, 2022 Apr 08, 2022

Copy link to clipboard

Copied

I have a file with a vector path overlaying an image. 

The vector path is matching what is on the image. 

 

Screenshot of mother file:

Pieter239585315f9x_0-1649444930725.png

I then export to SVG with the following settings:

Styling: Presentation Attibutes

Font: SVG

Images: Embed

Object IDs: Layer names

Decimal: 2

No minify

No Responsive

 

When I open the SVG, the underlying image has been scaled slightly, so that it doesn't match anymore. 

Pieter239585315f9x_1-1649444945128.png

 

I tested out various Illustrator versions, all with the same result. I found out that when the image is smaller than the artboard, the effect does not appear. What is your recommendation?

 

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 ,
Apr 09, 2022 Apr 09, 2022

Copy link to clipboard

Copied

A decimal setting of 2 might just be too low.

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 ,
Apr 10, 2022 Apr 10, 2022

Copy link to clipboard

Copied

At a first glance this seems to work indeed. Thank you!

Would be great if this could be automatically set right, or with the option to choose 'auto'. 

Now I have to guess and check everytime...

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 ,
Apr 11, 2022 Apr 11, 2022

Copy link to clipboard

Copied

LATEST

There is no "right" and also no "auto"

 

This option sets the decimal places and thus has an influence on file size. So you have to adjust it to the size of your artwork (larger artwork might need fewer decimal places) and how small you wish file size to be.

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