Sketch

[Sketch]ロゴをSVGで出力し、サイトにアップロードした時にサイズが合わない

Sketchでロゴを作成し、WordPressで使おうと思いアップロードしたけどサイズがおかしいのか、かなり見切れている状態になった。

どうも、Sketchで出力する時に手順をミスしていたようだ。

 

Sketchでロゴを出力する

以下の方法でエラーが解消されたので備忘録を兼ねてメモ。

  1. Artboardを選択
  2. Layer > convert to outlineをクリック(重要)
  3. あとは普通にsvgとして出力する。画面右下からできる

 

ミソはconvert to outlineだったようで、下記の記事を参考にした。

Sketch - テキストをSVGでExportする

 

SVGはいいぞ

改めて思うがSVGはいい。にじみというか、拡大してもぶれない。

このロゴのにじみは物凄く気になっていて、それだけでサイト全体がチープに見えてしまう。

 

私のケースではロゴpngファイルを使っていて、PCだとぼやけもなく見えるがスマホだと拡大されるたけめか、ぼやけたような見栄えになっていた。

SVGにすることで全部解決したので非常に満足。

 

なお、WordPressはデフォルト状態ではSVGファイルに対応していない。

なので、functions.phpを少しいじる必要がある。

 

詳しくは下記の記事を参考に。

WordPressでSVGを扱いたい! アップから表示まで完全対応する工程まとめ

 

-Sketch

© 2020 Code Ocean