1

I've implemented a customized version of svg-edit with svg-font-loader on top of it. When the user is editing an SVG file, the custom fonts work well thanks to svg-font-loader (I simply pre-load the necessary custom font on the editor before loading the SVG string).

Once the user has finished with editing, I save the new SVG string to the file system (using XDocument's Parse() and Save().

I then need to display this SVG file to the user inside an <img> tag, but the fonts don't work unless the user installs them on their machine.

How can I encode the SVG string (Base64 or?) before saving to the file system, so that it displays correctly? Would I need to parse the SVG string and only encode certain parts? Is there a tool I can use?

edit: Alternatively, if I install the fonts on the server, is there a way to serialize the SVG to PNG on the server-side, and then display this? Would this work?

notAnonymousAnymore
  • 2,637
  • 9
  • 49
  • 74

1 Answers1

1

You can do this by using webfonts in the svg. When you save the svg just write out an @font-face stylerule with the custom font base64-encoded.

Here's an example.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Wow this looks promising. I'm quite new to this - do I manually parse the SVG string and insert with the encoded font reference? Then do I manually add a reference to the CSS class? The string looks like this: "...Test..." – notAnonymousAnymore Oct 10 '12 at 13:44
  • Busy reading your answer at http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg/4906603#4906603 and it's starting to make sense.. – notAnonymousAnymore Oct 10 '12 at 13:53
  • In case you feel like helping: http://stackoverflow.com/questions/12874102/how-to-use-a-base64-encoded-font-in-an-svg-file – notAnonymousAnymore Oct 13 '12 at 14:39