カテゴリー
メモ:PC設定

クリスタから出力したSVGに塗りつぶしを追加する

クリップスタジオを使ってSVGファイルを作成してから、それに塗りつぶしを追加してみます

  • クリップスタジオペイント(Clip Studio Paint)のベクターレイヤーはSVG形式に出力できます
  • ただし、出力されるのは線の部分のみです
  • 出力されたファイルを手直しして塗りつぶしなどを追加してみます

クリスタのベクターレイヤーからSVGファイルを作成する

クリスタでSVG出力できるのはベクターレイヤーの線の情報だけなので注意してくださいね

  1. 出力したいベクターレイヤーを選択する(複数選択可、ラスターレイヤーは対象になりません)
  2. 「ファイル > ベクター書き出し」で SVGファイルを作成できます
  3. SVGファイルをWebブラウザにドロップすると内容を確認できます

クリスタのベクターレイヤーは塗りつぶしの情報を持っていないため、出力された SVG ファイルに塗りつぶしはありません。塗りつぶしを指定したいときは、SVGファイルを直接テキストエディタで開いて修正したり、他のドローツールを使ってあらためて塗りつぶしを指定する必要があります

SVGファイルを直接書き換える

ちょっとした塗りつぶしならテキストエディタでできちゃいます

  • SVGファイルの中身はテキストファイルです。クリップスタジオから出力される内容は比較的シンプルです
  • ちょっとした塗りつぶし程度なら、テキストエディタ(メモ帳など)で開いて手動で書き換えるだけで修正可能です

手順はこんなかんじですね

  1. クリスタから出力された SVG ファイルをテキストエディタ(メモ帳など)で開きます
  2. <path ~ ではじまるのがパス(連続した線)です
  3. fill=”none” となっているところを fill=”#FF0000″ のように書き換えると、そのパスで囲まれたところが塗りつぶされます
  4. 色の指定は fill=”rgb(255,0,0)” のようにしても構いません
  5. fill-opacity=”0.5″ のような属性を加えると透明度を指定することもできます

Google Chrome を使って SVG ファイルの書き換えをしてみる

SVGファイルの修正をテキストエディタの代わりに Chrome(Webブラウザ)を使って行うと、どこをいじるとどうなるのか、画像を確認しながら簡単に実験することができます

  1. Chrome の画面にクリスタで出力した SVG ファイルをドロップする
  2. 表示された画像を右クリックして「検証」を選択
  3. 右に表示されるテキストを書き換えるとリアルタイムで画像に反映されます

ドローツールを使う

複雑な作業だとドローツールを使うしかないかも…

  • 出力されたSVGをドローツールに読み込んで修正します
  • 有料の Adobe illustrator がなくても、無料の inkscape などでも可能です