【SVG】Clubhouseのスーパー楕円っぽい形でアイコン画像を切り抜く方法


  • 公開:
  • 更新:
  • 編集:
概要 ▶ Clubhouseのアイコンの楕円をSVGを使ってウェブページでも再現してみます
【SVG】Clubhouseのスーパー楕円っぽい形でアイコン画像を切り抜く方法

Clubhouseのアイコンの形って話題になっていますよね。

柔らかい四角みたいな。スーパー楕円っていうのですかね。

これは簡単には描けないみたいなので、Illustratorでそれっぽい図形をササッと作ってSVGで切り抜いてそれっぽくしてみようという企画です。


ヘッダー画像出典:‎「Clubhouse: Drop-in audio chat」をApp Storeで

目次 [ 隠す ]
Loading...

SVGを用意する

早速ですがClubhouseのアイコンみたいな図形をIllustratorで作ってみます。

作り方は樋口さんのツイートを参考に、丸を描いてアピアランスの「ワープ」→「膨張」→「-30%」としました(そのまんまや)。塗りは自分がわかるように「白」にしておきました。


この図形をSVGで書き出します。(参考:SVGを書き出す | Adobe Illustrator チュートリアル(Adobe))

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M128,64c-.28,21.19-4,38.74-14.77,49.23C102.74,124,85.19,127.72,64,128c-21.19-.28-38.74-4-49.23-14.77C4,102.74.28,85.19,0,64,.28,42.81,4,25.26,14.77,14.77,25.26,4,42.81.28,64,0c21.19.28,38.74,4,49.23,14.77C124,25.26,127.72,42.81,128,64Z"/></svg>

ここまで用意できたらできたも同然です。


HTMLを用意する

以下のページを参考に、HTMLを作成します。


切り抜きパスのHTMLを作成

切り抜きパスのHTMLを作ります。

先ほど作成したSVGタグに「width="0" height="0" style="position: absolute; top: 0; left: 0;"」を付けます。

※「viewBox="0 0 128 128"」の後ろの2つの数字はアイコンとして表示したいサイズにしておきましょう

他の「<path>」のタグ以外は削除します。

pathのタグの親に「<clipPath id="clip01">」を付けます。IDは好きに設定してください。


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="0" height="0" style="position: absolute; top: 0; left: 0;">
    <clipPath id="clip01">
        <path d="M128,64c-.28,21.19-4,38.74-14.77,49.23C102.74,124,85.19,127.72,64,128c-21.19-.28-38.74-4-49.23-14.77C4,102.74.28,85.19,0,64,.28,42.81,4,25.26,14.77,14.77,25.26,4,42.81.28,64,0c21.19.28,38.74,4,49.23,14.77C124,25.26,127.72,42.81,128,64Z"/>
    </clipPath>
</svg>


アイコン画像を表示するHTMLを作成

アイコン画像を表示するところに設定するHTMLを作成します。

<svg width="128" height="128" viewBox="0 0 128 128"> とアイコン画像のサイズでSVGタグを作ります。

※viewBoxの中の値は切り抜きパス用のSVGと同じに設定します

SVGタグの中身は「<image xlink:href="●画像のURL●" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#●切り抜きパスのID●)"/>」とします。


<svg width="128" height="128" viewBox="0 0 128 128">
    <image xlink:href="https://jdash.info/images/20130205-twitter-icon-2-128x128.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip01)"/>
</svg>


以上で完成です。


Clubhouseのアイコン表示っぽいSVG切り抜きを適用した例

このブログのアイコンで適用してみました。※以前のアイコンは少しだけ角丸の四角形でした。

以前のアイコン画像表示
Clubhouseっぽいアイコン画像表示

以前のアイコン画像表示
Clubhouseっぽいアイコン画像表示

結構いい感じの再現になったと思います。

ぜひ試してみてくださいね!

それでは、また。

カテゴリー:

このページをぜひシェアしてください