背景
フロントエンドがVue.js(2系)のWebサイトのスケルトンスクリーンを作ることになった。
どうやって作ろうか。。。
いいライブラリがないか調べたところ、vue-content-loaderを発見！
しかし最新バージョンはVue3にしか対応してないということ。。。(バージョン落とせばVue2でも使えます)
今回は自作で行くか！
このライブラリはピュアなSVGでやってます〜とのことなので、SVGで自作してみようと思った！
SVGとは
スケーラブルベクターグラフィック (SVG) は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィック(※1)を記述します。
そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に CSS、DOM、JavaScript、SMIL を含む他のウェブ標準とうまく動作するように設計されています。
SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。
引用: [MDN] SVG: スケーラブルベクターグラフィック
レスポンシブにも強く（綺麗）、軽量なところが魅力！
SVGの要素と属性
全部は載せていませんが、今回使用したものを載せています。
もっと詳しく知りたい人はMDNへ。
| 要素 |
説明 |
| svg |
新しい座標系とビューポートを定義するコンテナ。SVGのルート要素。 |
| mask |
オブジェクトの背景に合成するためのアルファマスクを定義する。 |
| rect |
SVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定する。 |
| path |
図形を定義する汎用的な要素。全ての基本図形を定義する。 |
| g |
他のSVG要素をグループ化するために用いられるコンテナ。 要素に適用された変形はその全ての子要素に対して実行される。加えて、多数のオブジェクトを グループ化しておくと後に 要素で参照することができる。 |
| defs |
後で再利用できるよう描画オブジェクトを定義する。ビューポート上で描画したい場所へそれらの要素を描画するために、要素を使用する。 |
| linearGradient |
グラフィック要素の塗りまたは線への線形グラデーションを定義する。 |
| animate |
時間の経過に応じて要素の属性を変化させる。 |
| stop |
グラデーションで使用する色と位置を定義する。この要素は常に または 要素の子である。 |
svg
| 属性 |
説明 |
| xmlns |
XMLから派生するSVGの名前空間。 |
| height |
ビューポートで表示される高さ (それ自身の座標系の高さではない) |
| viewBox |
SVGフラグメントのビューポート座標。viewBox属性の値は、空白またはコンマで区切られたmin-x、min-y、width、heightの4つの数値のリストであり、ビューポートの境界にマップする必要があるユーザースペースの長方形を指定する。width、heightは値が正である必要があり、値がゼロの場合、要素のレンダリングが無効になる。参考
|
| width |
ビューポートで表示される幅 (それ自身の座標系の幅ではない) |
mask
| 属性 |
説明 |
| xmlns |
XMLから派生するSVGの名前空間。 |
| height |
マスキング領域の高さ |
| maskContentUnits |
のコンテンツの座標系 |
| maskUnits |
の属性x、y、幅、および高さの座標系 |
| x |
マスキング領域の左上隅のx軸座標 |
| y |
マスキング領域の左上隅のy軸座標 |
| width |
マスキング領域の幅 |
rect
| 属性 |
説明 |
| x |
ユーザー座標のx軸座標。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示す。 |
| y |
ユーザー座標系のy軸座標。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示す。 |
| width |
ユーザー座標系での要素の水平方向の長さ |
| height |
ユーザー座標系の要素の垂直方向の長さ |
| rx |
x軸の半径 |
| ry |
y軸上の半径 |
path
| 属性 |
説明 |
| d |
描かれるパスを定義。パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成される。参考
|
g
| 属性 |
説明 |
| x |
ユーザー座標のx軸座標。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示す。 |
| y |
ユーザー座標系のy軸座標。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示す。 |
| width |
ユーザー座標系での要素の水平方向の長さ |
| height |
ユーザー座標系の要素の垂直方向の長さ |
| rx |
x軸の半径 |
| ry |
y軸上の半径 |
linearGradient
| 属性 |
説明 |
| gradientUnits |
グラデーション要素で指定された属性に使用される座標系を定義する |
| gradientTransform |
グラデーション座標系からターゲット座標系（userSpaceOnUseまたはobjectBoundingBox）へのオプションの追加変換を定義する。参考
|
| x1 |
二つ以上の座標を必要とする SVG 要素を描画するための一つ目の x 座標を指定する。一つしか座標を必要としない要素は、代わりにx属性を使う。 |
| y1 |
複数の座標を必要とするSVG要素を描画するための最初のy座標を指定する。1つの座標のみが必要な要素は、代わりにy属性を使う。 |
| x2 |
複数の座標を必要とするSVG要素を描画するための2番目のx座標を指定する。一つしか座標を必要としない要素は、代わりにx属性を使う。 |
| y2 |
複数の座標を必要とするSVG要素を描画するための2番目のy座標を指定するために使用する。 1つの座標のみが必要な要素は、代わりにy属性を使う。 |
| spreadMethod |
グラデーションの定義されたエッジを超えて図形を塗りつぶす方法を定義する。参考
|
animate
| 属性 |
説明 |
| attributeName |
アニメーション中に変更されるターゲット要素のCSSプロパティまたは属性の名前 |
| dur |
アニメーションの単純な継続時間を示します。 |
| from |
アニメーション中に変更される属性の初期値を示す。to属性とともに使用すると、アニメーションは変更された属性をfrom値からto値に変更する。by属性とともに使用すると、アニメーションは属性をfrom値からbyで指定された値だけ相対的に変更する。 |
| to |
アニメーション中に変更される属性の最終値を示す。属性の値は、from属性値とこの値の間で変化する。 |
| repeatCount |
アニメーションが実行される回数を示す。 |
stop
| 属性 |
説明 |
| offset |
グラデーションベクトルに沿って配置される色停止点の位置。 |
| stop-color |
グラデーションの色停止点の色。CSSプロパティとして使用できる。 |
| stop-opacity |
この属性はグラデーションの色停止点の (不) 透明度を表す。CSSプロパティとして使用できる。 |
SVG コア属性
すべての SVG 要素に指定できる共通の属性。
参考
| 属性 |
説明 |
| id |
文書全体で一意な識別子。これは、リンク、スクリプト、スタイル付け (CSS) で要素を識別するためのもの。ファイル内の他の要素から参照するために必要。 |
※1 ベクターグラフィックとは、コンピューターで扱う、図形や画像の形式のひとつです。 ベクター形式、ベクトル画像等ともいわれます。 図形を点で結ばれた線で数学的に描画し、オブジェクトを表現する複数のポイントによって構成されています。
参考文献
[MDN] SVG: スケーラブルベクターグラフィック
[MDN] SVG Getting_Started
[MDN] Paths
