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

Export to svg problem in Illustrator

Community Beginner ,
Jan 10, 2024 Jan 10, 2024

Copy link to clipboard

Copied

Good morning,,

I have a problem in Illustator when exporting to SVG, the image alignment is centered, but in previous versions it is aligned to the left by default, how do I solve it to align to the left?
(Sorry, google translator)

Roberto

export svg.jpg

 

 

TOPICS
Import and export

Views

346

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
Community Expert ,
Jan 10, 2024 Jan 10, 2024

Copy link to clipboard

Copied

So this image is showing what? The SVG after being embedded in your HTML? You can set the alignment up in the HTML code.

Votes

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 ,
Jan 10, 2024 Jan 10, 2024

Copy link to clipboard

Copied

The image shows the preview in the browser, but can I do it when saving or indicating in Illustrator its alignment to the left?

Votes

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 ,
Jan 10, 2024 Jan 10, 2024

Copy link to clipboard

Copied

Then probably your browser is set up differently?

What are you using the SVG for? Eventually it will be put on a website, right?

So does it matter how the preview is aligned?

Votes

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 ,
Jan 10, 2024 Jan 10, 2024

Copy link to clipboard

Copied

 
The file will be part of an invoice.


I managed to fix it indirectly, changing the text you see in the image in the "text editor" (notepad).

When recording in Illustrator to svg it does not assume the sheet/artboard. To solve this, I copied the arts to the old file, but this one returns to the center. Then i changed the text in the text editor, copying the old indications and it was aligned to the left again. As you see in the image when saving to svg (new versions of Illustrator), the file does not come with the "width" and "Height". I had help from a programmer to place this "nail". 

 

svg_error2.jpg

Votes

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 ,
Jan 10, 2024 Jan 10, 2024

Copy link to clipboard

Copied

But even the invoice will be assembled in another app. So it should not matter where the browser puts it.

How did you export the SVG? Did you experiment with the "Responsive" setting? Does that change anything?

Votes

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 ,
Jan 11, 2024 Jan 11, 2024

Copy link to clipboard

Copied

I found the solution in another case and it is working, but it is not very noticeable in the Portuguese (BR) version, the translation is terrible.

Tanks

https://community.adobe.com/t5/illustrator-discussions/how-to-get-rid-of-extra-white-space-in-svg-ex...

svg solution.png

Votes

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 ,
Jan 11, 2024 Jan 11, 2024

Copy link to clipboard

Copied

I'm using a German version - I feel you.

 

Please report to https://illustrator.uservoice.com 

Votes

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 ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

Thank you for everything.

Votes

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 ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

That's the 'responsive' option Monika mentioned. With it on, the file has no specific width/height and 'responds' to the viewer size (or your own CSS if you have it). With it off, it inherits a width/height from the artboard.

Votes

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 ,
Jan 18, 2024 Jan 18, 2024

Copy link to clipboard

Copied

That's right.

tks

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Have issues too. I've even started a new project and rebuilt it. I have a simple R with TM. The R clips and feather weirdly and the TM is ten miles away instead of right next to the R. Tried exporting as a PNG and bringing it back in ... that doesn't work either. Maybe I need Canva 😞  It's a bummer.

 

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Can you please describe your workflow in a way that one might have a chance to check it out?

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Sure! Thanks! 

 

Asset 19@1.5x.png

This is the png I get ^^^

 

This ^^^^ is the svg I get  Asset 10.png

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

And just how does that look in Illustrator?

Exactly how do you export the SVG?

Is that live type? Or did you outline it?

 

And also please describe step by step what you are doing as in

1.,

2.,

3. etc.

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

It looks fine in Illustrator. It's one R, a glyph of a particular font. It is not outlined.

The same R is used in the full spellout of the logo. It exports fine. It's just this one R we want to use as an icon.

I have tried exporting and gathering for export via the object menu. Both resulted in the same thing. This is the second build. I deleted the old Illustrator file and started over.  I've fiddled with all the options on svg export too.

 

 

 

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

And the PNG is fine. It's the SVG that won't cooperate.

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Did you try to increase the number of decimal places in the SVG export settings?

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

I have not. What would you suggest?

 

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Well, I increased it by six. The same result. Increased it by 25 still the same issue.

 

Votes

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 ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

Solved. I outlined the R. All good now. How strange though.

Votes

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 ,
Jan 17, 2024 Jan 17, 2024

Copy link to clipboard

Copied

What was the 'R' before if not outlines?

edit: Sorry, saw in your initial post. Perhaps the 'R' is a stylistic alternate in the font and is not properly specified in the SVG.

Votes

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 ,
Jan 17, 2024 Jan 17, 2024

Copy link to clipboard

Copied

I assume it was live text. Maybe some OpenType functionality used that is not supported in SVG.

Votes

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 ,
Jan 18, 2024 Jan 18, 2024

Copy link to clipboard

Copied

LATEST

It was text, a font. That R is one of the glyphs.

Votes

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