[Sketch]ロゴをSVGで出力し、サイトにアップロードした時にサイズが合わない
Sketchでロゴを作成し、WordPressで使おうと思いアップロードしたけどサイズがおかしいのか、かなり見切れている状態になった。
どうも、Sketchで出力する時に手順をミスしていたようだ。
Sketchでロゴを出力する
以下の方法でエラーが解消されたので備忘録を兼ねてメモ。
- Artboardを選択
- Layer > convert to outlineをクリック(重要)
- あとは普通にsvgとして出力する。画面右下からできる
ミソはconvert to outlineだったようで、下記の記事を参考にした。
SVGはいいぞ
改めて思うがSVGはいい。にじみというか、拡大してもぶれない。
このロゴのにじみは物凄く気になっていて、それだけでサイト全体がチープに見えてしまう。
私のケースではロゴpngファイルを使っていて、PCだとぼやけもなく見えるがスマホだと拡大されるたけめか、ぼやけたような見栄えになっていた。
SVGにすることで全部解決したので非常に満足。
なお、WordPressはデフォルト状態ではSVGファイルに対応していない。
なので、functions.phpを少しいじる必要がある。
詳しくは下記の記事を参考に。
WordPressでSVGを扱いたい！ アップから表示まで完全対応する工程まとめ
