SVG makes far better charts than png, especially when there are small fonts. A problem arises however, because fonts in svg charts render differently in various browsers. For example, arial font turned into a serif font in Safari browser and the length of each line bled over the chart boundaries. To rectify this, I select my text and click 'Object to Path'. That fixes it.

However, a second problem emerges. 'Object to Path' increases the size of my file massively. My latest file jumped in size from 82 kb to 1640 kb when I clicked 'Object to Path'. Is there a better way to fix my first problem, without creating huge files?

Object to path increases the file size because it's replacing a single simple command (draw an "s") with a path containing numerous points - and doing so for each letter. It's replacing implicit knowledge about the path shape that's part of the font file with explicit details on how to draw it. There are a few things you could do:

1) After converting to a path, manually replace duplicated letters with clones. This is likely to be a time-consuming process, and only worthwhile for short pieces of text with repeated letters.

2) Simplify the paths to reduce the number of nodes. Best to do this one letter at a time, as some might not simplify so well.

3) Stick with common fonts that are likely to be installed on most machines. This is limiting and far from perfect.

4) Manually modify the SVG code to set fallback fonts to increase the number of systems you support. This is likely to require testing on lots of different systems.

5) Use a WOFF web font hosted on a site that your viewers can all access. I don't think Inkscape supports these, so you'll need to juggle between a local font for Inkscape and a WOFF font for online use. Ultimately though, this still means downloading more data, but it's shifted to a separate file.


If at all possible I recommend using a real font and leaving the text as text - there are huge advantages in accessibility and subsequent editing - but that will require manual editing of the file and possibly working with a WOFF font.

If all you're worried about is the file size, try saving as "Optimised SVG" or as "Compressed SVG" (provided your web server or host knows how to serve an svgz file properly).

Thanks. I had never heard of WOFF fonts.

Is there a standard list of WOFF fonts available, or do webmasters have to find them one at a time and list them on his stylesheet or something?

WOFF fonts are a variation of OpenType/TrueType with additional features to make them work better for the web. Unfortunately this also means that font foundries tend to charge twice for the same font if you want it both in "desktop" and "web" formats.

In much the same way as there's no standard list of OpenType fonts, there's no standard list of WOFF fonts - there are more being made available every day. The closest thing is the Google web fonts repository (https://fonts.google.com/) - a load of WOFF fonts hosted by Google that you can use for free in your website.

But with any WOFF font - like any other font you might want to use in an SVG file - you will need to manually add them to your document or stylesheet. Obviously Inkscape handles this for you when you choose a locally installed font, but it doesn't deal with WOFF fonts.


To be honest, I've never actually tried a WOFF font in SVG. It should work - as SVG can take its styling from CSS - but I've never had cause to do it myself, so can't provide any more specific information.

(@font-face has just been implemented for 0.93, @Xav: https://gitlab.com/inkscape/inkscape/co ... b9bec90ff7)

Ive found a very nice WOFF font called Roboto. Its a san serif font and looks really good on my Inkscape charts. Problem is Im running a Drupal website and I have no idea where my fonts directory is on the server to upload it. I think Ill just leave it to the New Year and leave chasing my tail till then.

Thanks for the help so far,

and have a merry Christmas.

Ged

Roboto was at one time (I'm not sure if it still is) the default font for Android.

The point of WOFF fonts is that they're served like any other web resource, so you don't need to put it into a specific fonts directory on the server - you just need to put it somewhere that you can access it with a URL, which can then be used in your CSS. In fact, as it's available in the Google fonts repository I mentioned above, you don't need to host it yourself at all.

https://fonts.google.com/specimen/Roboto

https://developers.google.com/fonts/doc ... ng_started (describes using the fonts in HTML - you'll need to extrapolate from that to SVG)