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

Help - exporting to SVG moves my text?

Community Beginner ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

Hello,

        I'm new to AI, I've been using InDesign for a few years but needed to upskill to create decent quality logos. I'm just finding my feet and enjoying the design but now I'm trying to export to SVG I just can't seem to get it right.

I've followed the user guide video for logos but when my SVG comes out my text has moved out of position.

Can anyone advise what my settings should be please?

Thank you very much in advance.

Lucy

Views

6.9K

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

Enthusiast , Apr 14, 2018 Apr 14, 2018

Hello,

to export a svg the text must be converted to path ... always!

Votes

Translate

Translate
Adobe
Enthusiast ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

Hello,

to export a svg the text must be converted to path ... always!

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 ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

Thank you very much Giordano. I’ll try it tomorrow.

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
Enthusiast ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

You're welcome

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 ,
Apr 15, 2018 Apr 15, 2018

Copy link to clipboard

Copied

It's worked!

Thank you very much! I'm booking myself some formal training now but this advice really helped me out.

Not able to add anything to your discussion with Monika as its all above my head.

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
Enthusiast ,
Apr 15, 2018 Apr 15, 2018

Copy link to clipboard

Copied

hahaha ... you're welcome

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 ,
Apr 15, 2018 Apr 15, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Giordano+-+ACP+Italy  schrieb

Hello,

to export a svg the text must be converted to path ... always!

I would disagree the "always" part.

For a logo this might be true, for everything else, you will have to analyze what is going to happen to the SVG. In which context will it be used.

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
Enthusiast ,
Apr 15, 2018 Apr 15, 2018

Copy link to clipboard

Copied

Of course, each case must be analyzed individually ... but generally speaking, an SVG born for web development which is actually converting vector graphics into a CSS code.

If you use in your vector graphics montserrat font (for example) and you leave the font as it is almost certainly only those (users who visit your web page) who have the font installed in their computers will see your graphics all the others (90%) see Sans Serif.

The options are two: or you import the same font on the web page (Typekit, Google Font, ...) weighting the page or you convert text to paths so you're sure everyone sees the same thing on all devices.

In all cases that are not web I do not see the reason to use an SVG format ... but why not?

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 ,
Apr 15, 2018 Apr 15, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Giordano+-+ACP+Italy  schrieb

Of course, each case must be analyzed individually ... but generally speaking, an SVG born for web development which is actually converting vector graphics into a CSS code.

...

In all cases that are not web I do not see the reason to use an SVG format ... but why not?

Saving to SVG does not covert to CSS code.

And how to handle fonts in that needs to be discussed with the web developer. There is no general rule. As I said, for logos it mostly makes sense, but there are several use cases for using SVG on the web.

As for uses of SVG besides web: many plotters take SVG as input. Also I know of publishers who experiment with the format for printing.

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
New Here ,
Apr 07, 2024 Apr 07, 2024

Copy link to clipboard

Copied

Hello, one question - what if it is required the text to not be converted to path, since converting the text to path will create slightly bold like fonts even if the text used are roman or normal text - we are using the images for publishing, and we are following the image specs/requirements of the publisher company, hence converting to path is not an option for me since it is required that the text should retain its editability in the deliverables, I've tried this method too in the past and they notice that some images I release have text that were converted to path. Thank you

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

Copy link to clipboard

Copied

Can you show exactly what issues you are having in that case? It might be worth making a new topic.

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
New Here ,
Apr 08, 2024 Apr 08, 2024

Copy link to clipboard

Copied

Hi Doug, please see below snip when viewed on Illustrator

AbrahamIV30717699tvvg_0-1712632901389.png

However when viewed on any browser, R^2 will clash. We cannot continue releasing path text since it will affect my rating/quality with out client.

AbrahamIV30717699tvvg_1-1712632940701.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 ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

What kerning options do you use for that text?

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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

0 for both kerning and tracking, but to achieve the exponent as per the journal guidelines it is minus 2 points for the base font size and baseline shift of 3 points (see second snippet)

 

AbrahamIV30717699tvvg_0-1712649786828.png

AbrahamIV30717699tvvg_1-1712649932956.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 ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Can you try changing kerning to Metrics for the whole text object? Also, if you're using Save As rather than Export, try unchecking 'Output fewer <tspan> elements'.

Can you share the SVG code for that text object, as well as your 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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Just tried it now, still the same. I even tried creating a new document and retyping the same text data and the issue is the same for the svg data

AbeIV_0-1712650503726.png

AbeIV_2-1712650812534.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 ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

1. Try 'Metrics' or 'Auto' kerning, and uncheck 'Output fewer <tspan> elements' if using Save As.

2. Try 'Export As' instead of 'Save As'.

 

If neither of those work, please share your 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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Noted on this however saving specs from client has Output fewer <tspan> elements checked. it is a requirement, but will try to check this one 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 Expert ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Try Export As in that case, using 0 kerning. In my quick tests, that gives correct results, while 'Metrics' and 'Auto' split the text object:

 

DougARoberts_0-1712652109414.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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Trying your suggestion, validation tool flag the changes in saving as error/warning - for your reference 1815488.fig.002a is the Exported SVG and 4815488.fig.002a is the Normal SVG with Output fewer unchecked.

AbeIV_3-1712653195339.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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Adding to this, svg that was saved with unchecked Output fewer has the correct result, but the issue now is that the image are now unfit to be delivered since the validation tool captured the changes in saving as error, since it is against the saving option provided by the client. See below saved file with uncheck "Output fewer..."

AbeIV_0-1712653496352.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 ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

Then I believe these validation restrictions place you in an impossible situation unless you manually adjust the Y-position of the superscript character.

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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

That is true, I will just raise this issue to client and hopefully they be able to help - thank you for checking with me.

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

Copy link to clipboard

Copied

Can I ask which version of Illustrator you are using? There are some changes to saving as SVG in the most recent version and I'd be interested to know if they break your validation also.

 

The client might also be interested to know that ISO 8859-1 encoding is now deprecated:

DougARoberts_0-1712655446532.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
New Here ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

LATEST

I am using 26.5 since the validation tool will only work for versions 27 and below for now, will raise this to my client - thank you for the heads up.

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