SVG とは
- 拡大しても見た目を損なわないベクター形式の画像です。
- jpg や png などはビットマップ形式をとっているため、拡大すると境界がギザギザで荒く見えてしまいます。
- SVG は画像データをパスとして持っているので、数値を変えるだけで形を変えられ、また CSS を使用することで画像の形に沿って線を描画したり色を変えることができます。
- ただし写真などの色数の多い画像や複雑な構成の画像には不向きなため、ロゴのようなシンプルな構成の画像に向いています。
使い方
基本的なコード
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50px"
height="50px"
viewBox="0 0 50 50"
>
<path d="..." />
</svg>
必須な属性
-
xmlns="http://www.w3.org/2000/svg"：SVG 名前空間宣言 -
xmlns:xlink="http://www.w3.org/1999/xlink"：XLink 名前空間宣言 -
version="1.1"：最新版を指定 -
width,height：キャンバスサイズ -
viewBox：描画エリアサイズ
CSS
svg {
width: 100px;
height: 100px;
stroke: green;
stroke-width: 1;
stroke-dasharray: 100;
animation: animation-svg 3s ease-out forwards;
}
@keyframes animation-svg {
0% {
fill: #fff;
stroke-dashoffset: 100;
}
90% {
fill: #fff;
stroke-dashoffset: 0;
}
100% {
fill: green;
}
}
簡単な解説
- CSS で徐々に線が描かれるようなアニメーションをやりたい場合は基本的には HTML にインラインで記述する必要があります。
HTML について
- 色々試してみた結果、イラストレーターで作成するにしてもGoogle Fonts/iconなど既存のものを落としてくるにしても
viewBox属性だけは生成されたものをそのままいじらない方が扱いやすいです。（画像のサイズが設定されているため） -
widthやheightに関しては CSS で管理する場合、なくてもよさそうです。-
svgタグにデフォルト値としてwidthとheightを設定しておくことで、万が一 css によるスタイルが反映されていない場合にレイアウト崩れを最小限に抑えられます。（生成したときのままで OK）
-
CSS について
- 流れとしては線描画から始まって最後に塗りつぶしを行っています。
-
widthとheightは適当な数値を入れています。 -
stroke-widthで線の太さを指定していますが、画像の大きさやviewBoxなどによって見え方が変わって来ます。- 例えば小さいサイズの画像の場合は
widthとheightで大きく表示したときにstroke-widthで小さい数値を指定しても通常よりも太く見えてしまいます。（より小さな値を指定する必要があります）
- 例えば小さいサイズの画像の場合は
-
strokeプロパティで色を指定しています。 -
stroke-dasharryで描画する線の間隔を指定、stroke-dashoffsetで線の始まりの位置を指定しています。- 上記プロパティの値を同じにすることで徐々に線描画されるように見えます。
- 指定する数値に関しては実際にプレビューしながら指定するといいかと
最後に
- とりあえず SVG アニメーションをやってみたいということでやってみました。
- 今まで SVG を扱ってこなかった、初めて触るけどとにかくアニメーション SVG をやってみたいという人のために役に立てばいいなと思います。
- 逆に間違ってるよってことでしたら教えていただけるとありがたいです。