4

Context

Environment

SVG-file in Inkscape 0.92.3 on Windows 10 Pro x64

Problem

Web browsers doesn't render the "Gone Home" text.

Description

I've made a SVG file in Inkscape that contains text using the Elephant font. Unfortunately, the web browsers[1] that are to display the image doesn't render the text at all. I assume the browsers doesn't have the right font installed?[2]

The same problem occurs sometimes when I'm working with CSS for websites. The solution in those cases is to use alternative fonts which the browsers may use, like below.

font-family: Elephant, Arial, Helvetica, sans-serif;

Questions

  1. Is it possible to specify alternative fonts in a SVG-file for applications to use when rendering text?[3]
  2. If so, how is it done in Inkscape 0.92.3?

Used Solution

The original SVG-file used flowing text (<flowRoot>) instead of regular text (<text>).

In Inkscape, select the text and use Text > Convert to Text.

Notes

  1. I've tested with Chrome, Firefox and Internet Explorer.
  2. Despite the font being installed in Windows.
  3. Meaning the application will use the second font if it doesn't have the first one and so on.
Improve this question
3
  • 1
    Would be better to convert the text to paths: "Path > Object to path". If I absolutely needed to keep the text as text, I might remove it from the svg, stick it in an adjacent div and overlay it on top of the svg image - Like this: jsfiddle.net/9kjaorp6/1
    – Joonas
    Oct 11, 2018 at 11:00
  • Welcome on GD.SE, Björn. As @Moini writes, the problems is related to the flowed text, and not to the Elephant font (which is usually included in Windows systems) or the alternative font. I've tried to delete the flowed text and put an ordinary textbox, and the text is rendered by the browser.
    – Paolo Gibellini
    Oct 12, 2018 at 10:08
  • 1
    Just some trivia: the flowed text issue will go away in Inkscape version 1.0, it's already being worked on. Then there will be a new kind of flowed text, and a fallback for those viewers that do not implement it.
    – Moini
    Oct 12, 2018 at 23:08

2 Answers 2

Reset to default
4

The problem is that you're using flowed text in your file. Flowed text is not in the SVG standard (it was planned, implemented in Inkscape, then dropped from the standard and kept in Inkscape because of its usefulness).

Use 'Path > Object to Path' or 'Text > Convert to text' (if you need to keep the text as text)

Improve this answer
1
  • Thank you for your input. The 'convert to text' was very useful! Unfortunately I cannot upvote your answer due to my low reputation on this StackExchange.
    – Björn Larsson
    Oct 15, 2018 at 7:43
3

It's either not rendering because that font is not installed on other computers which the SVG is being viewed on, or perhaps there is a a problem with the font file itself, or some incompatibility with Inkscape. I don't think it has anything do with the browser as such. Browsers don't "have fonts" - they can use system fonts, and web fonts. Ultimately I can't really answer this part of your question for sure, since I don't have the font to check it, and the font isn't free. I'm not buying it to find out.

Anyway, the fix is easy enough - and indeed this is what you should probably do with every SVG created for the web, regardless of the font used, to avoid missing font problems.

  1. Select all the text boxes in the Inkscape document.
  2. click Path > Object to Path. This will turn all the text into outlines
  3. Save* the SVG

Now all the text will display properly on every computer, regardless of which fonts are installed.

*Note: When saving the SVG for use on a web page, make sure you do not overwrite your original artwork (which you should have already saved). Choose to save it with a different file name. Once text has been converted to outlines it's irreversible, and you'd need to retype the text again if you want to edit it.

Improve this answer
1
  • Thank you for your input. The information about making text web safe by converting it to paths was very insightful! Unfortunately I cannot upvote your answer due to my low reputation on this StackExchange.
    – Björn Larsson
    Oct 15, 2018 at 7:44

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.