X（旧Twitter）ロゴのダウンロードURLとSVGコード。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
Xロゴの公式ダウンロードURL。
𝕏のロゴ
現時点（2023年11月初旬）では、日本語のダウンロードサイトが見つからないが、英語で「x logo download」と検索すると、下記のページが表示される。
Brand toolkit
𝕏ロゴのダウンロードURL：https://about.twitter.com/en/who-we-are/brand-toolkit
公式ロゴはこの「Brand toolkit」のページからダウンロードができる。
𝕏ロゴのSVGコード。
SVGコード。
上記のサイト左上のロゴのソースで、SVGコードも確認できる。
HTML
<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="none" class="u01b__icon-home">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path>
</svg>
CSS
そのままだと大きいので、CSSで幅を30%にし、真ん中に配置した場合。
svg {
width: 30%;
margin: auto;
}
実際の表示。
X（旧Twitter）ログインページでのロゴ。
このページでのロゴは「Brand toolkit」のロゴと太さなどがちょっと違っている。
HTML
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-rxcuwo r-1777fci r-m327ed r-dnmrzs r-494qqr r-bnwqim r-1plcrui r-lrvibr">
<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">
</path>
</g>
</svg>
CSS
例として、CSSで幅を30%にし、真ん中に配置。
svg {
width: 30%;
margin: auto;
}
実際の表示。
SVGコードはコピペでイラレやFigmaへ貼り付けられる。
Illustrator
イラレへコピペした場合。自動的にベクター画像となる。
Figma
Figmaへコピペした場合も同様。
ロゴの色などはガイドラインによって決められているので、勝手に変更しないように注意が必要。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
