SVGファイルをオンラインで編集

RayziaでSVGファイルを編集する方法

1. エディタを開く。 rayzia.comにアクセスし、/vector/ のエディタを開きます。ダウンロード不要で、始めるのにアカウントも要りません。Windows・Mac・Linux・ChromeOS・タブレットのどのブラウザでも動作します。
2. .svgを開くかドラッグで読み込む。 ファイルをキャンバスにドラッグするか、「ファイル」→「開く」を使います。RayziaはネイティブSVGとして読み込むため、すべての図形・パス・文字がロックされた画像ではなく、それぞれ編集可能なオブジェクトとして開きます。
3. 編集したい部分を選択して編集する。 要素をクリックして選択します。塗りや線を変えてSVGの色を変更したり、テキストをその場で打ち直したり、ペンに切り替えてベジェのノードをドラッグしてパスを変形したり。ハンドルをドラッグすればサイズ変更もできます。どの操作もアンドゥ1回で戻せます。
4. きれいなSVG、またはPNGで書き出す。 「書き出し」からSVGを選べば整ったファイルが得られ、ラスター画像が必要ならPNGも選べます。無料プランでSVG・PNG書き出しとクラウドファイル3件が使え、ProならPDF書き出しと無制限ストレージが加わります。

ビューアではなく、本物のエディタ

SVGを表示するだけのサイトはいくらでもあります。しかし、SVGを実際に加工して使えるファイルとして受け取れるサイトはずっと少ない。RayziaのドキュメントはSVGそのものなので、開いたファイルがそのまま編集対象です。パスはパスのまま、テキストは打ち直せるテキストのまま残ります。

それが最も効くのは、小さいのに厄介な修正のときです。アイコンセットの色替え、ロゴのワードマーク差し替え、コンバータが残したガタつくカーブの整え直し。実際のジオメトリの上で編集するため、書き出したSVGには余計なゴミではなくあなたのアートワークだけが含まれます。この背後にあるフルツールセットを知りたい方は、こちらの SVGエディタ と、搭載ツールの一覧をご覧ください。

いつものブラウザで動く

SVGをオンライン編集するのに必要なのはタブひとつだけ。RayziaはSkiaによるGPUアクセラレーションで動くため、要素の多いファイルをパンしてもノートPCでもなめらかです。作業中は自動保存され、接続が切れても動き続けます。

必要になれば、その先の機能も揃っています。レイヤー、複数アートボード、グラデーション、独自フォントのアップロード、タイ語などの複雑スクリプトの正しい表示、再利用できるシンボル、150+のライブエフェクト。1行の色修正ならほとんど触れずに済みますし、それで構いません。小さな編集が本格的なプロジェクトに育った日のために、そこにあります。

SVG編集についてのよくある質問