Как сделать SVG с path?

Question

partyzanx @partyzanx

SVG

Как сделать SVG с path?

Мне нужно родить такой html текст!
Я не могу понять с помощью чего и как пошагово создать?

<svg>
	<defs>
		<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 341.4087,58.040727 0,951.927273 -112.60986,0 -66.8335,-432.74767 0,432.74767 -107.42188,0 0,-951.927273 107.42188,0 72.02149,428.631863 0,-428.631863 107.42187,0 z" />
			<path d="m 614.54102,58.040727 73.54737,951.927273 -131.53077,0 -6.40869,-171.09997 -46.08154,0 -7.6294,171.09997 -133.05664,0 65.30762,-951.927273 185.85205,0 z M 546.48682,670.11996 Q 536.72119,508.42756 526.95557,270.88672 507.42432,543.7059 502.54151,670.11996 l 43.94531,0 z" />
			<path d="m 934.6704,58.040727 0,190.503053 -76.29394,0 0,761.42422 -128.47902,0 0,-761.42422 -75.98874,0 0,-190.503053 280.7617,0 z" />
			<path d="m 1256.0205,58.040727 0,636.186103 q 0,108.18692 -3.6621,152.28484 -3.6621,43.50995 -21.6675,89.95977 -18.0054,45.86185 -47.6074,69.96876 -29.2969,23.5188 -69.2749,23.5188 -44.2505,0 -78.125,-28.2226 -33.8745,-28.2227 -50.65919,-73.49656 -16.78469,-45.27388 -19.83647,-95.25154 -3.0517,-50.56562 -3.0517,-211.67004 l 0,-563.277533 128.47906,0 0,713.798453 q 0,62.32507 3.3568,79.96425 3.6622,17.05119 14.3433,17.05119 12.207,0 15.564,-18.81512 3.6621,-19.40309 3.6621,-90.54774 l 0,-701.451033 128.479,0 z" />
			<path d="m 1305.7642,58.040727 90.9424,0 q 90.9423,0 122.9858,13.523364 32.3486,13.523365 52.4902,69.380729 20.4468,55.26941 20.4468,176.97969 0,111.12678 -14.3433,149.34498 -14.3432,38.21821 -56.4575,45.86185 38.147,18.22714 51.2696,48.80171 13.1225,30.57455 16.1743,56.44534 3.3569,25.28282 3.3569,140.5254 l 0,251.06421 -119.3237,0 0,-316.32915 q 0,-76.43641 -6.4087,-94.66354 -6.1035,-18.22715 -32.6538,-18.22715 l 0,429.21984 -128.479,0 0,-951.927273 z m 128.479,162.868343 0,211.67006 q 21.6674,0 30.2123,-11.17148 8.8502,-11.75945 8.8502,-74.67248 l 0,-52.32955 q 0,-45.27388 -8.545,-59.38521 -8.2397,-14.11134 -30.5175,-14.11134 z" />
			<path d="m 1642.6782,58.040727 214.2334,0 0,190.503053 -85.7544,0 0,180.50751 80.2613,0 0,181.09549 -80.2613,0 0,209.31816 94.2994,0 0,190.50306 -222.7784,0 0,-951.927273 z" />
		</clipPath>
	</defs>
</svg>

Сохраняю в иллюстраторе и в фотошопе, и получаются такие тексты (не то, что нужно):

<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 479.83"><defs><style>.cls-1{font-size:300px;font-family:Merriweather-BoldItalic, Merriweather;font-weight:700;font-style:italic;}</style></defs><title>Безымянный-1</title><text class="cls-1" transform="translate(0 261.47)">HSK.WiKi</text></svg>