How can I convert text to outline svg image?

Question

I need example text to svg outline images. scripting automaticaly generate on linux.

"0xA10B" to an image like this one:

(this is not svg image).

Answer 1

Consider using a utility to convert text to vector outlines. Google font to SVG path

1. Enter text

2. Choose a font, text size

3. Check the separate characters checkbox so that each letter has its own separate patch

<svg width="283.741" height="71.973" viewBox="0 0 283.741 71.973" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 20.215 71.973 L 17.237 71.973 Q 13.672 71.973 10.523 70.63 Q 7.373 69.288 5.03 66.944 A 17.327 17.327 0 0 1 1.343 61.475 Q 0 58.35 0 54.786 L 0 17.188 Q 0 13.623 1.343 10.498 A 17.327 17.327 0 0 1 5.03 5.03 Q 7.373 2.686 10.523 1.343 Q 13.672 0 17.237 0 L 20.215 0 Q 23.78 0 26.905 1.343 A 17.327 17.327 0 0 1 32.373 5.03 A 17.327 17.327 0 0 1 36.06 10.498 Q 37.403 13.623 37.403 17.188 L 37.403 54.786 Q 37.403 58.35 36.06 61.475 A 17.327 17.327 0 0 1 32.373 66.944 A 17.327 17.327 0 0 1 26.905 70.63 Q 23.78 71.973 20.215 71.973 Z M 31.104 54.786 L 31.104 17.188 A 11.002 11.002 0 0 0 30.478 13.459 A 10.417 10.417 0 0 0 30.225 12.818 A 11.329 11.329 0 0 0 27.832 9.278 A 11.329 11.329 0 0 0 24.292 6.885 A 10.808 10.808 0 0 0 20.141 6.008 A 12.383 12.383 0 0 0 19.922 6.006 L 17.53 6.006 A 11.002 11.002 0 0 0 13.801 6.632 A 10.417 10.417 0 0 0 13.16 6.885 A 11.63 11.63 0 0 0 9.595 9.278 Q 8.057 10.791 7.178 12.818 A 10.808 10.808 0 0 0 6.301 16.969 A 12.383 12.383 0 0 0 6.299 17.188 L 6.299 54.786 A 11.002 11.002 0 0 0 6.925 58.515 A 10.417 10.417 0 0 0 7.178 59.156 A 11.417 11.417 0 0 0 9.595 62.72 Q 11.133 64.258 13.16 65.137 A 10.808 10.808 0 0 0 17.311 66.014 A 12.383 12.383 0 0 0 17.53 66.016 L 19.922 66.016 A 11.002 11.002 0 0 0 23.651 65.39 A 10.417 10.417 0 0 0 24.292 65.137 A 11.126 11.126 0 0 0 27.832 62.72 A 11.63 11.63 0 0 0 30.225 59.156 A 10.808 10.808 0 0 0 31.102 55.005 A 12.383 12.383 0 0 0 31.104 54.786 Z" id="0" vector-effect="non-scaling-stroke"/>
<path d="M 82.813 70.996 L 76.319 70.996 L 65.625 51.807 L 54.932 70.996 L 48.438 70.996 L 62.452 45.996 L 48.438 20.996 L 54.932 20.996 L 65.625 40.186 L 76.319 20.996 L 82.813 20.996 L 68.848 45.996 L 82.813 70.996 Z" id="1" vector-effect="non-scaling-stroke"/>
<path d="M 125.733 70.996 L 121.094 54.688 L 98.926 54.688 L 94.336 70.996 L 87.793 70.996 L 108.301 0.977 L 111.621 0.977 L 132.227 70.996 L 125.733 70.996 Z M 109.815 16.407 L 100.635 48.682 L 119.434 48.682 L 110.205 16.407 L 110.01 13.819 L 109.815 16.407 Z" id="2" vector-effect="non-scaling-stroke"/>
<path d="M 180.909 70.996 L 141.211 70.996 L 141.211 64.991 L 157.911 64.991 L 157.911 6.983 L 141.211 14.014 L 141.211 8.008 L 157.911 0.977 L 164.209 0.977 L 164.209 64.991 L 180.909 64.991 L 180.909 70.996 Z" id="3" vector-effect="non-scaling-stroke"/>
<path d="M 212.11 71.973 L 209.131 71.973 Q 205.567 71.973 202.417 70.63 Q 199.268 69.288 196.924 66.944 A 17.327 17.327 0 0 1 193.238 61.475 Q 191.895 58.35 191.895 54.786 L 191.895 17.188 Q 191.895 13.623 193.238 10.498 A 17.327 17.327 0 0 1 196.924 5.03 Q 199.268 2.686 202.417 1.343 Q 205.567 0 209.131 0 L 212.11 0 Q 215.674 0 218.799 1.343 A 17.327 17.327 0 0 1 224.268 5.03 A 17.327 17.327 0 0 1 227.954 10.498 Q 229.297 13.623 229.297 17.188 L 229.297 54.786 Q 229.297 58.35 227.954 61.475 A 17.327 17.327 0 0 1 224.268 66.944 A 17.327 17.327 0 0 1 218.799 70.63 Q 215.674 71.973 212.11 71.973 Z M 222.998 54.786 L 222.998 17.188 A 11.002 11.002 0 0 0 222.373 13.459 A 10.417 10.417 0 0 0 222.12 12.818 A 11.329 11.329 0 0 0 219.727 9.278 A 11.329 11.329 0 0 0 216.187 6.885 A 10.808 10.808 0 0 0 212.036 6.008 A 12.383 12.383 0 0 0 211.817 6.006 L 209.424 6.006 A 11.002 11.002 0 0 0 205.695 6.632 A 10.417 10.417 0 0 0 205.054 6.885 A 11.63 11.63 0 0 0 201.49 9.278 Q 199.952 10.791 199.073 12.818 A 10.808 10.808 0 0 0 198.196 16.969 A 12.383 12.383 0 0 0 198.194 17.188 L 198.194 54.786 A 11.002 11.002 0 0 0 198.819 58.515 A 10.417 10.417 0 0 0 199.073 59.156 A 11.417 11.417 0 0 0 201.49 62.72 Q 203.028 64.258 205.054 65.137 A 10.808 10.808 0 0 0 209.205 66.014 A 12.383 12.383 0 0 0 209.424 66.016 L 211.817 66.016 A 11.002 11.002 0 0 0 215.546 65.39 A 10.417 10.417 0 0 0 216.187 65.137 A 11.126 11.126 0 0 0 219.727 62.72 A 11.63 11.63 0 0 0 222.12 59.156 A 10.808 10.808 0 0 0 222.997 55.005 A 12.383 12.383 0 0 0 222.998 54.786 Z" id="4" vector-effect="non-scaling-stroke"/>
<path d="M 266.504 70.996 L 244.336 70.996 L 244.336 0.977 L 266.504 0.977 Q 270.069 0.977 273.218 2.32 Q 276.368 3.663 278.711 6.006 Q 281.055 8.35 282.398 11.499 Q 283.741 14.649 283.741 18.213 L 283.741 18.897 A 16.99 16.99 0 0 1 283.081 23.658 A 16.724 16.724 0 0 1 281.202 27.881 Q 279.981 29.834 278.321 31.421 Q 276.661 33.008 274.61 34.082 A 16.263 16.263 0 0 1 278.321 36.744 Q 279.981 38.33 281.202 40.308 Q 282.422 42.286 283.081 44.556 A 16.99 16.99 0 0 1 283.741 49.317 L 283.741 53.809 Q 283.741 57.373 282.398 60.498 A 17.327 17.327 0 0 1 278.711 65.967 Q 276.368 68.311 273.218 69.654 Q 270.069 70.996 266.504 70.996 Z M 277.442 53.809 L 277.442 48.291 A 11.002 11.002 0 0 0 276.816 44.562 A 10.417 10.417 0 0 0 276.563 43.921 A 11.126 11.126 0 0 0 274.146 40.381 A 11.63 11.63 0 0 0 270.581 37.989 A 10.808 10.808 0 0 0 266.43 37.112 A 12.383 12.383 0 0 0 266.211 37.11 L 250.635 37.11 L 250.635 64.991 L 266.211 64.991 A 11.002 11.002 0 0 0 269.94 64.365 A 10.417 10.417 0 0 0 270.581 64.112 A 11.63 11.63 0 0 0 274.146 61.719 Q 275.684 60.205 276.563 58.179 A 10.808 10.808 0 0 0 277.44 54.028 A 12.383 12.383 0 0 0 277.442 53.809 Z M 277.442 19.873 L 277.442 18.213 A 11.002 11.002 0 0 0 276.816 14.484 A 10.417 10.417 0 0 0 276.563 13.843 A 11.417 11.417 0 0 0 274.146 10.279 Q 272.608 8.741 270.581 7.862 A 10.808 10.808 0 0 0 266.43 6.985 A 12.383 12.383 0 0 0 266.211 6.983 L 250.635 6.983 L 250.635 31.104 L 266.211 31.104 A 11.002 11.002 0 0 0 269.94 30.478 A 10.417 10.417 0 0 0 270.581 30.225 A 11.417 11.417 0 0 0 274.146 27.808 Q 275.684 26.27 276.563 24.244 A 10.808 10.808 0 0 0 277.44 20.092 A 12.383 12.383 0 0 0 277.442 19.873 Z" id="5" vector-effect="non-scaling-stroke"/>
</g>
</svg>

Answer 2

If you put this on a file with .svg extension then you have your text (sunshine in this case) converted to svg.

<svg version="1.1" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="20" fill="black">sunshine</text>
  Sorry, your browser does not support inline SVG.
</svg>

Here an .svg is not accepted as image, so I'll link a normal image of how it looks (ignore the black frame).

One can easily script the modification of "sunshine" for any other word.

Maybe it is not fully compliant with the specification, but I found that the browser displays it just fine.

Answer 3

The correct language is:

<text fill="none" … … >