webフォントを使用するように、SVG画像をCSSの:beforeや:afterで使用したいときがあります。 しかしSVG画像をbackground-image:で使用すると、webフォントのようにcolor:#XXXXXX;で色を変更することができません。 なんとかならないかと調べた結果、CSS内にSVG画像を直接取り込んで色を変更する方法を見つけたので、取り入れてみました。 画像を作る 当サイトのTwitterへのリンクでは、Twitter公式のBrand Resourcesで入手したアイコンの横に矢印を追加したものを使用しています。 22px×14pxの実寸で作成してあります。Inkspaceで編集し、svgo-guiで最適化しました。 10倍に拡大すると、こんな感じです。のちの作業を楽にするため、アイコンと矢印は別の色にしてあります。 SVGなので、拡大しても綺麗ですね。 ちなみに
![background-imageとして使用しているSVGの色を変更したい | chlonolog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6acc0922ed69503bd0b4fd090281c02b8917ad5/height=288;version=1;width=512/http%3A%2F%2Fchlono.e-whs.net%2Fimages%2Fsass-logo.png)