「mask-image」でSVGアイコンの色をCSSで変えよう! ~mask-imageの便利な使い方紹介を添えて~ SVGで作成されたアイコン画像に対して、CSSで色を指定したいということありますよね。 そういった場合、SVGをインラインでHTMLに書き出し、fillで色を指定する方法が一般的でした。 しかし、IEのサポートが終了して対応の必要がなくなる今、SVGの色変えは mask-image で簡単に実現できます。 以下にその例を示します(ついでに mask-image のその他の使い方も紹介しています)。 mask-image とは? その名の通り、要素を マスク するCSSプロパティで、指定した画像で要素をくりぬく機能です。 IE以外の主要なブラウザでサポートされています。 ただし、Chromeや、(15.4より前の)Safariでは -webkit-mask-image として