はじめに
以前にJavaScriptでハンバーガーアイコンを作りましたが、本来はSVGで作るものなのかなーと思いました。
SVGは、画像からSVGへ変換するツールやサイトがありますが、簡単なものをオリジナルで作れるようになってもいいのかなと思いましたので、少しやってみようと思います。
いつも記載する記事だと色々基本を学んだ後に記事にしていますが、今回は学びながら記載をしていきたいと思いますので、読みづらいかとは思いますがご容赦ください。
今回実施する内容
以下の図のようなハンバーガーアイコンをSVGで作成します。
ソースコード(Git Hub)
環境
OS: Windows 11 JP (64bit)
バージョン 125.0.2535.51 (公式ビルド) (64 ビット)
参考
用語
- SVG: Scalable Vector Graphics
SVGとは
- SVGは画像の形式の一つですが、JpegやPngなどと違いベクターで図を記載することで、拡大・縮小などをしてもぼやけることなどがなく、サイズも比較的軽量と理解しています。
- しかし、写真のような繊細なベクターで表現が難しいものには適していないものと理解しています。
- SVGは、XML形式で記載されています。HTMLなんかと基本的には同じような感じですが、HTML5に比べるとお作法は面倒なようです。
SVGの9.3章を見てみる
Scalable Vector Graphics (SVG) 2をみると色々ルールなどがあるようです。
正しい仕様に沿ったものかはまだ理解しておらずよくわかっていませんが、少しずつ理解していきたいと思います。
他のSVGに関連するサイトをみていると、Pathという要素で線は記載しているようで、それをScalable Vector Graphics (SVG) 2でみると、9章にPathsがありました。
ハンバーガーアイコンは、線を３つ書けばいいだけなので、これで作成すればいいのかなと思いましたので、さっそく試します。
9.3章の例では、XMLの宣言、SVGの領域やxmlnsの設定などがあるようです。
<?xml version="1.0" standalone="no"?> <svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example triangle01- simple example of a 'path'</title> <desc>A path that draws a triangle</desc> <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" /> <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /> </svg>
上記のコードで、図のようなものが出来上がるようです。
1行目：XML宣言
1行目のXMLの宣言は、XMLのお決まりなので気にしないようにします。
2行目：SVG宣言
svg要素がでてきます。svg要素でくくればよいことがわかります。
width、heightは4cmとありますので、縦横が4cmのサイズで作るんだなとわかります。
viewBoxって何かなとサイト内を検索してみると、8.6. The ‘viewBox’ attributeを見つけました。
8.1 Introductionもざっと検索すると以下を見つけました。
Each SVG viewport generates a viewport coordinate system and a user coordinate system, initially identical. Providing a ‘viewBox’ on a viewport's element transforms the user coordinate system relative to the viewport coordinate system as described in The ‘viewBox’ attribute.
ようするにSVGはビューポートと呼ばれる座標のシステムで、その座標の範囲などを設定するのがviewBoxと理解しました。
viewBoxの設定は、
[<min-x>,? <min-y>,? <width>,? <height>]
のようなので、最小のXとY、widthとheightを設定できるようです。
9.3章の例では、viewBox="0 0 400 400"とありますので、最小のXとYは0で、widthとheightが400になるってことですね。これと別に定義しているwidthとheightは実際のサイズというところでしょうか。
xmlnsはネームスペースでそのあとはversionですね。これはこういうものと覚えておいたほうがよさそうと思いました。今見ているサイトはSVG2となっていますが、version=1.1なのはちょっと気になりますが、「Status of This Document」にごにょごにょ何か書いてありますね。しばらく忘れておきます。
3行目：タイトル
単にタイトルを記載しているだけのようです。
4行目：説明
desc要素は知らないのですが、descriptionのようです。
これも検索すると、「5.8. The ‘desc’ and ‘title’ elements」に記載があるようですが、忘れておきます。
5行目：長方形
rect要素は、サンプルの周りを囲む正方形を記載しているようです。
rect要素は、「10.2. The ‘rect’ element」に記載があります。
x, yは、viewport内の座標を示して、width、heighは幅と高さを設定しfillは長方形の内側を埋めるかどうかで、strokeは線は青字ってことですね。
6行目：Path
ここがPathのところです。
MはMovetoで、その座標への移動を示す。
LはLineとで、線をその座標まで引くことを示す。
zをするとパスを閉じるということです。
fillはパスの内側を赤色で埋めて、strokeは線は青字で、stroke-widthは3で太さの割合ということですね。
ハンバーガーアイコンを作ってみる
9.3章の記載を参考に作ります。
<?xml version="1.0" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example humberger icon</title>
<desc>Example humberger icon</desc>
<path d="M6 7 L26 7" stroke="black" stroke-width="2"/>
<path d="M6 16 L26 16" stroke="black" stroke-width="2" />
<path d="M6 25 L26 25" stroke="black" stroke-width="2" />
</svg>
5-7行目
図に記載した通りの座標で作ったものです。
ハンバーガーアイコンの線を３つ作るということで、pathを３つにして３行で記載してみました。
みました。
１行で<path d="M6 7 L26 7の後に続けて、M6 16 L26 16を記載してもよさげですが、３つに分けたほうが理解しやすいため、このようにしました。
おわりに
今回はハンバーガーアイコンをSVGで作成してみました。
SVGは全くの初めてでよくわかっていない状態で、何となく仕様を見ながら作ってみました。
次回があるかはわかりませんが、もう少し学んだら何か記載しようかなと思います。