SVGのリンク機能で集中線を描く
旭日旗の光線のような線（集中線？）を背景にしたいときにはイラストレーターで回転複製して作ってsvgなどに書き出してました。
無駄なタグを掃除する為にSVGファイルをエディタで開くとコピーした多角形羅列されていて無駄が多い事に気づき手書きしてみました。
Tagged ‘SVG’
SVGでボタンの枠線アニメーション
一般的にボタンの枠線のアニメーションはCSSのborderを使う。
CSSだけで完結するので見やすく便利だが、角丸で2点から囲うようなアニメーションを作ろうと思ったらCSSでは難しそうなのでSVGでやってみた。
(さらに…)
ワールドカップ記念10連マトリョーシカ
ワールドカップ2018はロシアです。なので10連マトリョーシカ作りました。
SVGアニメーション
なんだかんだでcanvasに押され気味のSVGだがAnimated SVG Iconsなんかを見ているとSVGにも可能性を感じる。
(さらに…)
Retina時代のスマホサイトのタイトルロゴはSVG
「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。
元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。
よくやる2倍サイズのJPEG画像（23.70KB）
モヤモヤが出るので今回の様なロゴ画像には向かないJPEGだけどRetinaだとそんなに問題無さそう、グラデの掛かった画像の圧縮率は魅力的
よくやる2倍サイズのPNG画像（39.88KB）
RetinaだとJPEGと画質は分らないし容量も大きい、グラデーションが無ければ色数を落として圧縮率を上げる事も出来るかも
SVG画像（8.85KB）
予想以上に低容量、SVGは表示が重いらしいがこのサイズだと差は分らない。
safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。