2023年7月、Twitterで長年使われていた青い鳥のロゴが「X」に変更された。
ここで紹介するのは「鳥」→「X」の変更ではなく、旧「X」→新「X」の変更。
まず2023年7月25日、X(旧Twitter)のHTMLソースを見てみると「X」のロゴがSVGで描かれており、以下のようなコードになっていた。
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g> <path d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0"/> </g> </svg>
なお、描画に関係のない余計なプロパティは省いた。
実際の表示は以下の通り。
その翌日(7月26日)再度HTMLソースを見てみると前日とpathが異なっており、以下のコードに変更されていた。
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g> <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/> </g> </svg>
この表示は以下の通り。
一見同じに見える。 分かりやすいように並べてみる。 左が旧X、右が新X。
「X」の線が太くなっている。
また、デザインとは関係ないが、以前はSVGの表示領域いっぱいに「X」が描かれていたが、新しい方は周囲に若干余白が設けられている。
ちなみにイーロン・マスク氏は太い線が気に入っていないようで、「元に戻す」とツイートしている。 時間の経過とともに進化するともツイートしており、今後も変更される可能性がある。
自分のサイトやブログで今すぐ「X」のロゴを使用したい場合、Xから直接SVGデータを取得できるが、上述のようにイーロン・マスク氏の意向で仕様が変わるので、現在の「X」のデザインもまた変わるかもしれない。
Xに変更直後、公式のロゴデータは配布されていなかったが、現在は配布されている。 Xについて | Xロゴ、ブランドガイドライン、ポストツール からダウンロードできる。 ここにある「Xロゴ」をダウンロードする。 SVG形式が1種類、PNG形式が2種類ある。 PNGの方は文字の色が黒のものと白のものがあるが、SVGはなぜか文字の色が白のものしかない。 SVGは簡単に色が変更できるので構わないが、黒色の文字で配布した方が分かりやすい気がしなくもない。
以下は文字の色を黒に変更したSVG。
線が細いタイプのロゴ。
また、 Font Awesome のようなSVGアイコンを配布しているサイトからダウンロードする方法もある。
以下はFont Awesome版。
以下は Bootstrap Icons 版。
X上などでよく使われている「𝕏」という文字がある。 Xのロゴに非常によく似ている。
これは数学用英数字記号の黒板太字という文字。 Unicodeで定義されており、コードは U+1D54F 。 Wikipediaの 黒板太字 に詳しく書かれている。
なお「𝕏」は、WindowsやMacなど環境(使用されているフォント)によって見た目が多少異なる。