: Can I convert SVG text to path but reuse glyphs? I have an SVG with a load of text on it. It's a carpark map with space numbers written on it. I display this in a web browser and thanks

@Bryan765

Here at a very high level is what your script should do. Feel free to use your preferred language and environment, this is just a starting point for a logic which should give you what you're looking for.


Loop through all the text elements in the SVG's xml and for the ones that have numeric text (the parking spots, you do not specify if there is more text in your svg), change the id automatically created by Inkscape to a string with that parking spot's number. Inkscape only needs unique IDs, it generates non-descriptive IDs but will respect and not change IDs created by other software or manually created or changed by the user.
In a table store the x & y coordinates of the text element of each parking spot.
Whether in Inkscape or by scripting, convert all parking spot text into paths.
For digits 0-9 append to the SVG file an appropriate <defs> section defining the path information for each digit.
Loop through all the <g>s of the parking spots and replace them with a <use xlink:href="#digit" x=x y=y />
Profit


I can foresee some complications that you will have to deal with, and good luck with those.


The loop will need to split up the string of parking spots with 2 digits or more and the appropriate spacing between the first digit and subsequent digits might be tricky; this will heavily depend on the fonts you are using.
You do not specify what orientation the parking spots are in or if they are even on curved set-ups. Because of the manual x,y offsets for 2 digit numbers and greater, you might need additional logic to figure out the 'orientation' of a parking spot and how to correctly space the different paths of individual digits from the first one.


Hope this helps. Good Luck.

Vote Up Vote Down

@Ravi4787994

This is an in-browser or on server solution

There are many different ways to optimize SVG files. Sounds like you have already done a fair bit of it.

A few resources which I've found very useful are a css-tricks article that focuses on very specific details. And specifically, the tool it uses SVGO.

If you have many, repeated paths, I would consider using javascript to create the shapes Dynamically. There is an example here. One direction would be to have a defined function for each glyph, and simply have each path within the svg element created by a request for that function. Or take a full string, and/or array of arguments, to create your inline svg. This, of course, expects that your paths are longer than the length of the code required to request said function (pretty easy assumption).

Vote Up Vote Down

@Megan533

The <use> element allows you to reuse objects defined elsewhere in the document. For example, you could define each glyph as a <symbol> and then reuse them multiple times. Here's a nice article about it: Structuring, Grouping, and Referencing in SVG — The <g>, <use>, <defs> and <symbol> Elements.

I don't know how to do that directly in Inkscape, though -- especially not for a bunch of text you already have as text. You might have to write a script to post-process the SVG and find all the paths that can be reused.

Vote Up Vote Down

@Michele215

There are some compression options available that will offer varying degrees of success. To test them, I created an artwork file that solely had lots of repeated text. Un-expanded, the file size is 13.8 KB. Expanded, the file size is 1.42 MB.

Good option: Use SVGZ - 46.5 KB

Saving the expanded artwork as SVGZ gave me an output file of 46.5 KB which is significantly smaller than the standard SVG. Take note though that support may vary.

Better Option: Compress with Scour - 21.1 KB

Scour is a tool that will scrub and optimize your SVG file for you. Using the "maximum compression" command of scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, the expanded artwork was reduced to 21.1 KB. Not far off from the original un-expanded file size!

Vote Up Vote Down