SVGの色を変える
「色の検索と置換」を開くと、図で使われているすべての色が一覧になります。1色を選んで新しい色を指定すると、その色を使う塗りと線がグラデーションも含めてまとめて変わります。一部だけ変えたいときは、その部分をクリックしてプロパティパネルで塗りや線を設定します。
SVGを開いて要素の色や位置、形を変更。図形、テキスト、ペンでゼロから描くこともでき、SVGやPNGで書き出せます。
「色の検索と置換」を開くと、図で使われているすべての色が一覧になります。1色を選んで新しい色を指定すると、その色を使う塗りと線がグラデーションも含めてまとめて変わります。一部だけ変えたいときは、その部分をクリックしてプロパティパネルで塗りや線を設定します。
テキストをダブルクリックして書き換え、フォント、サイズ、太さ、字間、色を変更できます。書き出したSVGでもテキストは本物のテキストのままです。フォントがない可能性のあるカッティングマシンや印刷所に渡すときは「テキスト→パス」を使います。
ドキュメントパネルでSVGの幅と高さを設定でき、viewBoxは比率を保ったまま追従します。「ドキュメントを図に合わせる」を使うと、描かれた部分にキャンバスがトリミングされます。周りに余白が多すぎるアイコンを直す定番の方法です。
別のSVGや画像を図に追加して、各パーツを移動・整列・グループ化できます。図形は1つの輪郭に合体(結合)、重なりで切り抜き(型抜き)、重なった部分だけ残す(交差)、重ならない部分だけ残す(中マド)ことができます。
カッティングマシンが読むのはフォントではなくパスです。テキストをパスに変換し、つながった文字を合体して1つのパーツとしてカットされるようにし、カットしない部分は削除します。その後SVGをダウンロードし、Cricut Design SpaceやSilhouette Studioに読み込みます。
「最適化したSVGをダウンロード」は、SVGOでエディターのデータ、メタデータ、不要な精度を取り除きます。PNGからトレースした図なら、スムージングのスライダーで形を保ったまま余分なアンカーポイントを減らせます。ファイルサイズが半分ほどになることもよくあります。
.svgファイルをドロップするか、SVGコードを貼り付けるか、白紙に描きます。ファイルはレイヤー、色、テキスト、サイズがそのままの状態で開きます。
要素をクリックして塗り、線、グラデーション、不透明度を変更します。テキストはダブルクリックで書き換え、ハンドルで移動・拡大縮小・回転できます。Shift+クリックで複数選択できます。
1つの色をまとめて置き換えたり、別のSVGや画像を図に追加したり、整列やグループ化をしたり、合体・型抜き・交差・中マドで図形を組み合わせたりできます。
SVGをそのまま、または最適化してダウンロード。PNG(1×・2×・4×)、JPG、WebPで書き出すことも、SVGコードをコピーすることもできます。
キャンバス上の要素をクリックして選択すると、右の「プロパティ」パネルに現在の塗りと線の色が表示されます。カラーピッカーを使うか、16進数の値を入力すれば、リアルタイムで色が変わります。
まとめて変えたいときは、「色の検索と置換」を使いましょう。元の色と置き換える色を選んで「すべて置換」を押せば、その塗りや線の色を使っている要素がすべてすぐに更新されます。
変更はすべて即座に反映ラスター画像(PNG、JPG)から変換したSVGは、アンカーポイントが多すぎて、パスがガタガタになっていることがよくあります。パスのスムージング機能は、Paper.jsを使って、全体の形を保ったままパスを単純化します。
「単純化の許容値」のスライダーを調整します。値を小さくすると細部が残り、大きくするとポイントが少なく、なめらかな曲線になります。特定のパスだけなら「選択範囲に適用」、SVG全体なら「すべてに適用」を押しましょう。
選択範囲にもSVG全体にも適用可能オンラインSVGエディターについて知っておきたいこと