0

I've been given the cumbersome task of designing poster templates for a online university that need to be saved as SVG so their departments can make their own custom-filled files. The files are built in Illustrator CS5. Fonts are simple Open Sans, (from Google Fonts) which the client is also using the same licensed version. The issue I'm having is that some of my formatting in Illustrator is not carrying over to Inkscape. Issues of kerning, and alignment are the main factors.

Once the client updates the templates, then they will take care of printing the files. I realize that this is not the ideal process to set these up, but it is falling on deaf ears. Help!

1 Answer 1

1

I'm on CC platform so it might be a bit different (it has a better svg export), but you can do it in two ways.

kerning

  1. if you want to keep the text as <text>, you can edit the svg manually: Kerning is treated bit like tracking, so the text is "chopped" in fragments with other values and each of these fragments is wrapped in <tspan> tag with a generic class (in my case it's .cls-{number}. As with other elements you have to define a style for these classes, in that case give not only the font-family, -size and so on but also a letter-spacing.

Although the text becomes chopped into separate <tspans> (each have own coordinates), but in Inkscape is totally editable (checked on my own). I know that in earlier than CC AI realeases there were some drawbacks, so before export check the code of your svg, and alter it later if you do not have sth like this:

enter image description here

  1. save plain text with no kerning in svg- so Inkscape would see it as a one text with one class, and manually apply the kerning inside Inkscape (looking over to Illustrator for right values). It might be a bit faster than manual edition of svg code if you do not have a good understanding of it.

The last way is to expand the text - if you do not need a searchable text (and from the fact that you going to print I assume you don't) or editable (this might be the issue), so this last one might not be what you're looking for.

alignment

As you can see in the code above there is no alignment, although in ai it was to the left side. It has to be applied manually - the alignment is coded just with x y coordinates in this case, inside <text> and <tspan> tags, so the best way is to do it is in Inkscape after all, or try manual coding, but it might give you a headache (you have to know where the bounding box for the text to give the right x and y coordinates)..

2
  • Thanks Maugo. I'll check out your recommendations. I can't expand the text as the client needs to make edits on their end prior to going to print. I was hoping to not have to get in to the coding side of it, as it is not something I am familiar with, but maybe I'll have to learn. Perhaps I'll just rebuild in Word (shudder). Cheers. Brad
    – Redfelt13
    Jul 15, 2016 at 14:58
  • if you do not want coding, the best way would be to install Inkscape, and format text after import. I'm not familiar with it (i'm loyal to adobe), but this might be a better way after all.
    – Maugo
    Jul 18, 2016 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.