2020年6月22日

SVG画像のpathをシンプルに書く方法

拡大してもぼやけません。ということで、ブラウザ対応状況も落ち着いてきたこともあり、よく使用されるようになってきたSVG形式の画像。今回はそのSVG画像のpathをシンプルに書く方法です。

SVG画像の基本的な状態

まず以下の状態を空の状態としておきます。


	

イラストレータ等でSVG画像として書き出すと、svgタグにpathというタグが囲まれた状態で出力されると思います。このsvgやpathには多くの無駄な情報が含まれていることがあるので、必要な情報だけ抽出して差し替えていきましょう。

SVG画像のサイズを指定

サイズは「viewBox」と「width」「height」で指定します。

まず「viewBox」はキャンバスの大きさを指定する属性で、「x, y, width, height」の4つの数値で指定します。x,yは左上を基準にした座標の位置なので、アイコンのような画像であれば 0 0 で良いでしょう。width, heightは横幅と縦幅です。

「width」「height」は見たまんま、横幅と縦幅の指定で、実表示のサイズを指定します。これらはsvgタグに記述します。追記すると以下のようになります。


	

SVG画像のパスや色を指定

続いてパスや色の情報を指定します。色は「fill」、パスは「d」で指定します。

「fill」にはCSS等でお馴染みの#から始まるHexの値で指定します。白なら「#ffffff」、黒なら「#000000」等ですね。

「d」にはイラストレーター等から出力したファイルに含まれる「d」の値をそのまま指定します。


	

これでこのような検索用アイコンが表示されます。

SVG画像のサイズを変更

SVG画像のサイズを変更する際は、widthとheightを変更します。この時、viewBoxの値は変更しません。以下の例だと、横64px縦64pxのキャンバスにある画像を横128px縦128px=2倍で表示する、という指定になります。


	

これでアイコンが2倍サイズで表示されました。

以上、SVG画像のpathをシンプルに書く方法でした。

コメントを残す

メールアドレスが公開されることはありません。