会社のアドベント用です
最近アイコンなどでよくみかけるSVG画像。
ラスターのpng/gifと違い、ベクターなのでどんな拡大縮小にも耐えることができます。Retina対応が当たり前な今どきのWEB製作時に、１つのファイルのみで対応できるので大変ありがたいです。
※写真等色と形が複雑なものは引き続きjpg（最近はWebPという選択肢も）が優秀です。
各要素のお役目をメモっておきました。svgアニメをかけるとき理解しておくと便利＆イラレ等編集ソフトを使わずエディター内で画像編集を終わらせることができて結構便利。
軽量化
SVGOMG – SVGO’s Missing GUI
Svgの時点でよほどのことがない限りpngより軽くなっているとは思うのですが、上記ツールで不要箇所を削除できます。
ちなみに手動でするときはタグに下記4点があればOKだと思っています。
viewBox=
xmlns="http://www.w3.org/2000/svg”
width=
height=
たまにwidth/heightについて案内していないパターンをみかけますがIEで豆粒みたいになるので、もしそんなときはエディターでsvgを開いて確認してみてください。
扱える図形
| tag | 図形のタイプ |
|---|---|
| path | パス。基本的に一筆書きアニメはこのpathに開始と終了を設定して再生するかんじ。 |
| rect | 四角 |
| circle | 円 |
| ellipse | 楕円 |
| line | 直線 |
| polygon | 多角形 |
| polyline | 折れ線 |
| text | 基本icon等では使わない。これが含まれていたらむしろテキストのアウトラインをしていないので要確認 |
| image | 基本icon等では使わない。 |
svg一筆書きアニメーション
色々あるアニメーションのなかでも、svgならでは！の「一筆書きアニメ」のサンプルをつくってみました。簡単なのに動きが大きいので見栄えがする感じでウケが良い気がします。
See the Pen Qiita_1216 by ayayayayayayayayayayayayayayayayayayayayayayayayayayaya (@ayaaaa) on CodePen.
忘年会で力尽きたので
stroke-width 線の太さ
stroke-dashoffset 位置の指定
stroke-dasharray 線の間隔
├● ● ● ←離れてる
└●●●●●●●●●●●●● ←とおくからみたら線に見える
//明日詳しく書くかも・・・おやすみなさい
最後に
明日は黙して結果を出す！みんなから頼りにされるプラコレのすごい人その１オッスンさんです！LINEのAPIからaws周りやスクレイピングイロハまで豊富な知識で助けてくれるエンジニアさんです。
プラコレではフロントを触りたいエンジニアも！もっと違うことをやりたいエンジニアも！デザイナーも！募集しています！！
プラコレはプラコレWedding以外にもウェディングのメディアDressyやfarnyなども運営しています。ぜひ見ていってもらえると嬉しいです！