SVGはXMLなので、HTMLのCanvasに比べてやり方が多少異なります。ここでは、単一ファイルとしてのSVGの書き方をご紹介します。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="559" height="67" clip-rule="evenodd">
<defs>
<g id="id1">
<path stroke="none" fill="rgb(0,0,0)" d="M 40.35 18.6 Q 44.9 15.6 44.9 10.7 Q 44.9 5.9 41.4 2.95 Q 37.85 0 31.75 0 L 0 0 L 0 38.55 L 31.35 38.55 Q 46.5 38.55 46.45 28.15 Q 46.45 21.75 40.35 18.6 M 31.85 15.65 L 7.55 15.65 L 7.55 6.75 L 32.1 6.75 Q 37.55 6.75 37.55 11.15 Q 37.55 13.2 36.05 14.45 Q 34.5 15.7 31.85 15.65 M 31.35 31.8 L 7.55 31.8 L 7.55 22.45 L 32 22.45 Q 38.9 22.45 38.9 27.35 Q 38.9 29.35 36.9 30.6 Q 34.95 31.8 31.35 31.8 " opacity="1"/>
</g>
<g id="id2">
<path stroke="none" fill="rgb(0,0,0)" d="M 45.4 38.55 L 35 23.95 Q 44.6 21.8 44.6 12.25 Q 44.6 6.65 40.95 3.3 Q 37.3 0 31.15 0 L 0 0 L 0 38.55 L 7.55 38.55 L 7.55 24.4 L 26.7 24.4 L 36.8 38.55 L 45.4 38.55 M 30.05 17.6 L 7.55 17.6 L 7.55 6.75 L 29.6 6.75 Q 36.9 6.8 36.85 12.35 Q 36.85 17.6 30.05 17.6 " opacity="1"/>
</g>
<g id="id3">
<path stroke="none" fill="rgb(0,0,0)" d="M 50.75 20.5 Q 50.75 11.15 42.6 5.2 Q 35.45 0 25.4 0 Q 15.3 0 8.15 5.2 Q 0 11.1 0 20.5 Q 0 30.05 8.1 35.95 Q 15.05 41 25.4 41 Q 35.75 41 42.65 35.95 Q 50.75 30 50.75 20.5 M 42.9 20.5 Q 42.9 26.65 38.1 30.45 Q 33.3 34.25 25.35 34.25 Q 17.4 34.25 12.55 30.45 Q 7.7 26.65 7.7 20.5 Q 7.7 14.55 12.65 10.65 Q 17.6 6.8 25.35 6.75 Q 33.1 6.75 38 10.65 Q 42.9 14.5 42.9 20.5 " opacity="1"/>
</g>
<g id="id4">
<path stroke="none" fill="rgb(0,0,0)" d="M 51.35 38.55 L 30.35 0 L 21 0 L 0 38.55 L 8.3 38.55 L 12.7 30.3 L 38.65 30.3 L 43.05 38.55 L 51.35 38.55 M 34.9 23.5 L 16.5 23.5 L 25.7 6.45 L 34.9 23.5 " opacity="1"/>
</g>
<g id="id5">
<path stroke="none" fill="rgb(0,0,0)" d="M 24.95 0 L 0 0 L 0 38.55 L 26.2 38.55 Q 30.85 38.55 35.2 37 Q 39.15 35.55 40.95 33.55 Q 47.4 26.6 47.4 19 Q 47.4 10.65 41.25 5.35 Q 35.1 0 24.95 0 M 26.7 31.8 L 7.55 31.8 L 7.55 6.75 L 25.55 6.75 Q 31.8 6.8 35.55 10.25 Q 39.35 13.75 39.3 19.5 Q 39.3 24.85 35.8 28.35 Q 32.25 31.8 26.7 31.8 " opacity="1"/>
</g>
<g id="id6">
<path stroke="none" fill="rgb(0,0,0)" d="M 44.4 6.75 L 44.4 0 L 0 0 L 0 6.75 L 18.45 6.75 L 18.45 38.55 L 25.95 38.55 L 25.95 6.75 L 44.4 6.75 " opacity="1"/>
</g>
<g id="id7">
<path stroke="none" fill="rgb(0,0,0)" d="M 51.35 38.55 L 30.35 0 L 21 0 L 0 38.55 L 8.3 38.55 L 12.7 30.3 L 38.65 30.3 L 43.1 38.55 L 51.35 38.55 M 34.9 23.5 L 16.5 23.5 L 25.7 6.45 L 34.9 23.5 " opacity="1"/>
</g>
<g id="id8">
<path stroke="none" fill="rgb(0,0,0)" d="M 7.55 38.55 L 7.55 0 L 0 0 L 0 38.55 L 7.55 38.55 " opacity="1"/>
</g>
<g id="id9">
<path stroke="none" fill="rgb(0,0,0)" d="M 37.3 38.55 L 37.3 31.8 L 7.55 31.8 L 7.55 0 L 0 0 L 0 38.55 L 37.3 38.55 " opacity="1"/>
</g>
<g id="id10">
<g transform="matrix(0.0298614501953125,-0.0054168701171875,0.0054168701171875,0.0298614501953125,79.8,32.25)">
<path stroke="none" fill="url(#grad1)" d="M -2782.7569658689836 608.6833301566228 L 84.893028645503 1128.8753322274672 L 1683.7664050978372 132.97224006629114 L -858.0511140648059 -328.1137176765489 L 181.5633642527544 -1047.0521235003948 L -275.57473549460883 -1129.9770215128187 L -2782.7569658689836 608.6833301566228 M -1951.5829286777084 429.60166597823917 L -1237.2442827046566 -65.36827816052792 L 795.561309788937 303.38286406493205 L 19.622494346381792 787.1785311665641 L -1951.5829286777084 429.60166597823917 "/>
<g transform="matrix(32.42114182605412,5.8811984405974504,-5.8811984405974504,32.42114182605412,-2397.538468009851,-1514.9014594499217)"/>
</g>
</g>
<linearGradient id="grad1">
<stop offset="0%" stop-color="rgb(0,139,156)" stop-opacity="1"/>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="1"/>
</linearGradient>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)">
<g transform="matrix(1, 0, 0, 1, 139.75, 27.15)">
<use xlink:href="#id1"/>
</g>
<g transform="matrix(1, 0, 0, 1, 195.35, 27.15)">
<use xlink:href="#id2"/>
</g>
<g transform="matrix(1, 0, 0, 1, 247.2, 25.8)">
<use xlink:href="#id3"/>
</g>
<g transform="matrix(1, 0, 0, 1, 299.2, 27.15)">
<use xlink:href="#id4"/>
</g>
<g transform="matrix(1, 0, 0, 1, 356.7, 27.15)">
<use xlink:href="#id5"/>
</g>
<g transform="matrix(1, 0, 0, 1, 406.85, 27.15)">
<use xlink:href="#id6"/>
</g>
<g transform="matrix(1, 0, 0, 1, 444.25, 27.15)">
<use xlink:href="#id7"/>
</g>
<g transform="matrix(1, 0, 0, 1, 503, 27.15)">
<use xlink:href="#id8"/>
</g>
<g transform="matrix(1, 0, 0, 1, 520.8, 27.15)">
<use xlink:href="#id9"/>
</g>
<g transform="matrix(1, 0, 0, 1, 0, 0)">
<use xlink:href="#id10"/>
</g>
</g>
</svg>
SVGはhtml5以前から存在し、「html5にてSVGをサポートする」という関係となっています。なので、html5に比べて非常に高い正確性を求められます。特にXMLのnamespace関連を正確に理解していないと、うまく表示されないというトラブルに巻き込まれやすくなっています。
また、上のソースコードを見てもわかるように、SVGでちょっとした絵を描こうとすると複雑怪奇なコードになってしまいます。SVGは手で書くものではなく、ソフトウェアやJavaScriptによって自動生成されることが前提となっているため、今回のように簡単な形であっても非常に読みづらい形になってしまいます。
簡単に各要素について説明します。
- 2行目がsvgタグの宣言です。svgのnamespaceをここで宣言しています。xlinkも別の個所で利用するので、ここで宣言します。
- 3行目のdefsは、他の場所で参照されるタグを定義するためのタグです。ここで文字のデータを定義しています。
- 4～30行目までで、文字の形を定義しています。pathタグのd属性にて、各頂点の座標と曲線の曲率などを設定しています。
- 31行目～40行目は、グラデーションの部分の形を定義しています。
- 42行目からが、実際の文字を描画するところです。defsで定義したオブジェクトを、useタグのhref属性でxlinkを用いて参照します
HTML中で使用する場合は、一般的に以下のような形を取ります。
<object data="/sources/broadtail.xml" type="image/svg+xml" width="600" height="100"></object>
上のコードは次の様に表示されます。
直接ブラウザでリンクを貼る事も出来ます。その場合の実行結果は、下記のリンクから参照してください。
http://nmi.jp/sources/broadtail.xml