フォントをSVGに変換するアプリが動作しない

実現したいこと

このコードで、作成ボタンを押しても何も起こらない問題を解決したい。
さらに、ttcファイルが選択されたら、weightを選択するフォームが出て、それで選択できるようになるようにしたい。

アプリの概要

フォントファイルを、指定された文字で指定されたカラーでSVGに変換するアプリ。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>フォント→SVG変換</title>
7<style>
8  body {
9    font-family: Arial, sans-serif;
10    text-align: center;
11  }
12  svg {
13    margin-top: 20px;
14    border: 1px solid #ccc;
15  }
16</style>
17</head>
18<body>
19<h1>フォントSVG変換アプリ</h1>
20<input type="file" id="fontInput" accept=".ttf,.otf" onchange="loadFont(event)">
21<select id="fontSelect">
22  <!-- Options will be added dynamically after font file is loaded -->
23</select>
24<input type="text" id="textInput" placeholder="Enter text">
25<input type="color" id="colorInput" value="#000000">
26<button onclick="generateSVG()">変換</button>
27<a download="text.svg" id="downloadLink" style="display: none">SVGのダウンロード</a>
28
29<script>
30function loadFont(event) {
31  var file = event.target.files[0];
32  var reader = new FileReader();
33  reader.onload = function(event) {
34    var fontName = file.name.split('.').slice(0, -1).join('.');
35    var fontUrl = event.target.result;
36    var fontFace = new FontFace(fontName, 'url(' + fontUrl + ')');
37    fontFace.load().then(function(loadedFont) {
38      document.fonts.add(loadedFont);
39      var fontSelect = document.getElementById("fontSelect");
40      var option = document.createElement("option");
41      option.text = fontName;
42      option.value = fontName;
43      fontSelect.add(option);
44    });
45  };
46  reader.readAsDataURL(file);
47}
48
49function generateSVG() {
50  var selectedFont = document.getElementById("fontSelect").value;
51  var text = document.getElementById("textInput").value;
52  var color = document.getElementById("colorInput").value;
53
54  var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50">';
55  var textPath = '<text x="10" y="40" font-family="' + selectedFont + '" font-size="20" fill="' + color + '">' + text + '</text>';
56  svg += textPathToOutlinePath(textPath);
57  svg += '</svg>';
58
59  var svgBlob = new Blob([svg], {type: "image/svg+xml"});
60  var svgURL = URL.createObjectURL(svgBlob);
61  var downloadLink = document.getElementById("downloadLink");
62  downloadLink.href = svgURL;
63  downloadLink.style.display = "inline-block";
64}
65
66function textPathToOutlinePath(textPath) {
67  var parser = new DOMParser();
68  var doc = parser.parseFromString(textPath, 'application/xml');
69  var textNode = doc.documentElement.firstChild;
70  var textContent = textNode.textContent;
71
72  var svgns = "http://www.w3.org/2000/svg";
73  var svgText = '<path d="';
74
75  var canvas = document.createElement('canvas');
76  var ctx = canvas.getContext('2d');
77  ctx.font = textNode.getAttribute('font-size') + 'px ' + textNode.getAttribute('font-family');
78  var metrics = ctx.measureText(textContent);
79  var textWidth = metrics.width;
80
81  var textX = parseInt(textNode.getAttribute('x'));
82  var textY = parseInt(textNode.getAttribute('y'));
83  var textTransform = textNode.getAttribute('transform');
84
85  if (textTransform) {
86    var transformValues = textTransform.substring(10, textTransform.length - 1).split(',');
87    textX += parseInt(transformValues[0]);
88    textY += parseInt(transformValues[1]);
89  }
90
91  svgText += 'M' + textX + ',' + textY;
92  svgText += 'h' + textWidth;
93  svgText += 'v-' + textNode.getAttribute('font-size');
94  svgText += 'h-' + textWidth;
95  svgText += 'Z';
96  svgText += '" fill="' + textNode.getAttribute('fill') + '" />';
97  return svgText;
98}
99</script>
100</body>
101</html>

int32_t

2024/03/25 13:13

このコードで文字が SVG path に変換できるようには見えません。textPathToOutlinePath() が何をしているか説明できますか?

yambejp

2024/03/26 05:14 編集

ttfは意匠の問題があって勝手にデータは抜けないし、仮に抜いたとしてそのデータを公開することはできないと思いますが、そのあたりの課題はクリアになっているのでしょうか？（フリーフォントに限るってこと？）

KAN-KOFUN

2024/03/27 00:28

textPathToOutlinePath() 関数では、与えられた <text> 要素をアウトライン化された <path> 要素に変換するための処理を行っています。具体的には、①引数として与えられた textPath 文字列から、XML パーサーを使用して <text> 要素を DOM ノードとして解析する。②解析された <text> 要素から、テキストコンテンツ、フォントのサイズ、フォントファミリー、塗りつぶし色などの属性を取得する。③HTML のキャンバス要素と 2D コンテキストを使用して、与えられたテキストが描画される領域のサイズを計算する。これで、テキストの幅が求められる。④テキストの位置と変換行列を考慮し、テキストの開始点を決定する。⑤テキストの開始点から始まり、テキストの幅分の水平線を引き、その後垂直線を引いて、テキストの下部に結びつくパスを作成する。⑥作成されたパスに、元の <text> 要素から取得した塗りつぶし色を適用する。⑦生成された SVG のパス文字列を返す。意匠の問題について、個人利用で、Adobe illustratorではできるので、と考えています。

yambejp

2024/03/27 00:53

＞個人利用で、Adobe illustratorではできるなるほど公開しないのですね？（あくまで実験的にやりたい？）そうなるとイラストレータでやるならjavascriptは関係ないと思いますロゴや画像への埋め込みが有償だったり不許可だったりする場合もありますし、そもそもフォントをアウトライン化して改変することは多くの場合禁止されていると思いますのでよくよく使用許諾内容を確認の上作業なさってください

int32_t

2024/03/27 00:55

> ⑤テキストの開始点から始まり、テキストの幅分の水平線を引き、その後垂直線を引いて、テキストの下部に結びつくパスを作成する。ええ、つまりテキストを囲むような長方形だけのパスが作成されます。なぜこのコードを書いたのでしょうか。字形をパスに変換したいなら、ブラウザ上で動く簡単な方法はありません。TTCファイルを解析してベクタデータを抽出するとか、<canvas> に描いてみてビットマップからベクタを生成するとか、そういった大変な処理を実装するかライブラリを見付ける必要があります。