3

I have done an infographic with Inkscape. When I put the img in the html I cannot see the letters. I convert them to path: path > object to path and it is solved. I suppose that I use a type of letter that html does not recognize. Is convert to path the best option to solve that? any other solution?

For instance. In Inkscape I use Tahoma. A common font used in all browsers. I made a screenshot of what I see in Inkscape and what I see in the browser when I put the tag img src in the html

I attach 2 screenshots. In the Inkscape I see the letters as I want, centered. When I see the same in a browser, the letters have a different aspect and are not centered. In the example I use Tahoma. The result is the same with other letters common used with html like Geneva or Sans Serif.

Screenshot from Inkscape: Screenshot from Inkscape

Screenshot from Chrome: enter image description here

Improve this question
2
  • Why not use HTML and CSS to use the Font you want ?
    – SitiSchu
    Dec 18, 2016 at 0:48
  • 1
    As I said, my question is to make an infographic. I can make an infographic with html and css, as you say, but it has more limitations than a svg graphic.
    – Nrc
    Dec 20, 2016 at 11:32

2 Answers 2

Reset to default
1

When you created the text box, did you click and drag? Doing so creates a text box that wraps, using the <flowRoot> element.

flowRoot is not part of the SVG 1.1 standard though. This means that many renders (such as browsers) won't know what to do with it, so your text won't be displayed.

You can see if a text frame is in a flowRoot in Inkscape by selecting it and pressing Ctrl+Shift+X. This will open the XML inspector.

There are a few ways to fix this are:

  • Don't use flowRoot. When you want to use the text tool, click once instead of dragging. You can tell if you're using flowRoot if you are able to wrap the text in Inkscape.
  • Convert existing text wraps that use flowRoot to normal SVG text by selecting them and clicking Text > Convert to Text.
  • Use Object to Path (as you have already tried). Doing this will not only make the text uneditable, it will also increase the number of nodes in the file (and may increase the file size a lot if you have a lot of text)

See also: How does Inkscape decide whether to use flowRoot or text?

Improve this answer
5
  • Thank you this helps. But when I see the text in html it has a different position, it moves. In Inkscape I have everything centered but when I see it in html something happens. Any idea why? I suppose I must use a type that html has. Is that the point?
    – Nrc
    Mar 21, 2016 at 13:02
  • Which browser are you testing in? Did you use any features like centering or right aligning the text? I believe that's caused your issue for me in the past. Fonts can also cause issues with fonts (you can't embed a font into an SVG file), but if a font is accessible to Inkscape, it should be accessible to your browser.
    – Scribblemacher
    Mar 21, 2016 at 14:06
  • Even when I use a common font like Tahoma, Geneva or even San Serif, what I see in Inkscape and in html is very different. The only solution is, convert to Path
    – Nrc
    Mar 21, 2016 at 15:54
  • Are you able to include the image in your question so someone can take a look?
    – Scribblemacher
    Mar 21, 2016 at 15:59
  • I updated the question with the img that you ask
    – Nrc
    Mar 22, 2016 at 8:53
0

Is convert to path the best option to solve that?

Yes, if you want to make a SVG-file and if your infographic is meant to go online or to many people (on Facebook maybe) rather than just be shared with your in-office-team, then convert to path gives you assurance that all users will see what you intended to show.

I am helping with OpenClipart.org and we constantly have issues with corrupted text-elements and our advise is always "convert to paths". It is easily done, it has no risk.* And file-size is no big deal. Imagine you would make a floral border around your infographic, you would also have many "paths" and the size would not bother you.

*There is a dis-advantage, that other users cannot so easily edit your infographic. But that is no risk to you. If your goal is to inform (infographic), you better be sure that people can see what you intended. They can always write back to you, if they have corrections and you can make more versions.

Personally, because of working with minority languages, and having had constant font-issues in spite of Unicode, I am converting to paths for years, both in PDF-exports (from tools like Scribus) and when making SVG-files from Inkscape. hth

Improve this answer
1
  • But an infographic usually has quite a lot of text. In those cases, an svg converted to path has a higher size than a jpg. Perhaps I should forget svg for infographics.
    – Nrc
    Mar 20, 2017 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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