変わった図形のサムネイル実装方法

悩んでいる人

・変わった図形のサムネイル実装方法を知りたい

・変わった図形の実装方法を知りたい

今回作ったのは以下のようなものです。

実際に案件で使用した図形になります。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

とらまる

このブログ「とらまるブログ」の運営者。2021年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。これまでのWeb制作実績は40件以上。

前提条件
SVGとは？
SVG素材を作成・書き出し
HMTLに貼り付け
SVGの形状に合わせて画像を切り抜く方法
1. clippathとは?
2. clippathを使用してサムネイル作成
まとめ

前提条件

基本変わった形状のものは、画像などで書き出して使用すれば問題ないと思います。

今回の実装が必要になる条件は、

・変わった形状の中に画像が埋め込まれている。
・ホバー時に形状はそのままで画像を拡大・縮小する時

上記Codepenを確認してもらえるとわかると思いますが、形状は変わらず、画像が拡大・縮小すると思います。

Fさん

サムネイル画像などでよく見られるパターンですね。

とらまる

そのとおり！変わった形状のサムネイルをイメージするといいと思います。

SVGとは？

変わった形状や複雑な形状の作成・書き出しは、SVGファイルとして保存・使用します。

SVGとは、「Scalable Vector Graphics」の略称です。
テキストベースのベクター形式で、ウェブサイトやアプリケーションで使用される画像形式です。
拡張子は.svgになります。

ベクター形式とは、画像や文字などの2次元情報を数値化して記録しており、ブラウザがその場で描画してくれます。解像度を気にすることも、画像を拡大縮小しても画質が劣化せず、自由にカスタマイズできます。

SVG素材を作成・書き出し

主にSVG素材の作成・書き出しは、イラストレーターでおこないます。

素材をイラストレーターで作成し、書き出しのファイル形式からSVGを選択して出力します。

見やすくするために背景色をわざと入れてます。

HMTLに貼り付け

書き出したSVGファイルをVSコードで開きます。
開いたコードには、不要なデータも含まれているので、不要な部分を削除します。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" width="330mm" height="315mm" viewBox="0 0 935.43 892.91">
  <defs><style>.cls-1{fill:#00dbff;stroke-width:0px;}</style></defs>
  <path class="cls-1" d="m504.7.76c232.86-14.28,429.66,174.47,430.73,401,1.09,230.16-200.25,422.44-436.67,404.46l-428.48,1.17L0,892.91V.76h504.7Z"/>
</svg>

不要なデータを削除したコードが以下になります。この状態でHTMLに貼り付ければ、問題なく表示されると思います。サイズは、svgタグ内のwidth、heightでも指定できますし、クラス名やid名をつけてcssで指定することもできます。

<svg id="_レイヤー_1" width="330mm" height="315mm" viewBox="0 0 935.43 892.91">
  <defs><style>.cls-1{fill:#00dbff;stroke-width:0px;}</style></defs>
  <path class="cls-1" d="m504.7.76c232.86-14.28,429.66,174.47,430.73,401,1.09,230.16-200.25,422.44-436.67,404.46l-428.48,1.17L0,892.91V.76h504.7Z"/>
</svg>

SVGの形状に合わせて画像を切り抜く方法

次にSVGの形状に合わせて画像を切り抜いて、以下の動画のようにSVGの形状と画像を組み合わせて、サムネイル仕様にしたいと思います。

clippathとは?

画像の切り抜きには、clippathを使用します。

clippathとは、指定をした特定の形に切り抜くためのCSSプロパティです。
内部のコンテンツは表示され、外部のコンテンツは非表示になるクリッピング領域（切り抜いてその部分を表示）を作成します。

以下が clip-path プロパティの構文です。

clip-path : clip-source | [ basic-shape || geometry-box ] | none

clip-source (今回使用する方法)	SVG の clipPath 要素の定義を参照してクリッピング
basic-shape	基本シェイプを定義してクリッピング
basic-shape geometry-box またはgeometry-box basic-shape	basic-shape と geometry-box を両方指定する場合（※）：ジオメトリボックスを基準ボックスとして基本シェイプでクリッピング
geometry-box	geometry-box だけを指定する場合（※）：ジオメトリボックスが生成する辺を切り抜きパスとしてクリッピング
none	初期値。クリッピングパスは作成されない

clippathを使用してサムネイル作成

今回は、clip-sourceを使用して作成します。clip-pathプロパティでは、SVGのclipPath要素の定義を参照してクリッピングすることができます。

clipPath要素はsvg要素内で定義します。基本的にはdef要素の中で定義します。

切り抜きに使用するパスをclipPath要素として用意しておき、ID名（card__svg）をつけておいて、clip-path: url(“#card__svg”);で呼び出します。

このsvgは、width=”0″ height=”0″としておき、単体としての表示がされないようにしておきます。

<!-- サムネイル -->
<div class="c-card__thumbnail">
  <a class="c-card__thumbnail__link" href="article_detail2.html" aria-label="詳細を見る">
    <img class="c-card__img" width="100%" height="100%"
      src="img/desktop-computer.jpg" alt="">
  </a>
</div>

<!-- インラインSVG -->
<svg width="0" height="0" viewBox="0 0 400 400">
  <def>
    <clipPath id="card__svg" clipPathUnits="objectBoundingBox">
      <path transform="scale(0.00107,0.00112)"
        d="M504.7.76c232.86-14.28 429.66 174.47 430.73 401 1.09 230.16-200.25 422.44-436.67 404.46l-428.48 1.17L0 892.91V.76h504.7Z">
    </clipPath>
  </def>
</svg>

今回の例ではimg要素の親要素のクラス（c-card__thumbnail__link）に対してclip-pathを設定し、定義した clipPath 要素を参照します。

img要素に画像を指定します。子要素であるimg要素に対して、transform: scale(1.05);を指定することで、枠内で画像が拡大・縮小の表現が可能になります。

c-card__imgクラスに対して、clip-pathを指定すると図形自体が拡大・縮小するので、きおつけてください。

.c-card__thumbnail__link {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 350 / 330;
  clip-path: url("#card__svg");
}

.c-card__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: .6s;
  aspect-ratio: 350 / 330;
  vertical-align: bottom;

  &:hover {
    transform: scale(1.05);
    background-color: #a300f5;
    opacity: .7;
  }
}