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 to a wonderful little bug in Firefox, the browser renders the text incorrectly. Boo.
So I converted the text to paths. We’re talking about up to 4000 separate labels. Maybe 15,000 new shapes now they’re vectors. It’s 4MB. Normally you might argue this would lend itself to compression but I have to in-line this SVG into the HTML. I’m adding CSS alterations dynamically and this is the only way I have a chance of cross-browser support. So anyway, the raw —even scoured— output of this is too big to be useful.
What strikes me here is all these space numbers share common glyphs. Zero through nine. Why am I including a shape definition for every instance of every number? Can I de-duplicate these?
I’m using Inkscape but I’m open to suggestions.
Answer
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.
Attribution
Source : Link , Question Author : Oli , Answer Author : Rahul