SVG画像で簡単なロゴを作る

SVG画像はAdobe Illustratorで書き出しても作成できるのですが、それじゃ面白くないし、中身はあまり美しくないコードになるので、コードを手書きして作成してみました。このブログのタイトル文字を作ってみます。

緑の線がアウトラインです。単純な構図なので縦は14マス、横は8マスで表現できるようにしています。赤の線は中心線です。緑より簡単に書けます。線の太さと角・端点の形状が指定できれば、こっちで書くほうが、少ないコードで記述できそうです。幸いpath要素に下記のような属性がありました。これを使うと書けそうです。

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2">

SVG画像はひたすら座標を指定して書いていきます。

mは始点(moveto)
hは指定したx座標まで水平線を引く(horizontal lineto)
vは指定したy座標まで垂直線を引く(vertical lineto)
aは指定したx,y座標まで楕円で結ぶ(arcto)

左上が基準です。線なので端点から書くといいかと思います。座標は相対指定で、パスは一筆書きで書いてみます。

<path fill="none" stroke="#000"
d="m1,13 v-6 h6 v-3 a3,3,-6,0,0,-6,0 v3 h6 v6">

(1, 13)が基準点
上に6
右に6
上に3
x半径3、y半径3の楕円を反時計回りで左に6の点まで書く
下に3
右に6
下に6

このコードで生成されるSVG画像は以下のようになります。 HTMLのimg要素を使用して表示しています。オリジナルの10倍サイズを指定していますが、スケーラブルなのできれいに表示されます。

線の太さと角・端点の形状を変更してみます。

<path fill="none" stroke="seagreen"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1,13 v-6 h6 v-3 a3,3,-6,0,0,-6,0 v3 h6 v6">

思っていたものになりました。

あとは同じように書きます。同一のd属性に記述すると始点を前の文字の終点からの相対指定で書けるのでそうします。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 xml:space="preserve" width="445" height="70" viewBox="0 0 89 14">
  <title>ALLAURMONO</title>
  <path fill="none"
   stroke="seagreen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
   d="m1,13 v-6 h6 v-3 a3,3,-6,0,0,-6,0 v3 h6 v6
      m3,-12 v12 h6
      m3,-12 v12 h6
      m3,0 v-6 h6 v-3 a3,3,-6,0,0,-6,0 v3 h6 v6
      m3,-12 v9 a3,3,6,0,0,6,0 v-9
      m3,12 v-12 h3 a3,3,0,0,1,0,6 h-3 h3 a3,3,3,0,1,3,3 v3
      m3,0 v-12 l3,5 l3,-5 v12
      m6,0 a3,3,3,0,0,3,-3 v-6 a3,3,-6,0,0,-6,0 v6 a3,3,3,0,0,3,3
      m6,0 v-12 l6,12 v-12
      m6,12 a3,3,3,0,0,3,-3 v-6 a3,3,-6,0,0,-6,0 v6 a3,3,3,0,0,3,3">
</svg>

xml宣言等表示に必要な全ての要素を記述しています。 svg要素の中にはpath要素以外に、title要素で名前を記述しています。また、width属性とheight属性をviewBox属性に指定した領域の5倍の値に指定しています。

logo

単純なカタチだと簡単なコードで書けるのでいいですね。

inspect

ファイルサイズも1KBを切っています。

SVG画像ではカラーグラデーションやアニメーションも利用できます。表示ができないブラウザがあったり、正しく表示されなかったりする場合もありますが、今回のような簡単なコードで書ける単純なカタチに限って言えば、管理しやすくサイズも軽いのでかなり有用な技術だと思いました。

次のステップはWEB Fontで作成したいです。(文字ですし)

SVG1.1仕様(第2版)日本語訳