Alternative to nested svgs? (to render properly outside the browser)

[AlienKevin]

Intro

I have been working on a font editor for a few months.
Each character in the editor is represented as either a

• SimpleChar (an svg) or
• CompoundChar made up of a bunch of SimpleChars and possibly other CompoundChars

Naturally, I rendered the CompoundChar by nesting SVG components.

Example

Say I have a hypothetical character called “abc”, which is made up of a SimpleChar called “a” on the left and a CompoundChar called “bc” on the right.

Here’s a simplified representation of the SVG object stored in Elm:

<svg id="abc">

    <!-- SimpleChar "a" -->
    <svg id="a" x="0" y="0" width="50%" height="100%"><!-- svg code for a --></svg>
  
    <!-- CompoundChar "bc" -->
    <svg id="bc" x="50%" y="0" width="50%" height="100%">
        <!-- SimpleChar "b" -->
        <svg id="b" x="0" y="0" width="100%" height="70%"><!-- svg code for b --></svg>
        <!-- SimpleChar "c" -->
        <svg id="c" x="0" y="70%" width="100%" height="30%"><!-- svg code for c --></svg>
    </svg>

</svg>

Problem

The above “abc” example renders perfectly well in Chrome. However, nested SVGs are not supported in Adobe Illustrator, Inkscape, FontForge, and most other editors. So my font is useless outside Chrome. I use nested SVGs because <g> does not support width and height properties and there are no other ways to group SVG elements to my knowledge. I want to find an alternative to the nested SVGs approach I described above so my font can work in platforms outside the browser.

Failed Attempts to Find Solution

• I researched tools to flatten the nested SVGs but found none, the closest available tools can only flatten transform properties.
• I thought about calculating the dimension and position of each SimpleChar so I don’t need any <g> or <svg>. The process seems complicated and the SVG library I’m using (TypedSVG) doesn’t have functions for manipulating SVGs.

[wolfadex]

Can you put a transform on the <g> tags?

[AlienKevin]

That’s a good idea! I’m thinking about using translate(x y) and scale(width_ratio height_ratio) on the <g> tag.

[gampleman]

There are a few ways you could tackle this in SVG.

The most conventional would be to use <g transform="translate(x y) scale(ratio)"> as you point out.

You could also use draw your glyphs in <symbol>, then use <use> to render them. Provided you specify a viewBox attribute on <symbol>, you can then use x, y, width and height attributes on the <use> (no idea about Illustrator support for these).

You can as you pointed out just recalculate the coordinates manually. This will probably lead to the easiest compatibility as well as the smallest SVGs. elm-geometry could be helpful for that.