現場で役立つ、SVGアイコン調整術

全4回

SVGアイコンを実務で使いこなすための調整テクニックを解説。色・サイズ・線幅・余白などをスムーズに調整方法を紹介します。

最終回 SVGアイコンの余白の調整 - 3

最終回はviewBoxの値と、width属性、height属性を使ったSVGアイコンの余白の調整を解説します。少しややこしいですが、どの属性を設定すると、どのような調整ができるのかしっかり押さえましょう。

第3回 SVGアイコンの余白の調整 - 2

SVG属性のpreserveAspectRatio属性による配置や、余白の切り取りについても紹介します。

第2回 SVGアイコンの余白の調整 - 1

SVG属性のviewBoxとwidthとheightによって決まる表示領域とその余白との関係を解説します。

第1回 SVGアイコンの色指定を攻略する

Webサイトやアプリケーションでアイコンを使用する際、SVG形式を選択することには多くのメリットがあります。本記事では、アイコンにSVGを使う理由と、HTML/CSSで直接カスタマイズできる柔軟性について解説します。