26

Does any body know what is the current status of embedding fonts into an svg file that is readable by inkscape. I find the lack of embedded fonts severely impedes portability of svg files, particular if sending the file to a person who doesn't have admin access on their machine and cannot install fonts.

I tried to follow the instructions given at this link:

HOWTO: Embedding a font in a Linux Inkscape SVG document

but have been unable to get it to work, this link also suggests that it is possible:

https://answers.launchpad.net/inkscape/+question/83618

I, to be fair am trying to get this to work on windows, not linux (I don't have access to a linux machine right now). Does any one know of or have access to an actual svg file where this feature is working?

6
  • Possibly related of this question? Dec 9, 2014 at 16:10
  • Hi, Thanks for that. Yeah, I tried it before posting here and I couldn't get it to work, but I also can't find a working example, just suggestions of what might work. Dec 9, 2014 at 16:20
  • In the examples the fonts are embedded for an use through an internet browser (e.g. graphics in a web page). Your aim is a bit different, and at the moment I've found no working examples related. Dec 9, 2014 at 17:37
  • 1
    Note that while stackeschange is great for questions on existing features on software, for Open Source projects, like Inkscape, when asking questions about roadmaps and future features like this, a direct channel with the developers is possible. In the case of inkscape, I'd suggest raising your question on the "#inkscape" channel on the FreeNode IRC network.
    – jsbueno
    Dec 10, 2014 at 11:06
  • I have raised a question on InkscapeForum to this effect, but the take up in replies have been less than here, I'll look into the route that you have suggested. Dec 10, 2014 at 12:31

2 Answers 2

21

You can make a portable SVG file by converting the text to a vector path.

Select the text object, then go to the menu PathObject to Path. (You could also use Stroke to Path, depending upon what you want to do).

Of course as a vector, the text will no longer b be editable as text, but that may not matter as much to you as being able to have your SVG viewable on the other end.

3
  • 6
    this doesn't really answer the question, which is about embedding fonts in the SVG file, thus keeping it editable
    – Luciano
    Jun 27, 2016 at 8:14
  • 7
    It may not be a correct answer to the question, but it sure works like a charm without having to do much. This is a really good answer if you ask me! Oct 28, 2017 at 8:00
  • 1
    I agree, this is a very useful answer. Often, there are several ways to do things. If you discourage all answers that do not exactly use the way that is requested by the person asking the question, doesn't make StackExchange a very useful and learning friendly place, IMHO. Jan 5, 2019 at 21:35
7

In the current version of Inkscape seems not yet possible to embed SVG fonts (see also here a little example).

In 0.48 Release Notes:

There is a known limitation where the list of glyphs in the dialog are not yet rendered in the selected font, but still in the system font

In 0.47 Release Notes there is a more detailed explanation of the limitations:

As a SoC 2008 project, JucaBlues implemented initial parsing and rendering of SVG Fonts. You can design fonts within Inkscape, but using them to render text on the canvas is not yet supported. We are waiting for libpango to implement proper support of the user-fonts feature.

The render of SVG Fonts is not supported by Firefox or Internet Explorer, and Inkscape Wiki tell us that:

SVG2.0 may replace SVG fonts by WOFF

(let's wait and see)


At the moment, following this tutorial I was able to embed a WOFF font in SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="30 40 340 135">

  <title>WebFont Template for SVG</title>

  <style type="text/css"><![CDATA[
    @font-face {
        font-family: "indie_flower";
        src: url("indie_flower.woff") format("woff");
        font-weight: normal;
        font-style: normal;
    }

    text { 
        font-family: "indie_flower", serif;
        font-size: 40px;
        fill: silver;
        stroke: gray;
        stroke-width: 0.5px;
        text-anchor: middle;
    }

    textPath { 
        font-size: 35px;
        text-anchor: start;
        fill: silver;
        stroke: none;       
    }

  ]]></style>

  <text x="200" y="80">http://schepers.cc/svg-webfonts</text>  

  <path id="curve" d="M75,170 C150,140 200,140 250,160" fill="none"/>
  <text><textPath xlink:href="#curve">Google Indie Flower</textPath></text>

</svg>

The font was copied locally following this url (get from here) and obtaining the download link (conveniently renamed into "indie_flower.woff").

The SVG file uses a local font and renders well (tested with Firefox 34, Chrome 39 and Internet Explorer 11 under Windows 8.1). Using a local font I cannot link the SVG file, you have to settle for a screenshot:

Chrome screenshot

Unfortunately (see above), Inkscape at the moment is not able to render it and use the default font.

At the moment...let's wait and see.

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.