|12| sp. SVGでアイコン作り

FileMakerをアウトライン化するのに、いくつかのアイコンを作りたくなりました。SVGファイルで書き出すものの上手くいかなくてハマってしまいました。ひと月ほど前にも、レーザーカッター用のデータファイルをSVGで作り、上手くいかなくてハマったばかりでした。

今回もスペシャル編としてSVGでのアイコン作りについて書きます。

最初に作ろうとしたアイコンはアウトライン表示ボタンのアイコン、子どもや孫の展開ボタンのアイコン、折り畳みボタンのアイコン、そしてアウトラインとは関係ないのですが、画像エクスポートボタンのアイコンの4つです。

左からアウトライン表示ボタン、子ども展開ボタン、折り畳みボタン、画像エクスポートボタンです。

プレビューが表示されない

私はベクトル系のグラフィックソフトとしてAffinity Designerというアプリをつかっています。Adobe Illustratorのようなソフトです。

100*100mmのドキュメントの中に図形を描いてSVG形式で書き出しました。塗り（フィル）は黒、線（ストローク）はなしです。

書き出されたSVGファイルをFileMakerに読み込みましたが、プレビューが表示されるものと空白のものがありました。試しにボタンを作り、空白のプレビューのアイコンを指定してみると、ボタンにはアイコンが表示されました。アイコンの色を変えることもできます。

きちんとアイコンの役目を果たしているので問題はないのですが、プレビューが空白だと複数のアイコンを登録した時にどのアイコンか判断がつきません。

SVGファイルの塗りを黒からグレーにして登録し直すとプレビューがグレーで表示されるようになったのですが、今度はボタン上のアイコンの色を変えることができなくなりました。

プレビューが表示されるものとされないもの

アウトラインの展開や折り畳みアイコンは上手くいきましたが、アウトラインアイコンはプレビューが表示されない結果になってしまいました。他にも色々な形のアイコンを作ってみましたが、プレビューに表示されるものとされないものが出てきました。

よく、見比べてみると長方形や楕円を並べたアイコンは表示されず、フリーな曲線や折れ曲がった外径を持つ図形は表示されることに気がつきました。

それぞれのSVGファイルをテキストエディタで開くとプレビューされる方のファイルには

<path

と記述されていて、プレビューされないファイルには長方形や楕円を表す

<rct　あるいは　<crl

と記述されています。

プレビューされない問題への対処

長方形や楕円のパスを記述すれば良いのだろうと思いましたが、パスの記述の仕方がわかりません。そこで限りなく長方形に近いが長方形ではない四角形、楕円に近いが楕円ではない曲線にすれば良いかもしれないと思い、いくつかあるアンカーポイント（Illustratorでの言い方です。ノードという言葉を使うアプリもあります。）を0.1mm程度ズラしてSVGファイルに書き出したら、見事にプレビューされるようになりました。

上の例は1段目の長方形のアンカーポイントをズラして、2段目、3段目は長方形のままのSVGファイルを読み込んだものです。プレビューでは1段目しか表示されていません。

FileMakerでのプレビューは<Path….からしか生成されないのかもしれません。

このSVGファイルをテキストエディタで開いてみました。

1段目の部分が<pathで記述され、2、３段目は<rctで記述されています。

Illustratorから書き出されたSVGも長方形ツールで描かれた図形は<rctで記述され、アンカーポイントをズラした図形は<poligon pointと記述されていました。poligon pointでも問題はないようです。曲線のアンカーポイントは<pathで記述されています。

svgファイル

Affinity Designerで書き出されたSVGのテキストです。<pathと<rectの両方が混在しています。<pathの方が歪めた長方形、<rectの方が長方形そのものです。

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

<svg width=”100%” height=”100%” viewBox=”0 0 1182 1182″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xml:space=”preserve” xmlns:serif=”http://www.serif.com/” style=”fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;”>

<path d=”M261.861,137.858L74.583,137.858L74.583,325.136L260.861,325.136L261.861,137.858Z”/>

<g transform=”matrix(0.863627,0,0,0.863627,175.814,392.548)”>

<rect x=”74.583″ y=”137.858″ width=”187.278″ height=”187.278″/>

</g>

<g transform=”matrix(3.04295,0,0,0.863627,313.953,392.548)”>

<rect x=”74.583″ y=”137.858″ width=”187.278″ height=”187.278″/>

</g>

<g transform=”matrix(0.863627,0,0,0.863627,175.814,713.933)”>

<rect x=”74.583″ y=”137.858″ width=”187.278″ height=”187.278″/>

</g>

<g transform=”matrix(3.743,0,0,1,130.638,0)”>

<path d=”M261.861,137.858L74.583,137.858L74.583,325.136L261.594,325.136L261.861,137.858Z”/>

</g>

</svg>

svgファイルを作るにはAffinity Designerの場合は「書き出し」でsvgを選択します。Illustratorの場合は「別名で保存」からファイルタイプでsvgを選択し、「レスポンシブ」のチェックを外して（Windows版では詳細オプションで）保存します。このチェックを外さないとFileMakerに読み込んだ時にアイコンの大きさを変えることができなくなります。Illustratorの編集機能も外しておきます。

Illustrator代替アプリ

IllustratorはAdobeCCに含まれるアプリケーションで日常的に使用しない人にとってはとても高価ですし、Affinity Designerも安価とはいえ有料です。代替のフリーアプリケーションとしてInkscapeが有名です。機能もIllustratorに負けないくらい豊富で、Webでの記事も多く色々な使い方を調べられますが、慣れていないと操作が難しいアプリです。

簡単なアイコンを作成するのに多くの機能は必要ありません。簡単に図形が描けて、編集できればいいのです。

オンラインでsvgファイルを作成できるWebサイトがあります。私はhttps://vectr.comを試してみました。登録が必要ですが、アイコンを作成するには必要充分な機能があります。作成したファイルは保存されますし、過去のファイルを編集することもできます。使い方もサイト内に書かれており便利です。普段、ベクトル系のアプリをあまり使わない方には最適ではないでしょうか。

InkscapeもVectrも長方形や楕円を描いた後は前述したようにどこか1ヶ所のアンカーポイントを動かして長方形や楕円の形を少し歪めます。Vectrはアンカーポイントを選択するとカーソルキーで移動できますが、Inkscapeでは辺が動くだけで長方形を歪めることができません。オブジェクトを選択して「パス」メニューから「オブジェクトをパスへ」を選択して編集することになります。

ベクトル系のアプリでは「パス」という言葉をよく使いますが、ディレクトリーの場所を表すパスではなく、線の方向を決めるポイントやその線形のことを言います。

svgファイルの書き換え

すべてのアプリで塗り（フィル）は黒、線（ストローク）はなしです。黒はRGB(0.0.0)あるいは#000000で作成しています。

これでFileMakerに読み込んでもプレビューが表示されるようになります。しかしボタンに配置したアイコンの色を変えることができません。変えられるようにするにはsvgファイルを書き換える必要があります。

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

<svg ・・・・・ viewBox=”0 0 640 640″ width=”640″ height=”640″>

<path ・・・・></path>
<path ・・・・></path>
<path ・・・・></path>

</svg>

大雑把に書くと<svg・・・ viewBox=・・・height=”xxx”>と</svg>の間に<path・・・></path>あるいは<path・・・・/>があればそれ以外の部分は不要なようです。

<path・・・/>の中に<gタグやstyleがあれば、それも不要のようです。入っていても問題がない場合もありますが、その場合はそのまま使えばいいでしょう。

修正方法はsvgファイルを複製してテキストエディタで開いて編集し、そのまま保存すればOKです。

<path・・・・/>が<defs>・・・</defs>で包まれているときは<defs>と</defs>を削除します。

<path・・・・/>の中の数字やアルファベットの意味はポイントの位置とベクトル方向だと思いますが、詳細は分かりません。

Vectrのsvgファイルを修正

InkscapeとVectrから書き出されたsvgファイルと修正したものをpdfにしてあります。ダウンロードして比較してみてください。

Inkscapeではパスに変換した元のフォント情報なども含まれていてかなり複雑なファイルになっています。

SVGファイル比較 pdf

1 ファイル 49.64 KB

ダウンロード

アイコン作成のポイント

Illustrator、Affinity Designer、Inkscape、Vectrで作ったアイコンです。プレビューが表示されますし、アイコンの色を変えることもできます。

Vectrでは「VT」という文字を入力してパスに変換したつもりでしたが、変換されなかったので図形として描いています。下の段のアイコンでは「V」の谷間の部分が潰れてしまったので、右側上端のアンカーポイントを少し下げてみたら、谷間が描かれるようになりました。大きな図形で試してみたら、このようなことはありませんでした。

アイコン作成のポイントとしては

長方形や楕円は少し歪めておく
<path>タグだけにする。

の2点になると思います。