[スクラッチ上級者講座] 任意のフォントファイル(ttf)から個別のsvg画像に変換してコスチュームとして使う方法
※ 当ページには【広告/PR】を含む場合があります。
2020/11/19
はじめに
ttf -> svgへ変換
SVGフォントSVGフォント？
<font>woff
<font id="Font1" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="bold" font-style="normal"
units-per-em="1000" cap-height="600" x-height="400"
ascent="700" descent="300"
alphabetic="0" mathematical="350" ideographic="400" hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
<glyph unicode="!" horiz-adv-x="300"><!-- !の外形を定義 --></glyph>
<glyph unicode="@"><!-- @の外形を定義 --></glyph>
<!-- 他のglyphsは略 -->
</font>
font:
フォントの宣言をするコンテナ要素
font-face:
フォントに関わる様々な設定情報を記述.
フォント名称や太さ・基底線・描画グリッドなど
missing-glyph:
対応していない文字に対する形状を定義
glyph:
文字の形状とマッピングテーブルの定義
v-kern, h-kern:
文字のカーニング情報を定義
glyphSVGフォントを分割・抽出するシェルスクリプト
<!-- 中略 -->
<font id="apricotJapanesefont" horiz-adv-x="1024" vert-adv-y="1024" >
<font-face
font-family="apricotJapanesefont"
font-weight="400"
font-stretch="normal"
units-per-em="1024"
panose-1="2 0 6 0 0 0 0 0 0 0"
ascent="880"
descent="-144"
x-height="429"
cap-height="678"
bbox="-0.133333 -143.133 1023.13 878.8"
underline-thickness="48"
underline-position="-120"
unicode-range="U+0020-FFEE"
/>
<!-- 中略 -->
<!-- 下は文字'3'の外形定義 -->
<glyph glyph-name="three" unicode="3" horiz-adv-x="512"
d="M213 70q-29 9 -52.5 28.5t-47.5 38.5q-5 8 -7 17.5t0 19.5l12 19q8 6 18 8t22 -1l21 -14l2 -6l10 -4l-1 -4q12 -6 22.5 -14.5t24.5 -9.5q15 4 26 11t18 18q11 20 13 44l4 48q-3 24 -12 45.5t-28 41.5q-14 6 -28.5 8.5t-26.5 13.5q-6 11 -8.5 20t0.5 19l12 20q20 6 41 15
t38 23q22 20 31.5 46t7.5 56l-13 22q-12 9 -27 11.5t-34 2.5q-17 -4 -30.5 -14t-32.5 -7l-20 11q-6 9 -7.5 18.5t0.5 19.5l11 19q28 23 61.5 29.5t73.5 -0.5q15 -5 29.5 -11t28.5 -17l14 -17q21 -27 22.5 -62t-3.5 -70q-8 -28 -24.5 -51t-33.5 -46l-15 -13l8 -6
q30 -45 37.5 -94t-0.5 -103q-5 -24 -14 -45t-23 -40l-21 -20q-22 -12 -46 -19.5t-53 -4.5z" />
<!-- ...以下略 -->
font-facebbox全てのグリフ(文字)を欠けること無く描画可能な最小の矩形範囲viewBoxglyphglyph-nameunicoded3
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.133333 -143.133 1023.13 878.8" width="102.3" height="87.9" version="1.1">
<path d="M213 70q-29 9 -52.5 28.5t-47.5 38.5q-5 8 -7 17.5t0 19.5l12 19q8 6 18 8t22 -1l21 -14l2 -6l10 -4l-1 -4q12 -6 22.5 -14.5t24.5 -9.5q15 4 26 11t18 18q11 20 13 44l4 48q-3 24 -12 45.5t-28 41.5q-14 6 -28.5 8.5t-26.5 13.5q-6 11 -8.5 20t0.5 19l12 20q20 6 41 15
t38 23q22 20 31.5 46t7.5 56l-13 22q-12 9 -27 11.5t-34 2.5q-17 -4 -30.5 -14t-32.5 -7l-20 11q-6 9 -7.5 18.5t0.5 19.5l11 19q28 23 61.5 29.5t73.5 -0.5q15 -5 29.5 -11t28.5 -17l14 -17q21 -27 22.5 -62t-3.5 -70q-8 -28 -24.5 -51t-33.5 -46l-15 -13l8 -6
q30 -45 37.5 -94t-0.5 -103q-5 -24 -14 -45t-23 -40l-21 -20q-22 -12 -46 -19.5t-53 -4.5z" />
</svg>
3transformtranslatescale
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.133333 -143.133 1023.13 878.8" width="102.3" height="87.9" transform="translate(0,50) scale(1,-1)" version="1.1">
<path d="M213 70q-29 9 -52.5 28.5t-47.5 38.5q-5 8 -7 17.5t0 19.5l12 19q8 6 18 8t22 -1l21 -14l2 -6l10 -4l-1 -4q12 -6 22.5 -14.5t24.5 -9.5q15 4 26 11t18 18q11 20 13 44l4 48q-3 24 -12 45.5t-28 41.5q-14 6 -28.5 8.5t-26.5 13.5q-6 11 -8.5 20t0.5 19l12 20q20 6 41 15
t38 23q22 20 31.5 46t7.5 56l-13 22q-12 9 -27 11.5t-34 2.5q-17 -4 -30.5 -14t-32.5 -7l-20 11q-6 9 -7.5 18.5t0.5 19.5l11 19q28 23 61.5 29.5t73.5 -0.5q15 -5 29.5 -11t28.5 -17l14 -17q21 -27 22.5 -62t-3.5 -70q-8 -28 -24.5 -51t-33.5 -46l-15 -13l8 -6
q30 -45 37.5 -94t-0.5 -103q-5 -24 -14 -45t-23 -40l-21 -20q-22 -12 -46 -19.5t-53 -4.5z" />
</svg>
viewBoxwidth/height1024x879viewBoxwidth/height
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0,50) scale(1,-1)" version="1.1">
<path d="M213 70q-29 9 -52.5 28.5t-47.5 38.5q-5 8 -7 17.5t0 19.5l12 19q8 6 18 8t22 -1l21 -14l2 -6l10 -4l-1 -4q12 -6 22.5 -14.5t24.5 -9.5q15 4 26 11t18 18q11 20 13 44l4 48q-3 24 -12 45.5t-28 41.5q-14 6 -28.5 8.5t-26.5 13.5q-6 11 -8.5 20t0.5 19l12 20q20 6 41 15
t38 23q22 20 31.5 46t7.5 56l-13 22q-12 9 -27 11.5t-34 2.5q-17 -4 -30.5 -14t-32.5 -7l-20 11q-6 9 -7.5 18.5t0.5 19.5l11 19q28 23 61.5 29.5t73.5 -0.5q15 -5 29.5 -11t28.5 -17l14 -17q21 -27 22.5 -62t-3.5 -70q-8 -28 -24.5 -51t-33.5 -46l-15 -13l8 -6
q30 -45 37.5 -94t-0.5 -103q-5 -24 -14 -45t-23 -40l-21 -20q-22 -12 -46 -19.5t-53 -4.5z" />
</svg>
抽出するシェルスクリプト
#!/bin/bash
FILE_NAME=$1
cat "${FILE_NAME}" | sed -e 's/<glyph/~/g' -e 's/unicode="~"/unicode=""/' \
| tr -d "\n" | tr "~" "\n" | sed -e 's/unicode=""/unicode="~"/' \
| grep 'd="' > tmp.svg
#👇今回は利用しないが後でviewBox属性に設定できるかもしれないのでキープ
bbbox=$(head -n 1 tmp.svg | sed -e "s/.*bbox=\"\([^\"]*\)\".*/\1/")
rm -rf fonts
mkdir fonts
#👇漢字フォントは種類が多いのでUNICODE4* ~ uniFAまでを大まかにフォルダ仕訳する
mkdir fonts/uni4 fonts/uni5 fonts/uni6 fonts/uni7 \
fonts/uni8 fonts/uni9 fonts/unif9a \
fonts/spec_char
touch fonts/unicode_table.csv
makeSvgImg() {
svgfilename=$(echo -e "$2")
#👇特殊文字はファイル名に使えないので除外して、spec_charフォルダ内に仕訳する
if [[ "${svgfilename}" =~ [\!\#\\\/\%\'\?\*\(\)\"\<\>\.\;\,\|\-] ]] || [[ $1 =~ backslash ]]; then
svgfilename="spec_char/$1"
fi
cat << EOF > fonts/${svgfilename}.svg
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0,50) scale(0.1,-0.1)" version="1.1">
<path d="$3" />
</svg>
EOF
}
makeSvgImgUniX() {
svgfilename=$(echo -e "$2")
cat << EOF > fonts/$3/${svgfilename}.svg
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0,50) scale(0.1,-0.1)" version="1.1">
<path d="$4" />
</svg>
EOF
}
cat tmp.svg | grep -e 'glyph-name' | grep -e 'unicode' | while read line; do
glyph_name=$(echo "${line}" | sed -e "s/.*glyph-name=\"\([^\"]*\)\".*/\1/")
unicode=$(echo "${line}" | sed -e "s/.*unicode=\"\([^\"]*\)\".*/\1/" | sed -e 's/&#x\([^;]*\);/\\u\1/')
d_shape=$(echo "${line}" | sed -e "s/.*d=\"\([^\"]*\)\".*/\1/")
if [[ $glyph_name =~ ^uni4 ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'uni4' "$d_shape"
elif [[ $glyph_name =~ ^uni5 ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'uni5' "$d_shape"
elif [[ $glyph_name =~ ^uni6 ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'uni6' "$d_shape"
elif [[ $glyph_name =~ ^uni7 ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'uni7' "$d_shape"
elif [[ $glyph_name =~ ^uni8 ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'uni8' "$d_shape"
elif [[ $glyph_name =~ ^uni9 ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'uni9' "$d_shape"
elif [[ $glyph_name =~ ^uniF(9|A) ]] ; then
makeSvgImgUniX "$glyph_name" "$unicode" 'unif9a' "$d_shape"
else
makeSvgImg "$glyph_name" "$unicode" "$d_shape"
fi
if [[ $glyph_name =~ backslash ]] ; then
#👇バックラッシュ文字は特殊文字の中でも特殊なので特別扱い
echo -e "$glyph_name" '\' >> fonts/unicode_table.csv
else
echo -e "$glyph_name" "$unicode" >> fonts/unicode_table.csv
fi
done
rm -rf tmp.svg
svgfont_convert.shfontsspec_charuni4unif9aunicode_table.csv
$ chmod +x svgfont_convert.sh
#👇下は利用例、svgfont_convert.sh <SVGフォントのファイル名>
$ ./svgfont_convert.sh AP.svg
#...数分の処理待ち
$ tree
.
├── AP.svg
└── fonts
├── unicode_table.csv
├── spec_char
├── uni4
├── uni5
├── uni6
├── uni7
├── uni8
├── uni9
├── unif9a
#👇以降は特殊文字＆漢字以外の標準フォント
├── ｧ.svg
├── ｨ.svg
#...中略
└── №.svg
スクラッチでの作業
免責事項
特殊文字の配置
spec_char
フォント文字の使い方
もじ_もじ_を◯にするゑコスチュームを◯にする◯の1番目の文字
まとめ
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー