SVGをソースコードだけで書く方法

2022年 9月 8日　Posted　碓井(フロントエンドエンジニア)

SVGとは「スケーラブル・ベクター・グラフィックス（Scalable Vector Graphics）」の略語で歴史は古く、実は2001年頃に勧告された技術で、ベクターデータとして扱える画像ファイルです。今回はこのSVGをソースコードだけで書く方法を紹介していきたいと思います。

SVGは画像なの？テキストなの？

ズバリ、両方です。

SVGにはソースコードがあり、そのコード内容によって画像が描かれています。つまり、極端に言ってしまえば、AdobeのIllustratorといったツールを使わずともソースコードだけで画像を作成することも可能です。

どうやって書くの？

SVGのソースコードは、HTMLと同様にタグを使ってマークアップします。
下記に簡単なSVGを書いてみました。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
 <circle cx="50" cy="50" r="50" fill="#000"></circle>
</svg>

実際に要素について説明していきたいと思います。

まずは1行目のSVGタグ内を見ていきます。（第一関門はviewBox…！）

〇xmlns属性
これはSVGのネームスペースを表しています。これにより、SVGタグ配下では全要素がSVGの要素として扱われます。例として記述しましたが、省略しても問題ありません。省略した場合、svg要素の子孫要素はxmlns=”http://www.w3.org/2000/svg”に属する要素として扱われます。

〇width属性
widthでは枠の横幅を指定しています。画像の横幅ではなく、枠の横幅です。

〇height属性
widthとほぼ同じですが、こちらは枠の高さの指定です。
もう一度言います。枠の高さの指定です。

〇viewBox属性
ここは、わかりにくい部分なので、長くなります。

ソースコード上ではviewBox="0 0 300 300" と記述していますが、中身をひもとくと下記のような意味になります。

viewBox="x座標 y座標 width height"
（余談ですが、値の区切りは半角スペースとコンマの2種類を使うことができます。）

このSVGの場合、枠とviewBoxのwidthとheightの高さは同じなので、特に何も意識せずとも、座標を1動かせば1px動くという形になります。
（とてもわかりやすいシンプルな形）

ここまでのwidth、height、viewBoxの指定で下記の図のような物が生成されたとイメージしてください。ここでは、そこまで深く考えず、「こんなんできたんだなぁ」ぐらいに思っていただければ大丈夫です。

SVGタグの中に円を描いた状態で表示すると下記のような感じです。

では次にviewBoxの値を変更してみます。viewBox="0 0 300 300" となっている値を、viewBox="0 0 150 300" このようにしたらどうなるでしょう？

このように、枠に対して、描画エリアのwidthが小さくなったことによって描画エリアが縮小されます。

実際に描画エリアに円が描かれていた場合は、当然、円の位置が動くことになりますが、これは円の位置座標が変更されたのではなく、あくまでも描画エリアが狭くなっただけで、座標が変更になったわけではない、という点に注意が必要です。

もし、viewBoxの値が viewBox="0 0 150 150" であれば下記のようになります。

ちなみに、エリアが中央に表示されているのは『preserveAspectRatio』という属性のデフォルト値によるもので、デフォルト値には『"xMinYMin meet"』という値が入っています。これによって、縦横比を変えないまま、上下左右の中央に表示がされています。

もしこの属性に『"none"』を指定した場合は、常に100%表示をするようになり、viewBox="0 0 150 300" においては高さの値は枠と一致していますが、横幅が枠の横幅と一致していません。そのため、SVGタグの中に円が描かれていた場合、下記のように円が横に引き伸ばされた形になります。

つまり、viewBoxの値が viewBox="0 0 150 150" だった場合は、横も高さも枠に対して値が足りていないため、正円の状態で、2倍の大きさの円が表示されることになります。

次にviewBoxのx軸、y軸の値に変更を加えた場合。これは簡単にいきます。viewBoxのx軸を変更します。すると……？

このように円は（0, 0）のまま、描画エリアのx軸が横に動いたため、円が切れる形になります。
（Y軸は、書かなくてもわかると思いますので割愛します）

viewBox、長々と書きましたが、画像の表示位置を変えたい、など特に理由がなければ、座標は（0, 0）にしておき、横幅と高さは、作成した画像サイズにしておきます。

上記のSVGで言えば、基本的には viewBox="0 0 300 300" これでいいと思います。

続いて、SVGタグの中を見ていきたいと思います。

<circle cx="50" cy="50" r="50" fill="#000"></circle>

〇cx属性
中心のx座標（center xの意味）

〇cy属性
中心のy座標（center yの意味）

〇r属性
半径の長さ（radiusの意味）

〇fill属性
塗り色

今回はcircle要素を使いましたが、このほかにもいろいろな要素があります。

SVGで使える要素

単純な線

 <line x1="0" y1="0" x2="300" y2="300" stroke="#0000ff" stroke-width="1" stroke-dasharray="10,4"/> 

〇x1属性
横軸の始点座標

〇x2属性
横軸の終点座標

〇y1属性
縦軸の始点座標

〇y2属性
縦軸の終点座標

〇stroke属性
線の色

〇stroke-width属性
線の太さ

〇stroke-dasharray属性
破線の設定です。線が見えている部分と見えない部分の比率を変更します。

長方形

 <rect x="30" y="30" width="100" height="50" stroke-width="1" stroke="#000" fill="#00f" rx="10" ry="10"/> 

〇x属性
横軸の始点

〇y属性
縦軸の始点

〇rx属性
x軸方向の角丸の半径

〇yx属性
y軸方向の角丸の半径

※重複属性は省略しています。

テキスト

 <text font-family="Arial" x="150" y="150" font-size="30"> サンプルText </text> 

〇font-family
フォント設定

〇font-size
文字の大きさ

〇text-anchor
文字ぞろえ（左ぞろえ：start, 中央ぞろえ：middle, 右ぞろえ：end）

※重複属性は省略しています。

曲線

これはpath要素を使用して記述していきますが、コードだけでこれを作っていくのは困難なため、ここは素直にillustrotorなどを使って作成しましょう。

おわりに

いかがでしたでしょうか。なんとなーくで使っていることも多いであろうSVGタグのこと、少しは理解できたのではないでしょうか？

コードを書くことが主流の方にとっては慣れないソフトウェアを使うよりも、簡単な図形は、コードだけで書いた方が早かったりするかもしれませんね。

また、コードとして理解しておくことでillustratorなどのソフトウェアからSVGを生成した際にできる不要な記述の精査も行うことができ、データ量の削減や、可読性の高いSVGコードを実現につなげることも可能になります。

ぜひ、これを機会に覚えていただければと思います。