Help - exporting to SVG moves my text?

[lucyw2954756]

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

[magical_Skyline0D4A · Accepted solution]

Hello,

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

[lucyw2954756]

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

[magical_Skyline0D4A]

You're welcome

[lucyw2954756]

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.

[magical_Skyline0D4A]

hahaha ... you're welcome

[Monika Gause]

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.

[magical_Skyline0D4A]

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?

[Monika Gause]

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.

[AbeIV]

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

[Doug A Roberts]

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

[AbeIV]

Hi Doug, please see below snip when viewed on Illustrator

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.

[Doug A Roberts]

What kerning options do you use for that text?

[AbeIV]

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)

[Doug A Roberts]

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?

[AbeIV]

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

[Doug A Roberts]

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.

[AbeIV]

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.

[Doug A Roberts]

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:

[AbeIV]

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]

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..."

[Doug A Roberts]

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

[AbeIV]

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

[Doug A Roberts]

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:

[AbeIV]

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.