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

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

1

緑の線がアウトラインです。単純な構図なので縦は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. (1, 13)が基準点
  2. 上に6
  3. 右に6
  4. 上に3
  5. x半径3、y半径3の楕円を反時計回りで左に6の点まで書く
  6. 下に3
  7. 右に6
  8. 下に6

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

a1

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

<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">

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

a2

あとは同じように書きます。同一の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版)日本語訳