2

I'm saving a vector graphic with text in Adobe Illustrator CC (File > Export > Export as ; format .svg ; Styling: Internal CSS ; Font: SVG ; Images: Embed ; Object IDs: Layer Names ; Decimal: 3 and both Minify & Responsive are checked.

On my iMac 27" 5K Retina Monteray (updated), the svg renders CORRECTLY in Chrome (see immediately below:

screenshot of svg in chrome with text rendering correctly

But in Safari (immediately below - bottom-right font is changed and letters are missing) and Firefox (2nd image below - text not italicized and "in job" words are pushed together) the text renders incorrectly.

screenshot of svg in safari with text rendering incorrectly

screenshot of svg in firefox with text rendering incorrectly

Any thought on what is causing this, please? Thanks!

5
  • 1
    Browsers don't always render SVGs exactly the same - some are fussier than others when it comes to SVG standards, which don't seem to be on Adobe's priority list TBH. It's hard to tell what the source of the problem might be without access to the SVG file.
    – Billy Kerr
    Commented Aug 20, 2022 at 10:18
  • we'd need to see the markup in order to be able to comment on differences in rendering. Please edit the question to include it. Commented Sep 20, 2022 at 9:16
  • Thank you @RobertLongson I realized the problem and answered it below (and just now marked it as the answer). Commented Sep 21, 2022 at 9:07
  • Sure that's one solution, there may be others if we had more information. Commented Sep 21, 2022 at 9:08
  • The problem was that I failed to create outlines from the text before exporting. There's nothing else I can add. Commented Sep 21, 2022 at 9:10

1 Answer 1

3

Easy fix: in Illustrator, highlight image then Type > Create Outlines

Then follow Export steps in the question!

Your Answer

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

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