How to convert text to SVG paths?

问题:

I have a font in ttf file and want to generate SVG with text turned into paths. I don't need image (so using imagettftext or Image Magick font rendering capabilities is not enough), I need shape, that can be scaled up and down and I want to lose information about font used and don't want to reference it in SVG file (so font-face declarations can't be used here). Is it possible?

回答1:

I have created my own class to process SVG font file and to turn text into glyphs. Example of using:

include "SVGFont.php"; $svgFont = new SVGFont(); $svgFont->load("/path/to/font.svg"); $result = $svgFont->textToPaths("Simple text", 20); 

Example result:

Code for my class:

回答2:

A workaround is using inkscape (execute it via exec or so after saving the SVG document to file.svg). In inkscape 0.49+, you can simply pass --export-to-svg and --export-text-to-path, like this:

$ inkscape file_text.svg --export-text-to-path --export-plain-svg file_shapes.svg 

In inkscape

$ inkscape --with-gui --verb EditSelectAll --verb ObjectToPath --verb FileSave \            --verb FileQuit file.svg 

回答3:

I just wrote a PHP library based on yours that manipulates font data (from SVG file) and does any sort of transformation on it. You may give it a try from the GitHub :

https://github.com/kartsims/easysvg

Usage example :

require 'easySVG.php'; $svg = new EasySVG(); $svg->setFont("paris-bold-webfont.svg", 100, "#000000"); $svg->addText("Simple text display"); $svg->addAttribute("width", "800px"); $svg->addAttribute("height", "100px"); echo $svg->asXML(); 

SVG data manipulation example :

$def = 'YOUR SVG DEFINITION HERE'; $easySVG = new EasySVG(); // rotate by 40° $rotated_def = $easySVG->defRotate($def, 40) // rotate by 40° with center at (200,100) $rotated_def2 = $easySVG->defRotate($def, 40, 200, 100) // scale transform : width*4 $scaled_def = $easySVG->defScale($def, 4) 

回答4:

If you can get an svgfont out then you have all the information there to render it using the glyph paths (copy-paste all the glyph path data you need to any number of path elements and apply a flip-y transform and scale it to whatever size you need). Batik has a tool called ttf2svg, which gives you svgfont output. There are others as well, fontforge for example.

Not sure if there are any pure command-line tools out there that can generate an svg like this directly, but the Inkscape solution should do exactly what you want.

回答5:

If you are on a Mac I found that opening a SVG file in iVinci Express with a text object will automatically convert it to a path. I created my SVG in Inkscape which happened to be an Uppercase T in Times New Roman (standard text select tool). Android SVG lib could not handle it showing a Roboto T instead so I opened in iVinci Express, saved from there and it auto converted to a path. I deleted some of the extra junk it added and set the viewbox (Android needs that) and it all painted just fine.

iVinci Express is free on the Mac store.

文章来源: How to convert text to SVG paths?