Computationally Efficient SVG character paths that scale well

user_5948260 0
Viewed 73

I have just spent most of the last two days drawing computationally efficient svg paths for each of the A-Z characters of the Arial Rounded MT Bold font family. I needed these paths to cut out character shapes from other svg shapes and as my program does this very very frequently I want the paths to be as light as possible. I also wanted them to scale well up to 512px.

Whilst I know that I could have done this automatically in Inkscape by drawing text objects and converting the text objects to paths, the Inkscape generated paths are at least twice and sometimes over three times the size of the paths I include below.

My question is how could I have saved the last two days of my life which I will never get back. I could not find any online resource or tool to generate efficient svg paths for text characters of a chosen font family. Neither could I find any definitions anywhere of the cubic bezier curves used by each of the font characters. If I could have found the latter I would have written a program to do it as it is I had to use trial and error.

Characters

My SVG paths are listed below each positioned centrally on a 32x32 grid with a 28pt font size and they will all scale up to 512 pt with very close match to the original font.

svg { width: 28pt; }
<!-- A  --><svg viewbox="0 0 32 32"><path d="
M 13.6 7 C 15 5 17.3 5 18.6 7 L 25.4 24 A 2 2 180 0 1 22.1 25.8 L 20 21.2 L 12 21.2 L 10.2 25.8 A 2 2 180 0 1 6.9 24 Z M 13.5 17 L 18.5 17 L 16 10 Z
" /></svg>
<!-- B  --><svg viewbox="0 0 32 32"><path d="
M 19 6 C 26 7 24.5 14.6 21 15.4 C 26.2 16.4 27 25.2 19 26 L 10.3 26 A 2 2 90 0 1 8.3 24 L 8.3 8 A 2 2 90 0 1 10.3 6 Z M 12.3 9 L 12.3 14.2 L 17 14.2 C 21.1 14.2 21.1 9 17 9 Z M 12.3 17.4 L 12.3 23 L 17.5 23 C 22 23 22 17.4 17.5 17.4 Z
" /></svg>
<!-- C  --><svg viewbox="0 0 32 32"><path d="
M 24.3 19.5 C 24.3 22.5 21.8 26.3 17 26.3 C 2.9 27.3 2.9 4.7 17 5.7 C 20.8 5.7 24.1 7.9 24.3 12 A 1.8 1.8 180 0 1 21.3 13 C 20.9 12 19.5 9.2 17 8.8 C 8.4 7.7 8.4 24.3 17 23 C 19.2 23 20.7 20.5 21.3 18.5 A 1.7 1.7 180 0 1 24.3 19.5 Z
" /></svg>
<!-- D  --><svg viewbox="0 0 32 32"><path d="
M 16 6 C 22.5 6 25.2 10 25.2 16 C 25.2 22 22.5 26 16 26 L 10 26 A 2 2 90 0 1 8 24 L 8 8 A 2 2 90 0 1 10 6 Z M 12.1 9.1 L 12.1 22.8 L 15 22.8 C 20 22.8 21 20 21 16 C 21 12 20 9.1 15 9.1 Z
" /></svg>
<!-- E  --><svg viewbox="0 0 32 32"><path d="
M 8.5 7.5 A 1.5 1.5 90 0 1 10 6 L 22.1 6 A 1.5 1.5 180 0 1 22.1 9 L 12.5 9 L 12.5 14 L 21.3 14 A 1.5 1.5 180 0 1 21.3 17 L 12.5 17 L 12.5 22.8 L 22.3 22.8 A 1.6 1.6 180 0 1 22.3 26 L 10.2 26 A 1.6 1.6 90 0 1 8.5 24.5 Z
" /></svg>
<!-- F  --><svg viewbox="0 0 32 32"><path d="
M 9 8 A 2 2 90 0 1 11 6 L 21.5 6 A 1.5 1.5 180 0 1 21.5 9 L 13.1 9 L 13.1 14.3 L 20.2 14.3 A 1.5 1.5 180 0 1 20.2 17.3 L 13.1 17.3 L 13.1 24.3 A 2 2 180 0 1 9 24.3 Z
" /></svg>
<!-- G  --><svg viewbox="0 0 32 32"><path d="
M 21.8 21.5 L 21.8 18.5 L 17.9 18.5 A 1.5 1.5 180 0 1 17.9 15.5 L 23.9 15.5 A 1.5 1.5 90 0 1 25.4 17 L 25.4 22.5 C 25.4 23.7 21.8 26.3 17 26.3 C 2.9 27.3 2.9 4.7 17 5.7 C 20.8 5.6 24.9 7.9 24.9 11 A 1.9 1.9 180 0 1 21.5 12 C 21 11 19.5 8.7 17 8.7 C 8.1 7.7 8.1 24.3 17 23.3 C 19 23.3 21.8 22.2 21.8 21.5 Z
" /></svg>
<!-- H  --><svg viewbox="0 0 32 32"><path d="
M 7.5 7.6 A 2 2 180 0 1 11.5 7.6 L 11.5 13.8 L 20.4 13.8 L 20.4 7.6 A 2 2 180 0 1 24.4 7.6 L 24.4 24.3 A 2 2 180 0 1 20.4 24.3 L 20.4 17.1 L 11.5 17.1 L 11.5 24.3 A 2 2 180 0 1 7.5 24.3 Z
" /></svg>
<!-- I  --><svg viewbox="0 0 32 32"><path d="
M 14 7.6 A 2 2 180 0 1 18 7.6 L 18 24.3 A 2 2 180 0 1 14 24.3 Z
" /></svg>
<!-- J  --><svg viewbox="0 0 32 32"><path d="
M 18 8 C 17.8 4.8 22.2 4.8 22 8 L 22 20 C 22.2 28.4 8.5 28.4 8.7 20 C 8.7 17.3 12.4 17.3 12.5 20 C 12.5 24.2 18 24.2 18 20 L 18 24 Z
" /></svg>
<!-- K  --><svg viewbox="0 0 32 32"><path d="
M 8.5 7.6 A 2 2 180 0 1 12.5 7.6 L 12.5 15.2 L 21.3 6 A 1.9 1.9 180 0 1 24.1 8.6 L 18.6 13.8 L 25 23 C 27 25.9 23.7 27.3 21.8 25.6 L 15.9 16.5 L 12.5 19.8 L 12.5 24.5 A 2 2 180 0 1 8.5 24.5 Z
" /></svg>
<!-- L  --><svg viewbox="0 0 32 32"><path d="
M 9 7.6 A 2 2 180 0 1 13 7.6 L 13 22.7 L 21.7 22.7 A 1.6 1.6 180 0 1 21.7 26 L 11 26 A 2 2 90 0 1 9 24 Z
" /></svg>
<!-- M  --><svg viewbox="0 0 32 32"><path d="
M 6.3 7.9 A 1.9 1.9 90 0 1 8.2 6 L 10.5 6 C 12.5 6 12.3 6.5 12.6 7 L 16 19.6 L 19.4 7 C 19.8 6.3 20 6 21 6 L 23.7 6 A 1.9 1.9 90 0 1 25.6 7.9 L 25.6 24.5 A 1.8 1.8 180 0 1 22 24.5 L 22 10 L 18.1 25 C 17.1 26.8 14.9 26.8 13.9 25 L 10 10 L 10 24.5 A 1.8 1.8 180 0 1 6.3 24.5 Z
" /></svg>
<!-- N  --><svg viewbox="0 0 32 32"><path d="
M 7.6 8 C 7.6 5.9 10.4 4.4 12.1 6.9 L 20.7 20 L 20.6 8 C 20.6 4.8 24.4 4.8 24.4 8 L 24.4 24 C 24.2 27 21 27 19.4 24.5 L 11.4 12.2 L 11.4 24.4 C 11.4 27 7.6 27 7.6 24.4 Z
" /></svg>
<!-- O  --><svg viewbox="0 0 32 32"><path d="
M 16 5.6 C 29.1 4.9 29.1 27.1 16 26.3 C 2.9 27.1 2.9 4.9 16 5.6 Z M 16 8.8 C 8.3 8.5 8.3 23.4 16 23.1 C 23.7 23.4 23.7 8.5 16 8.8 Z
" /></svg>
<!-- P  --><svg viewbox="0 0 32 32"><path d="
M 17 6 C 26 5.5 26 18.7 16.5 18.2 L 12.4 18.2 L 12.4 24.3 A 2 2 180 0 1 8.4 24.3 L 8.4 8 A 2 2 90 0 1 10.4 6 Z M 12.4 9 L 12.4 15.1 L 16 15.1 C 20.8 15.1 20.8 9 16 9 Z
" /></svg>
<!-- Q  --><svg viewbox="0 0 32 32"><path d="
M 16 5.6 C 29.1 4.9 29.1 27.1 16 26.3 C 2.9 27.1 2.9 4.9 16 5.6 Z M 16 8.8 C 8.3 8.5 8.3 23.4 16 23.1 C 23.7 23.4 23.7 8.5 16 8.8 Z M 16.4 19.3 C 17.2 19.3 21.4 22.2 21.5 22.5 C 21.4 22.6 26.8 25.5 26.5 25.5 A 1.4 1.4 180 0 1 25 27.8 C 24.3 27.8 20 25 20 24 C 19 23 15 21 15 21 C 14.2 19.8 15.7 18.9 16.4 19.3 Z
" /></svg>
<!-- R  --><svg viewbox="0 0 32 32"><path d="
M 18 6 C 27 5.5 26.6 16.5 19.3 16.9 C 20.9 17.1 25.1 23 25 24.5 C 25 26.9 22.3 26.7 21.4 25.5 L 18 20 C 17 18.5 16.5 17.2 12.4 17.4 L 12.4 24.3 A 2 2 180 0 1 8.4 24.3 L 8.4 8 A 2 2 90 0 1 10.4 6 Z M 12.4 9 L 12.4 14.5 L 17 14.5 C 21.8 14.5 21.8 9 17 9 Z
" /></svg>
<!-- S  --><svg viewbox="0 0 32 32"><path d="
M 8.5 12.5 C 6.9 3.3 23 3.9 23 10.5 C 23 12.5 20.5 12.9 19.8 11.5 C 17.9 6.4 11.7 8.6 12.1 11 C 12.1 11.5 12 13 18 14.1 C 21 15.1 23.9 16 23.9 20 C 24 28.4 8 28.5 8 20 C 8.7 18 10.8 18.5 11.3 19.5 L 11.8 20.6 C 13.2 25 20.4 23.8 19.9 20 C 19.9 17.3 14 17.3 11.6 16 C 9.6 15 9 14 8.5 12.5 Z
" /></svg>
<!-- T  --><svg viewbox="0 0 32 32"><path d="
M 22.9 6 A 1.6 1.6 180 0 1 22.9 9.2 L 18 9.2 L 18 24.3 A 2 2 180 0 1 14 24.3 L 14 9.2 L 9.1 9.2 A 1.6 1.6 180 0 1 9.1 6 Z
" /></svg>
<!-- U  --><svg viewbox="0 0 32 32"><path d="
M 7.6 7.6 A 2 2 180 0 1 11.6 7.6 L 11.6 18 C 11.6 20.3 12 23.2 16 23.1 C 20 23.1 20.4 20.3 20.4 18 L 20.4 7.6 A 2 2 180 0 1 24.4 7.6 L 24.4 18 C 24.4 23.7 22 26.3 16 26.3 C 10 26.3 7.6 23.7 7.6 18 Z
" /></svg>
<!-- V  --><svg viewbox="0 0 32 32"><path d="
M 7.25 8.3 A 1.9 1.9 180 0 1 11 7 L 16 21.8 L 20.9 7 A 1.9 1.9 180 0 1 24.6 8.3 L 18.75 24 C 18.75 24 18.2 26.3 16 26.3 C 13.7 26.3 13 24 13 24 Z
" /></svg>
<!-- W  --><svg viewbox="0 0 32 32"><path d="
M 3.4 8 A 1.9 1.9 180 0 1 7.1 7 L 10.1 20.1 L 13.5 7.5 C 13.5 7.5 14 5.6 16 5.6 C 18 5.6 18.5 7.5 18.5 7.5 L 22 20.1 L 24.9 7 A 1.9 1.9 180 0 1 28.6 8 L 24.55 24.5 C 24.55 24.5 24.1 26.3 22.1 26.3 C 20.1 26.3 19.65 24 19.65 24 L 16 10.6 L 12.4 24 C 12.4 24 11.9 26.3 9.9 26.3 C 7.9 26.3 7.45 24.5 7.45 24.5 Z
" /></svg>
<!-- X  --><svg viewbox="0 0 32 32"><path d="
M 8.9 8.1 A 1.75 1.75 180 0 1 11.9 6.3 L 16 12.8 L 20.45 6.3 A 1.75 1.75 180 0 1 23.4 8.1 L 18.55 15.5 L 23.65 23.5 A 1.75 1.75 180 0 1 20.44 25.5 L 16 18.6 L 11.45 25.5 A 1.75 1.75 180 0 1 8.3 23.5 L 13.6 15.5 Z
" /></svg>
<!-- Y  --><svg viewbox="0 0 32 32"><path d="
M 8.1 8.15 A 1.8 1.8 180 0 1 11.15 6.25 L 16 14.1 L 20.95 6.25 A 1.8 1.8 180 0 1 24 8.15 L 18 17.45 L 18 24.4 A 2 2 180 0 1 14 24.4 L 14 17.45 Z
" /></svg>
<!-- Z  --><svg viewbox="0 0 32 32"><path d="
M 10 9 C 7.7 9 7.7 6 10 6 L 21.5 6 C 23.9 6 24.1 8.2 23.4 9.5 L 12.15 23 L 23 23 C 25.3 23 25.3 26 23 26 L 9.5 26 C 7.5 26 6.5 24 7.7 22.5 L 19 9 Z
" /></svg>

svg
1 Answers

I could not find any online resource or tool to generate efficient svg paths for text characters of a chosen font family.

Try an online resource Google font to SVG path

This resource contains a large set of fonts and with a high degree of probability you will find the one you need
To optimize the SVG path, I used another online resource SVG-Editor

Below are code examples for letters A and D:

A

<svg xmlns="http://www.w3.org/2000/svg" width="56.2" height="67.5" viewBox="0 0 56.2 67.5">
  <g stroke-linecap="round" fill-rule="evenodd" font-size="28pt" fill="red" stroke-width="1" >
    <path d="M30.4 0L31.5 0A5 5 0 0 1 34.7 1.2Q37 3 39 7.6A115.5 115.5 0 0 1 41.8 14.9Q46.3 27.4 51.6 48.7A34.7 34.7 0 0 0 53.7 54.6 39.6 39.6 0 0 0 54.4 56 59 59 0 0 1 55 57.2Q55.9 59.1 56.1 60A2.3 2.3 0 0 1 56.2 60.5 7.1 7.1 0 0 1 54.3 65.4 6.7 6.7 0 0 1 52.8 66.8 5.4 5.4 0 0 1 50 67.5L48.9 67.5A10.3 10.3 0 0 1 47.1 67.4Q46.1 67.2 45.4 66.8A3.8 3.8 0 0 1 43.6 64.8 1.7 1.7 0 0 1 43.5 64.6Q43.3 64 43.1 62.3 42.9 60.3 42.5 58.4A45.4 45.4 0 0 0 41.8 55.5Q41 52.7 40 50.9A8.3 8.3 0 0 0 39.1 49.7Q37.3 47.6 29.8 47.4A64.5 64.5 0 0 0 27.7 47.4 63.6 63.6 0 0 0 24.1 47.5Q17.9 47.8 16.1 49.5 14.5 51.1 12.7 55.4A58.2 58.2 0 0 0 11.5 58.3 24.2 24.2 0 0 0 10.7 61 30.3 30.3 0 0 0 10.4 62.8 32.2 32.2 0 0 1 10.2 63.8Q9.9 65.5 9.5 66.1A2.6 2.6 0 0 1 8.3 67.1Q7.4 67.5 6 67.5A10.2 10.2 0 0 1 5.9 67.5 6.4 6.4 0 0 1 3.9 67.2 5.2 5.2 0 0 1 1.6 65.6 6.5 6.5 0 0 1 0 61.3 6.4 6.4 0 0 1 0.3 59.4Q0.9 57.5 2.5 55.2 5 51.7 11.8 33.9A661.1 661.1 0 0 0 11.9 33.7 642.7 642.7 0 0 1 15.6 24Q22.8 5.9 25.9 2.3A5.4 5.4 0 0 1 26.3 1.9 9 9 0 0 1 27.6 0.9Q28.5 0.4 29.3 0.1A4.5 4.5 0 0 1 30.4 0ZM25 40.5L31.5 40.5Q37.6 40.5 37.6 39L37.6 38.6Q37.6 37.9 35.1 27.9A1479.3 1479.3 0 0 0 34.3 24.8Q31.1 12.1 30 11.8A0.2 0.2 0 0 0 29.9 11.8L29.7 11.8A0.1 0.1 0 0 0 29.7 11.8Q29.4 12.2 27.9 15.6A404.3 404.3 0 0 0 24.8 22.3Q19.1 35.2 18.8 38.9A4.9 4.9 0 0 0 18.8 39.3L18.8 39.6Q18.8 40.3 20.5 40.3A8.6 8.6 0 0 0 20.7 40.3L21.4 40.4 25 40.5Z" vector-effect="non-scaling-stroke"/>
  </g>
</svg>

D

<svg xmlns="http://www.w3.org/2000/svg" width="60.1" height="73.4" viewBox="0 0 60.1 73.4">
  <g stroke-linecap="round" fill-rule="evenodd" font-size="28pt" fill="red">
    <path d="M23.4 0L25.9 0A48.6 48.6 0 0 1 37.6 1.3Q45.8 3.3 51 8.5A28.5 28.5 0 0 1 57.6 18.6Q60.1 25.1 60.1 33.2L60.1 33.5 60.1 34.8Q60.1 43.2 57.2 51.4A34.7 34.7 0 0 1 53.5 58.7 27.7 27.7 0 0 1 48.5 64.5 35.5 35.5 0 0 1 40.2 69.8 31.8 31.8 0 0 1 36.1 71.4 40 40 0 0 1 30.8 72.6Q28 73 24.7 73.2A95.4 95.4 0 0 1 18.8 73.4L17.6 73.4 16.4 73.4A194.1 194.1 0 0 1 11.8 73.3Q5.5 73.2 2.7 72.6A9.9 9.9 0 0 1 1.7 72.3 2.7 2.7 0 0 1 0.8 71.8Q0.2 71.3 0.1 70.5A3.6 3.6 0 0 1 0 69.8 1.3 1.3 0 0 1 0 69.5Q0.3 68.7 1.4 66.3A18.3 18.3 0 0 0 2.4 63Q3.8 57.6 3.8 47.8A154.8 154.8 0 0 0 3.8 46.9L4.4 31 4.5 28.6 4.7 20.3A419.5 419.5 0 0 0 4.7 17.7Q4.7 12.6 4.5 11.2 4.3 10 3.8 8.4A30.6 30.6 0 0 0 3.5 7.3 39.1 39.1 0 0 1 3.2 6.3Q2.8 5.1 2.7 4.5A2 2 0 0 1 2.7 4.2Q2.7 1.7 6.1 1.1A50.8 50.8 0 0 1 10.1 0.5Q15.4 0 23.4 0ZM15.3 27.1L15.2 28.7 15 33.7 14.9 35.4 14.7 41.2A88.5 88.5 0 0 0 14.7 42Q14.6 43.1 14.6 43.7L14.5 45.4Q14.4 47 14.4 47.8L14.3 49.4A26.8 26.8 0 0 0 14.3 51.1L14.2 52.7 14 58.4 14 61.5A5.1 5.1 0 0 0 14.1 62.8 3 3 0 0 0 15.9 64.9Q17.6 65.7 20.7 65.8A28.2 28.2 0 0 0 21.4 65.8L23.7 65.8A24.2 24.2 0 0 0 32 64.4 20.7 20.7 0 0 0 41.4 57.5Q44.2 53.9 46 48 47.8 42.1 47.8 34.7L47.8 33.8A45.1 45.1 0 0 0 47 25Q44.6 13.1 35.1 8.8 31.3 7.2 26.6 7.2L24.2 7.2Q18.8 7.2 17.2 8.8A2.4 2.4 0 0 0 17 9 4.2 4.2 0 0 0 16.5 10.2Q15.7 12.7 15.7 18.9A278.9 278.9 0 0 0 15.5 21.5Q15.3 25 15.3 27A39.3 39.3 0 0 0 15.3 27.1Z" vector-effect="non-scaling-stroke"/>
  </g>
</svg>

user_73948710
Related