SVGで色を指定する方法&カラーパレット

最終更新日03 Mar 2017 14:18

g要素1個1個に指定することもできます

<g fill="red">

スタイルシートを使って一気に指定することもできます
<style>
.nameofclass{
    fill: "red";
}
</style>
<g class="nameofclass">

inkscape式の書き方

inkscapeではrgba(255,255,255,0.5)のような色形式は使用できません。
rgb(255,255,255)でアルファ値をfill-opacityで指定する形式ならokです

カラーパレットを使うには?

お気に入りの色を何回も登場させたい場合どうしたらよいでしょう?
SVGでパレットと名のつく機能はありませんが
<defs>の中の<linearGradient>をパレットがわりに利用できます。
stopcolorが1個だけのグラデーション=単色と考えるのです。
たとえば(Inkscapeで生成されたものを参考にしています)

<linearGradient id="blue">
      <stop style="stop-color:#98ecf7;stop-opacity:1;" offset="0"/>
</linearGradient>

SVG2だと<solid-color>タグで単色カラーパレットが指定できるらしいです[2]。


inkscape-colorpalette


files

サポートサイト Wikidot.com inkscape-colorpalette