svgのサイズ調整をしながらviewBoxを理解する

はじめに

普段Web開発でアイコンを入れたりするとfigmaからsvgをコピーしてコンポーネントの中に入れることってよくありますよね。

先週は、すでにプロジェクト内に存在するsvgをサイズだけ小さくして入れる必要がありました。
そこで、いつものようにfigmaからコピーして入れていたら、レビューで「これはすでにあるやつを再利用したいですね」と提案されました。

今まではsvgを勝手に触ったら形が崩れる経験しかしていなかったため苦手意識がありました。
それが、調べてみたら案外簡単な概念だったためブログとして残したいと思います。

tl;dr

すでに持っているSVGのサイズだけを変更したい場合、widthとheight属性を操作するだけで簡単に実現できます。

しかし、なんでそうなるかを完全に理解するには、viewBoxの役割も理解する必要があります。

SVGのサイズ調整の基本

SVGのサイズを調整するには主に2つの方法があります。

1. widthとheight属性を直接変更
2. CSSでサイズを指定

どちらの方法でも、SVGの比率を維持しながらサイズを変更できます。
cssで簡単に変えられることは、UIライブラリでwidthなどを指定してアイコンのサイズ調整をしたことがある方なら当然だと思うかもですね。

<!-- 幅と高さを直接指定 -->
<svg width="200" height="100">...</svg>

<!-- CSSでサイズ指定 -->
<svg style="width: 200px; height: 100px;">...</svg>

viewBoxとは何か？

それじゃviewBoxってなんでしょうか？

viewBoxはSVGのコンテンツを表示するための「ウィンドウ」または「視野」を定義します。

現実世界にものが置かれていても私たちの目に見えるものしか認識できないのと同じく、svgはviewBoxの範囲内のものだけを表示します。

以下のような4つの数値で構成されています。

viewBox="min-x min-y width height"

• min-x, min-y: 表示領域の左上隅の座標
• width, height: 表示領域の幅と高さ

例えば、viewBox="0 0 100 50"で、座標(0,0)から始まって幅100、高さ50のビューポートを定義することができます。

viewBoxの重要性

viewBoxを使って、SVGのコンテンツと表示領域との関係を定義することができます。

以下のようなことができます。

1. 縦横比の維持
2. 拡大・縮小の制御
3. 座標の指定

実際のユースケース

以下はフレームワーク別のsvgのサイズ調整のやり方の例を残しています。
ご参考までに！

React

import React from 'react';

const IconComponent = ({ width = '24px', height = '24px' }) => {
  return (
    <svg 
      width={width} 
      height={height} 
      viewBox="0 0 24 24" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" 
        stroke="currentColor" 
        strokeWidth="2" 
        fill="none" 
      />
    </svg>
  );
};

export default IconComponent;

Vue

<template>
  <svg 
    :width="width" 
    :height="height" 
    viewBox="0 0 24 24" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" 
      stroke="currentColor" 
      stroke-width="2" 
      fill="none" 
    />
  </svg>
</template>

<script>
export default {
  name: 'IconComponent',
  props: {
    width: {
      type: String,
      default: '24px'
    },
    height: {
      type: String,
      default: '24px'
    }
  }
}
</script>

Svelte

<script>
  export let width = '24px';
  export let height = '24px';
</script>

<svg 
  {width} 
  {height} 
  viewBox="0 0 24 24" 
  xmlns="http://www.w3.org/2000/svg"
>
  <path 
    d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" 
    stroke="currentColor" 
    stroke-width="2" 
    fill="none" 
  />
</svg>

おわりに

こういう知識を知っているだけで開発するとき時間節約に繋がることを感じるので、色々な分野をもっと勉強していきたいですねー