この記事のターゲットとなる方
この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。
記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。
ぜひ記事を読みながら一緒に書いてみてください。
SVGは他の画像形式と何が違うの？
この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？
たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。
しかし、SVGはJPEGやPNGと明確に違うところがあります。
SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
GIFアニメーションのようなパラパラ漫画ではない、滑らかなアニメーションを制作したり、JavaScriptで画像内の要素を操作するといったこともできます。
ラスターグラフィックとベクターグラフィック
たとえばJPEGやPNGという画像形式は「ラスターグラフィック」と呼ばれ、Photoshopで扱うのに適しています。
ラスターグラフィックは拡大するとぼやけて見えたり、1つ1つのピクセルが拡大されてカクカクして見えます。
それに対して、SVGは「ベクターグラフィック」の一種です。
SVGは、正式には Scalable Vector Graphics と呼ばれます。
ベクターグラフィックは、拡大しても荒く見えないという特徴があります。
なぜいまWebでベクターグラフィックが重宝されているかというと、「スマートフォンやタブレットのディスプレイの密度が年々上がっている」ということが挙げられます。
ディスプレイの密度が高くなると、今までは鮮明に見えていた画像がぼやけて見えてしまうという問題が起こります。
ディスプレイの高密度化に対応する場合、JPEGやPNGでは画像の幅や高さを大きくするしかありません。
しかしそれではファイルサイズが増えてしまいます。
SVGのようなベクターグラフィックスであれば、ファイルサイズはそのままで高密度ディスプレイに対応することができます。
SVGが「書ける」と何の役に立つの？
一般的なWebデザイナーの方であれば、SVGはIllustratorやSketchのようなアプリケーションで図形を制作し、アプリケーションのSVG書き出し機能を利用して書き出すものかと思います。
SVGのコードを自分で書いて図形を作成するというのは、かなり難しそうに思えるかもしれません。
では、SVGが書けると何の役に立つのでしょうか？
たとえばスマートフォン時代のWebコーディングスクールでは Material Design Icons というWebサイトからダウンロードしたアイコン素材の色を変更するときに、アイコンのSVGファイルをテキストエディターで開き色を変更します。
一般的には、このような時はIllustratorやSketchなどで開いて色を変更し、SVGファイルとして書き出すかもしれません。
しかしこの場合、テキストエディターでSVGファイルを開き、色を変更した方が有利な点がいくつかあります。
まずMaterial Design Iconsで配布されているアイコンのSVGファイルは、容量が極力削減されています。
しかし、Illustratorなどで書き出したSVGファイルは容量が多くなってしまうため、容量を小さくするためにSVGOなどの容量削減ツールを使用する必要があり、手間がかかってしまいます。
しかし、SVGファイルをテキストエディターで開けば、色を変える程度の処理であれば10秒程度でできます。
SVGの書き方の基礎を理解するだけで、SVGファイルを使用したWeb制作の時間を節約できたり、ファイル容量の削減などの処理もやりやすくなるでしょう。
SVGの書き方に詳しくなれば、SVGを使用したアニメーションの制作なども可能になります。
この記事ではSVGの基礎的な書き方について解説します。
好評であれば続編記事も書きたいと思っておりますので、ご興味ある方はこの記事をSNS等でシェアしていただけると幸いです。
SVG要素の書き方
たとえばIllustratorでアイコンなどをつくるとき、まずは［新規］ダイアログからアートボードのサイズを指定して新規作成すると思います。
それと同様に、SVGをテキストエディターで書く場合はSVG要素を書き、その中に属性としてviewBox、幅、高さなどを指定します。
今回やることは、Illustratorで例えると「幅300px、高さ300pxのアートボードを作成する」ことです。
その場合、記述するSVG要素は以下のようにします。
<svg viewBox="0 0 300 300" width="300" height="300">
</svg>Illustratorでは、アートボードの左上の部分を基準点（0, 0）として、水平（横）方向がX、垂直（縦）方向がYとなります。
今回制作する画像は、X座標とY座標がそれぞれ0の位置から開始されるため、viewBoxの最初の2つの値はそれぞれ「0」となります。
そして今回制作するSVGのviewBox（アートボードのようなもの）の大きさは、幅、高さともに300pxとします。
その場合、viewBoxの残り2つの値は「300」となります。
それぞれの値の間は半角スペースで区切ります。つまり、viewBox=”0 0 300 300″ となります。
viewBoxとは別に、width, height属性を使用して、こちらにも幅と高さを指定します。
今回制作するSVG要素は、Illustratorのアートボードオプションで例えるとこのような関係になります。
では実際に書いてみましょう。
PCで以下のCodePenのリンクをクリックしてください。
すると新しいタブが開きますので、「HTML」の欄に以下のようにSVG要素を書いてみてください。
viewBoxのBは大文字ということに気をつけてください。
<svg viewBox="0 0 300 300" width="300" height="300">
</svg>CodePenは、画面右上からサインアップ（新規登録）またはログインすることにより記述したコードを保存することもできます。
なお、この記事では基本的にJavaScriptを書くことはありません。
そこで、CSSとJavaScriptの間の境界線を右方向にドラッグすると、以下のようにHTMLやCSSを書く領域を広げることができます。
CSSでページ背景に色をつける
CodePenでは下にプレビューが表示され自動的に更新されますが、この時点ではただ真っ白に表示されているだけです。
これではSVG領域の大きさなどもわからないため、CSSでSVGの領域だけ色を変えてみましょう。
CSSの枠の中に以下のように書いてみます。
body {
background: #ccc;
}
svg {
background: #fff;
}これでページ全体（SVG以外の領域）は薄い灰色に、SVGの領域は白色になったはずです。
線を引いてみよう
まずはXとYがそれぞれ0の座標から、viewBox（アートボード）一番右下のXとYそれぞれ300の座標まで斜めの線を引いてみましょう。
イメージとしては、以下のような感じです。
では、SVG要素の内側にline要素を以下のように書いてみてください。
線の色はred、線の太さは3pxとします。
<svg viewBox="0 0 300 300" width="300" height="300">
<line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="3"/>
</svg>これで斜めの直線ができたはずです。
なお、ここまでのコード全体と、できたSVGの見た目は↓の［Run Pen］をクリックし、［HTML］ボタンをクリックすると確認いただけます。
しかし、これだけでは物足りません。Illustratorでは、たとえば線を破線に変更できます。このような表現はSVGでも可能です。
line要素に、以下のように stroke-dasharray 属性を追加してみましょう。（SVG要素は省略しています）
<line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="3" stroke-dasharray="10,4"/>数値の部分 “10,4” を書き換えることで、線が見えている部分と見えていない部分の比率を変更できます。
長方形を作ってみよう
続いて長方形を作ってみましょう。長方形を作るには、rectという要素を使用します。
line要素の次の行に以下のコードを書いてみましょう。
xとyに長方形の左上部分の座標を入れ、幅と高さを指定します。
線幅は5、線の色はgreenとします。
<rect x="50" y="50" width="150" height="50" stroke-width="5" stroke="green" fill="yellow"/>角丸長方形にするには
長方形を角丸長方形に変更するには、たとえばIllustratorでは［変形］パネルで［角丸の半径］を10pxなどに変更します。
SVGでは、角の丸みをX軸方向とY軸方向にそれぞれ指定できます。
今回は角の丸みを10pxとします。その場合rxとryの属性値をそれぞれ10にします。
<rect x="50" y="50" width="150" height="50" stroke-width="5" stroke="green" fill="yellow" rx="10" ry="10"/>ここまでのコード全体と、できたSVGの見た目は↓の［Run Pen］をクリックし、［HTML］ボタンをクリックすると確認いただけます。
テキストを配置しよう
SVGにはテキストをそのまま配置できます。
フォントファミリー（フォントの種類）はもちろん、フォントサイズや左揃え・中央揃えなども指定することが可能です。
今回は、viewBox（アートボード）の中央にテキストを配置してみましょう。
フォントファミリーはWindowsやMacに最初から入っている Arial を指定し、フォントサイズ30pxで「Text」という文字列を配置したいと思います。
表示したい文字列は、テキスト要素の開始タグと終了タグの間に書くということに気をつけてください。
<text font-family="Arial" x="150" y="150" font-size="30">
Text
</text>文字の色はfillで、揃えはtext-anchorで指定します。
<text font-family="Arial" x="150" y="150" font-size="30" fill="blue" text-anchor="middle">
Text
</text>ここまでのコード全体と、できたSVGの見た目は↓の［Run Pen］をクリックし、［HTML］ボタンをクリックすると確認いただけます。
今回はここまでです。
好評であれば続編記事も書きたいと思っておりますので、ご興味ある方はこの記事をSNS等でシェアしていただけると幸いです。
