Lycolog

重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させたでadiary-extendsのロゴを作ったが、SVGの中の文字をtextで書いていたため環境によってフォントが変わり上手く表示できない問題と、あと微妙に中央寄せになっていない問題があったので、それらを解決することにした。

作業にはInkscape 1.3.2 (091e20e, 2023-11-25, custom)を利用した。かなり古いが昔入れてそのままのやつだろう。

やったこと

1. まずはInkscapeでSVGを開く
   

   

2. 次にtextオブジェクトを選択し、メニューから「パス」を開き、「オブジェクトをパスへ」でパスに変換する。この作業でtextはパスに変換され、環境依存が解除される
   

   

3. 次にはみ出ている「x」の右下の先っちょを削除する。
   背景のrectと「x」が入っているtext2を選択した状態でメニューから「パス」を開き、「分割」する
   

   

4. すると、こんな感じに分割される
   

   

5. はみ出ている「x」の右下の先っちょを選択しDeleteキーを押下して削除する。
   

   

6. 削除してきれいにまとまった図
   

   

7. 最後にメインロゴの「a」を上下左右中央寄せするために「整列と配置」から基準を「ページ」に設定する
   

   

8. 赤枠のボタンを押して左右中央寄せにする
   

   

9. 保存する
10. 出力されたSVGに大量のゴミが入っているので消す。
    具体的にはSVGの表示に関係ないメタ情報や、元のSVGにあったフォントスタイル情報などを根こそぎ消す
    

    

    

できたもの

そして微調整後のPNGロゴとSVGコードが出来た。

<svg
   viewBox="0 0 64 64"
   width="64"
   height="64"
   xmlns="http://www.w3.org/2000/svg">
  <path
     d="m 33.767578,47.558594 c -0.618815,0.0061 -1.26569,0.2028 -1.939453,0.591797 -2.291357,1.322915 -2.73401,3.378215 -1.330078,6.164062 l 6.955078,-4.015625 C 36.35768,48.458753 35.128971,47.545259 33.767578,47.558594 Z"
     fill="#899aff" />
  <path
     d="M 12,0 C 5.3520066,0 0,5.3520066 0,12 v 40 c 0,6.647993 5.3520066,12 12,12 h 40 c 6.647993,0 12,-5.352007 12,-12 v -4.310547 l -3.515625,2.03125 -6.660156,-3.064453 -0.728516,7.330078 -4.681641,2.703125 1.478516,-11.28125 -10.445312,-4.435547 4.925781,-2.84375 6.550781,3.001953 0.703125,-7.189453 4.695313,-2.710937 L 54.828125,42.394531 64,46.269531 V 12 C 64,5.3520066 58.647993,0 52,0 Z m 23.636719,43.931641 c 2.516946,0.111435 4.679689,1.732138 6.486328,4.861328 l 0.84375,1.460937 -11.109375,6.414063 c 1.99292,3.035172 4.679592,3.57617 8.0625,1.623047 1.768133,-1.020833 3.176063,-2.687757 4.222656,-5 l 0.148438,-0.08594 2.078125,3.599609 c -1.651207,2.035856 -3.409979,3.593752 -5.277344,4.671875 -2.940875,1.697915 -5.58565,2.292801 -7.935547,1.785157 -2.349897,-0.507645 -4.285809,-2.078733 -5.806641,-4.712891 -1.510415,-2.616116 -1.967927,-5.094297 -1.371093,-7.435547 0.591625,-2.350271 2.17313,-4.267579 4.74414,-5.751953 1.765878,-1.01953 3.403895,-1.496549 4.914063,-1.429687 z"
     fill="#899aff" />
  <path
     d="m 50.067085,46.621735 -9.386449,1.655084 -0.819402,-4.647062 q -3.682702,4.488942 -6.228128,5.889732 -2.509225,1.426138 -5.555974,1.963362 -4.677837,0.824829 -8.287158,-1.648494 -3.614749,-2.504099 -4.455857,-7.274261 -1.063595,-6.031948 2.912289,-9.937943 4.006658,-3.911423 18.489236,-7.258394 L 36.56742,24.409727 q -0.591489,-3.354502 -3.165531,-4.455501 -2.574042,-1.100999 -7.898159,-0.162213 -3.631478,0.640327 -9.913646,4.60393 l -0.338528,0.05969 -1.318641,-7.478384 q 6.835972,-2.982363 12.621718,-4.002546 9.017146,-1.589966 13.533445,0.628236 4.541649,2.182001 5.659509,8.521701 z M 39.150362,39.5982 37.565822,30.61183 q -9.158461,2.408185 -11.209774,4.451688 -2.05674,2.012727 -1.552075,4.874824 0.537224,3.046749 2.379945,3.959379 1.842722,0.91263 5.320324,0.299434 3.662254,-0.645754 6.64612,-4.598955 z"
     fill="#ffffff" />
  <path
     d="m 35.636719,43.931639 c -1.510168,-0.06686 -3.148185,0.410157 -4.914063,1.429687 -2.57101,1.484374 -4.152515,3.401682 -4.74414,5.751954 -0.596834,2.34125 -0.139322,4.819431 1.371093,7.435547 1.520832,2.634159 3.456744,4.205247 5.806641,4.712892 2.349897,0.507644 4.994672,-0.08724 7.935547,-1.785157 1.867365,-1.078123 3.626137,-2.63602 5.277344,-4.671876 l -2.078125,-3.599609 -0.148438,0.08594 c -1.046593,2.312243 -2.454523,3.979167 -4.222656,5 -3.382908,1.953124 -6.06958,1.412126 -8.0625,-1.623047 l 11.109375,-6.414063 -0.84375,-1.460938 c -1.806639,-3.12919 -3.969382,-4.749893 -6.486328,-4.861328 z m -1.869141,3.626953 c 1.361393,-0.01333 2.590102,0.900159 3.685547,2.740235 l -6.955078,4.015625 c -1.403932,-2.785847 -0.961279,-4.841148 1.330078,-6.164063 0.673763,-0.388997 1.320638,-0.585736 1.939453,-0.591797 z"
     fill="#001382" />
  <path
     d="m 64,46.269531 -9.171875,-3.875 1.494141,-11.164062 -4.695313,2.710937 -0.703125,7.189453 -6.550781,-3.001953 -4.925781,2.84375 10.445312,4.435547 -1.478516,11.28125 4.681641,-2.703125 0.728516,-7.330078 6.660156,3.064453 L 64,47.689453 Z"
     fill="#001382" />
</svg>

以前のtextだった時のものと比べるとパスデータになった関係でだいぶコードが増えているが、やむを得ない。以下は以前のSVGコード。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
  <text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
    a
  </text>
  <text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
    ex
  </text>
</svg>