Object Design Blog

アイコンをSVGで作成してからEPSにする

直接Illustratorでアイコンつくれば済む話とも言えますが、 線と文字で構成されたシンプルなアイコンならば vi 等を使って SVGを直接記述してしまった方が楽です。

サイズの微調整もマウスを使う必要ありませんし、 第一、それだけのためにIllustratorを起動する無駄な時間を使う必要もない。

とはいえ、SVGのひな形がないと書き始める上でオーバーヘッド時間が無駄になるので ここにメモ。

S + 四角囲みパターン

こんなアイコンをつくりたい場合...

SVG code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24pt" height="12pt">

    <!--
    <rect style="fill:#000000;opacity:0.5;" width="20mm" height="10mm"/>
    -->
    <rect
        fill="none"
        stroke="#000000"
        stroke-width="1.0"
        x="0pt" y="0pt"
        width="23pt" height="11pt" />

    <text style="fill:#0000;" x="9pt" y="9pt" font-family="Arial" font-size="9pt">S</text>
</svg>

変換 SVG→PNG 100dpi

$ gm convert -density 100x100 s.svg s.png 

gm は GraphicsMagick のコマンドです。
Ubuntuの場合は、sudo apt-get install graphicsmagick とすればインストールできます。

後日談

手書きSVGをIllustratorで開いて、EPSとして保存し直すと、 SVGそのままではなく微妙にアキとかが変化してしまうようです。 長さの指定を適切な単位（またはSVGとIllustratorで安全な単位）を 使うなどもっと工夫すれば使えるのかもしれませんが、 微妙なズレが生じてしまうとやはり実際の仕事で使うには難しいようです。 いっそ、SVGのまま使えばいいのかもしれませんが。