T-semiロゴのSVG化とブログのfavicon

こんにちは、大根です。T-semiのロゴをSVG化したので報告します。ついでに、調子に乗ってブログ用のfaviconも制作しました。

T-semiも、自分たちを表すロゴがあると都合がいいため、ロゴを作る人が現れるわけです。おそらく、現在最もよく使われているロゴはTwitterアカウントのロゴになっているこれ↓
Tsemi
だと思いますが、この画像、解像度があまり高くないため印刷に向かず、JPEG圧縮のためけっこう激しい劣化が発生しているなどの問題があります。
先日、先輩に「もっと高画質の画像ありませんか」というようなことを聞いてみた所、無いなら作れと言われたので作ることにしました。ということで、出来たものがこちら。
SVG非対応のブラウザでは表示できません
画像はSVGで書いてあるため、拡大しても粗が出にくく、色や形の差し替えも簡単です。元のアイコンをそっくりそのまま真似たわけではないので色や形がいくらか違いますが、T-semiの関係でアイコンが欲しい時はぜひ使ってください。
ちなみに、SVGを書くにあたり、MDNの情報(どのように書けるか、どのような要素があるかが簡単にまとめられています)や仕様の日本語訳(描画方法などについての仕様がわかり、より良い画像を作れるようになる気がします)を参考にしました。どちらも日本語の部分が多く、読みやすいので興味のある人はSVGでなにか作ってみると楽しいかもしれません。読んでみると、SVGが非常に高性能で、WEB技術との親和性が非常に高いフォーマットだと分かるはずです。ちなみに、このロゴのSVGは書いたまんまファイルサイズを小さくしようとかしていないので、普通にテキストエディタで開いて読むことが出来ます。参考にどうぞ。

もうひとつ、このブログ用にWordpressのロゴをパクった参考にしてfaviconも制作しましたが、こちらは特に言うことはありません。最初は複数の解像度に対応しようと思っていましたが、16×16を描いて力尽きたため、他の解像度はありません。ちなみに、背景を白以外にすると粗が出ます。そのうち修正するかも。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です