※記事内に広告を含みます
皆さん、本日も閲覧ありがとうございます。
山本電卓と申します。
2020年9月30日にイラスト・漫画制作ソフトCLIP STUDIO PAINT（クリップスタジオペイント）のアップデートが公開され、新しい機能が追加されました。
その中の1つにSVG形式の対応というものがあります。
今回はこのSVGとはどういうものか、その対応とはどういうものかを紹介させていただきたいと思います。
それではよろしくお願いいたします
( ｀・∀・´)ﾉ！
▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】
CLIP STUDIO PAINT PRO
▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】
CLIP STUDIO PAINT EX
CLIP STUDIO PAINT（クリスタ）新対応の「SVG」って何？
「SVG」とはデータ形式（ファイル）の種類の1つ
「SVG」とはJPEGやPSDなどと同じように保存可能なデータ形式（ファイル）の1つで、拡張子は「.svg」です。
このSVGとは「Scalable Vector Graphics」の略で、「大きさを変えられるベクター画像」という意味になります。
このデータ形式は画像をデータ※として扱っている為、その名の通り拡大・縮小しても劣化しないという特徴を持っています。
※画像を点の座標と線などの数値をもとに表示しています。
クリスタでいう所の「ベクターレイヤー」に似ていますね。
編集用データとして扱われることが多いSVGですがWEBデザインやアニメーションで使用されることもあるようです。
また、SVGは画素数が多くて情報量が大きくなる写真などを保存するには不向きなデータ形式とも言えます。
SVGデータを開くだけならブラウザでできる
SVGデータを開こうとするとブラウザの選択肢が表示されます。
「ブラウザ」とは今この記事を見ているようにインターネット上のWEBページを閲覧する為のソフトのことです。
Google ChromeやMicrosoft Edgeなどが有名ですね。
ブラウザを選択すると以下のようにブラウザ上でデータを見る事ができます。
「SVG」が使用（編集）できるソフト
SVGは上記のような特徴を持っている為、扱えるソフトも多くありません。
1番有名なのがAdobe Illustratorでしょう。
クリスタのリリースノートでもIllustratorの名前が挙げられていましたね。
その他にはCorel DRAWやInkscapeなどがあるようです。
CLIP STUDIO PAINT（クリスタ）でSVGを読み込みする（入力）方法
困った時は：クリスタのウィンドウ・アイコン・項目がない時の見つけ方！！
クリスタのメニューからSVGを読み込みする
クリスタが入っているデバイス内にSVG形式のデータが保存されている場合はクリスタのメニューから読み込みをすることができます。
キャンバスを作成している状態でCLIP STUDIO PAINT画面上部から「ファイル」→「読み込み」→「ベクター」と選択します。
※「ベクター」＝「SVG」ということになります。
するとデバイスのフォルダが開きますので保存されているSVGデータを選択して「開く」を選択、もしくはSVGデータをダブルクリックしましょう。
これでクリスタのキャンバス上にSVGデータをベクターレイヤーとして開くことができます。
レイヤーパレットを見ますと読み込んだSVGデータは「ベクターレイヤー」として表示されています。
クリップボードを利用したコピー&ペースト（貼り付け）でクリスタにSVGを読み込みする
※「クリップボード」とはコピー&ペーストなどをする際にデバイス内で一時的にデータを保存する場所です。
SVGデータを編集できるソフト上で［Ctrl（Command）］＋［C］などの操作でベクターデータをコピーし、
クリスタのキャンバス上で上部メニューの「編集」→「貼り付け」と選択、もしくは［Ctrl（Command）］＋［V］と入力することでもSVGデータを開くことができます。
↓
SVGデータをコピー&ペースト（貼り付け）で読み込みする場合の注意点…！
コピー&ペースト（貼り付け）でSVGデータを扱う場合、各ソフトでの設定が必要になります。
Illustratorの場合の設定
例えばIllustratorですと「環境設定」の「クリップボード」の項目に「コピー時：SVGコードを含める」などの項目があります。
ここにチェックが入っていないとベクターデータをSVG形式としてコピーしてくれません。
CLIP STUDIO PAINT側の設定
CLIP STUDIO PAINT画面上部から「ファイル（Mac OSの場合は「CLIP STUDIO PAINT」）→「環境設定」と選択して環境設定ウィンドウを表示させます。
その中の「コマンド」の項目の中に「貼り付け」の設定を行う箇所がります。
↑ここで「クリップボードにSVGコードがあるとき」の設定を「ベクター線に変換」にしておかないとペースト（貼り付け）したSVGデータがベクターレイヤーになってくれません。
クリスタへ読み込みしたSVGデータの特徴
クリスタへSVGデータを読み込みしますとベクターレイヤーになります。
クリスタのベクターレイヤーは性質上塗りつぶしができません。
しかし、Illustratorでは塗りつぶしもベクターデータとして制作することができます。
では塗りつぶしも含まれるSVGデータをクリスタで読み込んだ場合はどうなるかといいますと輪郭線だけに変換されて表示されます。
その為、塗りつぶし部分はラスターレイヤーを作成して輪郭線と同じ色で塗りつぶしを行う必要があります。
クリスタに読み込みしたSVGデータでできること
クリスタの編集機能が使える！
クリスタ上にSVGデータを読み込みしますとベクターレイヤーとして開く為、そこに描画されている線は「制御点」を持ったベクター線となっています。
ですのでクリスタの制御点操作による編集ができるようになります。
クリスタは便利！ベクター制御点ツールでこんなことができる！！
また、ベクター線は劣化しにくいので「変形」も自由にできます。
もちろん、追加で描画していくこともできますね。
クリスタの「ベクターから定規」機能で特殊な描画ツールも使用可能に！
クリスタではSVGデータの扱いが可能になったと同時に、ベクター線から「定規」を作成する機能もアップデートにより追加されました。
ベクターレイヤーを選択した状態でCLIP STUDIO PAINT画面上部から「レイヤー」→「定規・コマ枠」→「ベクターから定規」と選択することで選択したベクターレイヤー上に描画されている線と同じ形の「定規」を作成することができます。
↓
※↑青いラインが定規です。
レイヤーパレットにも選択したベクターレイヤーに定規が作成されたことを表すアイコンが表示されます。
クリスタの「定規」は作成された定規の形に描画ツールの動きを固定することができるものです。
ですので読み込みしたSVGデータから定規を作成することで、CLIP STUDIO PAINT特有のツールを使用して描き直すことができるようになるのです。
ただし、この方法で作成した「定規」は選択したベクターレイヤー上に作成されますので、新しいレイヤーに別のツールで描き直したい場合はドラッグ移動で定規を新しいレイヤーに移動させて使用しましょう。
クリスタの定規機能で描画ツールの動きを固定する機能は、
CLIP STUDIO PAINT画面上部メニューの「表示」内にある「定規にスナップ」にチェックが入っていることと、
描画ツール側のサブツール詳細で「スナップ可能」にチェックを入れることが条件になります。
CLIP STUDIO PAINT（クリスタ）でSVGを書き出しする（出力）方法
クリスタでSVGデータを書き出しする際の注意点…！
クリスタのキャンバス内にベクターレイヤーがある場合、SVGデータとして書き出すことができます。
その際に注意しなければいけないのは、ベクターレイヤーもしくはベクターレイヤーが入っているレイヤーフォルダーを選択しなければならないという点です。
ベクターレイヤーを選択している状態でないと書き出し作業を行うことができません。
※非表示のベクターレイヤーを選択していても書き出し作業を行うことができません。
また、この時のベクターレイヤーの選択は複数選択することもできます。
複数選択の中、もしくはレイヤーフォルダーの中にベクターレイヤー以外のレイヤーが入っていたとしても書き出し作業を行うことはできますが、ベクターレイヤー以外のレイヤーの情報はSVGデータとして反映されません。
クリスタのメニューからSVGデータを書き出しする
◆Ver.3以降の場合
クリスタでベクターレイヤーを選択している状態にしましたらCLIP STUDIO PAINT画面上部から「ファイル」→「その他の書き出し」→「ベクター書き出し」と選択します。
◆Ver.2以前の場合
クリスタでベクターレイヤーを選択している状態にしましたらCLIP STUDIO PAINT画面上部から「ファイル」→「ベクター書き出し」と選択します。
するとデバイスのフォルダが開きますので保存場所を選択し、必要であればデータ名を入力して「保存」を選択します。
これで指定したフォルダの場所に選択したベクターレイヤーがSVGデータとして保存されます。
また、複数のベクターレイヤーを選択していた状態でも1つのSVGデータとして保存されます。
しかし、複数のベクターレイヤーを書き出しした1つのSVGデータをIllustratorで開くと複数レイヤーで開きました。
クリップボードを利用したコピー&ペースト（貼り付け）でSVGデータを書き出しする
※「クリップボード」とはコピー&ペーストなどをする際にデバイス内で一時的にデータを保存する場所です。
ベクターレイヤーを選択している状態でCLIP STUDIO PAINT画面上部から「編集」→「ベクターをSVG形式でコピー」と選択します。
※通常のコピーではSVGデータとしてコピーできないので注意しましょう。
これででデバイスのクリップボードに一時保存することができますので、Illustratorなどの編集画面でペースト（貼り付け）作業をするとベクターレイヤーの情報をそのソフト上で開くことができます。
クリスタから書き出ししたSVGデータの特徴
クリスタはペイントソフトですのでペンや筆などのツールに加え、筆圧によるブラシサイズの調整やアンチエイリアス、ブラシ先端を変えて描画することもできます。
これらをベクターレイヤーの上で描画し、それをSVGデータとして書き出しした場合はどうなるのかという疑問が出てきます。
結論を言えばSVGデータとして書き出しされる情報は「線」「ブラシサイズ」「描画色」のみになります。
↑筆圧によって細く描画された線も元のブラシサイズの太さで統一された線になっています。
ですのでクリスタの「デコレーションツール」などで柄のある線を描画しても普通の線として書き出しされます。
CLIP STUDIO PAINT（クリスタ）でSVGデータを入出力できるようになったことによる利点！
クリスタはPSDデータを入出力できるため、Photoshopとは以前からデータの共有はできていました。
※Photoshopはベクターレイヤーに対応していません。
今回新たにSVGデータを扱えることになり、さらにデータを共有できるソフトが増えました。
特にIllustratorとの共有は大きいです。
Illustrator専用のデータ形式（AI）はイラストの仕事などでもクライアントから最終データとして要望されることが多いので、メインの制作をクリスタで行い、SVGデータをIllustratorに移して最終データをIllustrator形式で仕上げるというやり方もできるようになります。
また、制作データを共有することのできるソフトが増えれば各ソフトのいい所を利用しながら、もしくは各ソフトの苦手な部分を他のソフトで補いながら1つの作品を制作することができます。
CLIP STUDIO PAINT（クリスタ）でのSVGデータ取り扱いまとめ
2020年9月30日のアップデートにより、クリスタ特有のベクターレイヤーによるデータ情報がメジャーなIllustratorとの繋がりを持てるようになってさらにクリスタの幅が広がりました。
また、各ソフト特有の情報は共有できないという弱点も、同時にアップデートによって追加された「ベクターから定規」機能によって補うこともできています。
これからペイントソフトを探す方、Illustratorをお持ちで補助ソフトが欲しい方はクリスタをその候補に入れてみてはいかがでしょうか◎
それではここまで閲覧ありがとうございました！
お疲れ様でした！！
▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】
CLIP STUDIO PAINT PRO
▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】
CLIP STUDIO PAINT EX
▼動画視聴型お絵描き講座【Palmie（パルミー）】
