2023年8月3日(木)2023年8月26日(土) 投稿者: iwbjp

X (旧Twitter)のSVGロゴアイコンの作成方法と保存場所

X (旧Twitter)のSVGロゴアイコン
SVGロゴアイコンの作成方法と保存場所
SVGをPNGにする

X (旧Twitter)のSVGロゴアイコン

Twitterの名称がXに変更され、ロゴのアイコンも青い鳥から黒いXに変更されました。

今後はWebサイトで使用されているTwitterアイコンをXアイコンに差し替える作業が必要となります。

SVGロゴアイコンの作成方法と保存場所

Xの黒のSVGのロゴのアイコンの素材は、公式では用意されていません。

しかし、XのヘルプセンターなどのXのロゴのアイコンがSVGになっているので、これを利用すればXのロゴをSVGで作成できます。

SVGのコード作成

Xの公式サイトで使用されているSVGのパスを不要なコードを除くと以下のようになります。

<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
  <path d="m714.163 519.284 446.727-519.284h-105.86l-387.893 450.887-309.809-450.887h-357.328l468.492 681.821-468.492 544.549h105.866l409.625-476.152 327.181 476.152h357.328l-485.863-707.086zm-144.998 168.544-47.468-67.894-377.686-540.2396h162.604l304.797 435.9906 47.468 67.894 396.2 566.721h-162.604l-323.311-462.446z"/>
</svg>

もし、黒にしたい場合は<rect>を追加して背景を黒にして、pathに「fill="#fff"」を追加します。

※ rectに「fill="#000"」が付いていないのはデフォルトが「fill="#000"」なので省略しています。

<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
  <rect height="100%" width="100%"/>
  <path d="m714.163 519.284 446.727-519.284h-105.86l-387.893 450.887-309.809-450.887h-357.328l468.492 681.821-468.492 544.549h105.866l409.625-476.152 327.181 476.152h357.328l-485.863-707.086zm-144.998 168.544-47.468-67.894-377.686-540.2396h162.604l304.797 435.9906 47.468 67.894 396.2 566.721h-162.604l-323.311-462.446z" fill="#fff"/>
</svg>

SVGの余白追加

SVGに余白を追加する場合はviewBoxとpathのd属性の数値を変更します。

viewBoxとpathのd属性の数値を計算するのは難しいですが、Illustratorのアートボードオプションで編集して余白を追加すると簡単にできます。

<svg viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg">
  <rect height="100%" width="100%"/>
  <path d="m1014.2 805.8 446.7-519.3h-105.9l-387.9 450.9-309.8-450.9h-357.3l468.5 681.8-468.5 544.6h105.9l409.6-476.2 327.2 476.2h357.3zm-145 168.5-47.5-67.9-377.7-540.2h162.6l304.8 436 47.5 67.9 396.2 566.7h-162.6z" fill="#fff"/>
</svg>

SVGの角丸追加

SVGを角丸にするにはrectにrxとryの値を追加します。

今回作成したSVGはrxとryに10%を指定しました。

<svg viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg">
  <rect height="100%" width="100%" rx="10%" ry="10%"/>
  <path d="m1014.2 805.8 446.7-519.3h-105.9l-387.9 450.9-309.8-450.9h-357.3l468.5 681.8-468.5 544.6h105.9l409.6-476.2 327.2 476.2h357.3zm-145 168.5-47.5-67.9-377.7-540.2h162.6l304.8 436 47.5 67.9 396.2 566.7h-162.6z" fill="#fff"/>
</svg>