SVG アイコン

SVGアイコンはSVG画像であり、Webアプリケーションやモバイルアプリケーション内でアイコンや画像ボタンとして使用されます。SVGアイコンはロゴにも使用できます。このSVGアイコンチュートリアルでは、自分自身のSVGアイコンを作成する方法や、どこで高品質なプレセットSVGアイコンをダウンロードできるかを説明しています。

SVGアイコンの利点

SVGアイコンを使用する利点は、アプリケーション内で表示する場所や表示するアプリケーションのスクリーンサイズによって、アイコンを簡単に縮小・拡大できることです。SVGアイコンは、位図画像に比べて、縮小・拡大しても見た目が良いという利点があります。位図画像は拡大するとピクセル化し、縮小すると質が失われます（ピクセル化）。

WebアプリケーションでSVGアイコンを使用する

WebブラウザでSVGを表示する方法について説明すると、いくつかの方法があります。WebブラウザHTMLページの一部としてSVGを表示する場合、HTMLのimg要素を使用してアイコンを表示するのが最も簡単です。HTML img要素はSVGアイコンの大きさを簡単に拡大・縮小できます。

以下はimg要素がSVGアイコンを表示する例です：

<img　src="svg-icon.svg">

SVGアイコンの大きさを拡大・縮小するには、CSS widthやheightスタイル属性を使用します。以下はCSS Height Style属性が追加されたimg要素の例です：

<img　src="svg-icon.svg"　style="height:32px">

SVGアイコンを拡大・縮小する際にアスペクト比を保つために、widthまたはheightの1つだけを設定する必要があります。 - この2つの値を同時に設定することはできません。width属性の1つだけを設定すると、ブラウザはもう一方の軸に応じてSVGアイコンを縮小し、SVGアイコンがそのアスペクト比を保つようにします。

独自のSVGアイコンを作成する

SVGアイコンを作成する必要がある場合があります。SVGアイコンは、独自のSVGファイルに含まれるSVG画像です。以下は非常にシンプルな円アイコンの例です。これはSVG circle要素で構成されています：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

以下はSVGアイコンとimg要素を一緒に表示した際の見た目です：

ただし、img要素を使用してこのSVGアイコンを表示し、img要素の大きさを拡大・縮小すると、SVGアイコンは拡大・縮小しません。代わりに、SVGキャンバスが少しずつ表示されます。以下はimg CSS Height属性が設定された例です：32例：

円の一部だけを表示する方法、全体を縮小するのではなく比例を保つ方法について説明します。

この問題の原因はSVG画像ファイルに欠けている情報です。SVG viewBox属性に値を設定する必要があります。SVG viewBox属性は、XとYの方向でどれだけのSVGキャンバスを表示するかを指定します。

私たちの例では、SVGキャンバスの円アイコンを含む部分だけを表示したいだけです。このエリアは点0,0から点まで延びています。128,}128（円の半径が64、64、64中心）。　SVG Viewbox属性を使用して、SVGキャンバスのこのエリアのみをレンダリングすることができます。以下はViewbox値が設定されたSVG円アイコンの外観です：

<svg　xmlns="http://www.w3.org/2000/svg"　　xmlns:xlink="http://www.w3.org/1999/xlink"　　viewBox="0　0　128　128">
　　　　<circle　cx="64"　cy="64"　r="64"　style="fill:　#00ccff;"></circle>
</svg>

これは表示される SVG アイコンで、高さがそれぞれ32、48および64ピクセル：