background-imageとして使用しているSVGの色を変更したい | chlonologwebフォントを使用するように、SVG画像をCSSの:beforeや:afterで使用したいときがあります。 しかしSVG画像をbackground-image:で使用すると、webフォントのようにcolor:#XXXXXX;で色を変更することができません。 なんとかならないかと調べた結果、CSS内にSVG画像を直接取り込んで色を変更する方法を見つけたので、取り入れてみました。 画像を作る 当サイトのTwitterへのリンクでは、Twitter公式のBrand Resourcesで入手したアイコンの横に矢印を追加したものを使用しています。 22px×14pxの実寸で作成してあります。Inkspaceで編集し、svgo-guiで最適化しました。 10倍に拡大すると、こんな感じです。のちの作業を楽にするため、アイコンと矢印は別の色にしてあります。 SVGなので、拡大しても綺麗ですね。 ちなみに
