Does any one know if it is possible to change the typeface of text in an imported SVG image using Flare or a script?
We have hundreds of SVG images and we need to change the font used in the image to the one specified by our different OEMs.
Each OEM has their own style/brand requirements, but the images are essentially common to all, apart from the font.
Since SVGs are XML based, is it possible to automatically search and replace the XML statement that controls the typeface.
We use Adobe Illustrator and Flare, and would prefer to not introduce another 3rd party application or manual process.
Your advice and suggestions will be most welcome. Thanks
Change Typeface in Imported SVG Images
Re: Change Typeface in Imported SVG Images
I'm going to disappoint you (or create your greatest challenge)...
Note that I am offering this up because I am myself starting to use SVGs in earnest, and have hit some stumbling blocks as well. I am not an expert on SVG by any means, and I am lazy enough to have given up any in-depth research on my own issues. That said...
Using text in an SVG is not a great idea. The font will follow the same rules as fonts in your content: It has to be on the user's system, or needs to be accessed as a web font. (People knowledgable about SVGs might tell you that it is possible to embed an SVG-based font; I can't speak to that.)
Instead of leaving the font editable, you should convert it to outlines when you save the SVG.
The easiest solution (in my opinion) is to use a standard, non-custom font for all clients.
That may not be possible, in which case my next-best solution would be to create multiple versions of the graphic with the custom fonts as needed.
You could create one graphic with the text in question on separate layers, then use CSS and/or JS to display the appropriate layer in each case. (I believe this would require you to have the SVG code inline in the HTML, and not embedded using <img> tags.)
In any case, once you have finalized the graphic, you should convert the text to outlines (Illustrator has an option to do this when generating the SVG). I tend to save the .AI file with the editable text, then save the SVG with outlines.
If I get some spare time in the next week or so, I will create and post an example. (I don't believe that it will be pretty.)
Good luck, and please post an answer as to what you have decided to do.
Note that I am offering this up because I am myself starting to use SVGs in earnest, and have hit some stumbling blocks as well. I am not an expert on SVG by any means, and I am lazy enough to have given up any in-depth research on my own issues. That said...
Using text in an SVG is not a great idea. The font will follow the same rules as fonts in your content: It has to be on the user's system, or needs to be accessed as a web font. (People knowledgable about SVGs might tell you that it is possible to embed an SVG-based font; I can't speak to that.)
Instead of leaving the font editable, you should convert it to outlines when you save the SVG.
The easiest solution (in my opinion) is to use a standard, non-custom font for all clients.
That may not be possible, in which case my next-best solution would be to create multiple versions of the graphic with the custom fonts as needed.
You could create one graphic with the text in question on separate layers, then use CSS and/or JS to display the appropriate layer in each case. (I believe this would require you to have the SVG code inline in the HTML, and not embedded using <img> tags.)
In any case, once you have finalized the graphic, you should convert the text to outlines (Illustrator has an option to do this when generating the SVG). I tend to save the .AI file with the editable text, then save the SVG with outlines.
If I get some spare time in the next week or so, I will create and post an example. (I don't believe that it will be pretty.)
Good luck, and please post an answer as to what you have decided to do.
Don Johnson
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]