2015/08/15SVGファイルをHTMLに埋め込むときにつまずきがちな塗りの色指定についての解説。ベクターフォーマットの特性上、従来のcolor属性による指定では正しくマッチングしないのが原因です。twitterfacebookhatebugooglepluspocketlineスマホファーストが叫ばれるようになって久しい昨今ですが、Retina対応にピクセルベースで2x画像を用意するのは大変な労力です。Graphics)フォーマット。扱ったことがなくてもWebフォントなどで間接的に触ってる方も多いでしょう。CSSで手軽に装飾できるWebフォントと違ってSVG形式データを直接叩くのは多少癖があるかも知れません。ウェブフォントの延長でSVG画像を扱うとき最初につまづきがちなのがcolor指定じゃないでしょうか。中でもパスオブジェクトの塗りは枠線を塗るstrokeと内部を塗るfillプロパティに分かれるのが特徴。SVG画像の元データがIllustratorなどで作成されることを考えればイメージしやすいと思います。ここでHTMLに埋め込まれたSVG画像を単純にcolorで塗ろうと思っても、マッチングが微妙に成立してないので指定がうまく効きません。SVGにCSSで色指定をする指定が効かないのは正確に値を受け取れてないだけなので、そこがきちんと通るように修正します。タグでグループ化すると効率的でしょう。currentColorcurrentColor指定は、親要素の色指定のうち、最後に一致した値を継承するものです。カラープロファイルのうち一致するものが見つからなければ無視されます。Useで引くとこんな感じでした。etc最も基本となるSVG1.1の対応状況は95.79%。IE8に対応しなければならない環境を除いて今や十分に使える技術と言えます。ベクター画像であることを生かしてJavaScriptと連携すると表現の幅が広がりますね。近頃ちょっと変わったエフェクトだなと思うサイトでSVGが使われてる例をよく見かけます。レスポンシブデザインとも非常に相性が良いので、適材適所でうまく取り入れていきましょう。】Webフォント制作時のSVGは保存形式で劇的に軽量化するよ!Illustratorが吐くコードが割と最適化されてない話。見るおち研についておち研は日常を雑学する野良研究所です。お探しの記事がありましたら検索窓や過去記事一覧もお試し下さい。Mizuki花鳥風月をこよなく愛する体育会系。趣味はバラバラに見えて科学繋がりです。人気かも知れない記事チョコレートをレンジでチンして光の速さを計算してみる313users「電気を食べて生きる微生物」の何がスゴイか判らない全ての人へ!212users槇原敬之「もう恋なんてしない」の文法がおかしいと言われる件。コメントをキャンセルメールアドレスは開示されません。エラーが出たら違うCaptchaコードもお試し下さい。