今回の仕上がりは、こんな感じ
480×280のキャンバスに、黒い線と白い塗りで丸と長方形を並べました。下はエディタ画面ではなく、実際に保存したSVGです。画像を押すとファイルそのものを開けます。
編集部が図形ツールで描いた練習用の図です。外部の画像、ロゴ、AI生成画像は使っていません。この図だけをCC0で提供します。記事やMethod Draw本体をCC0として配布するものではありません。
サイズの数字は、ダブルクリックして入力する
公式エディタを開くと、左に描画ツール、右に「Canvas」の設定があります。「Title」へ図の名前を入力しました。この名前がそのまま保存ファイル名になるとは限りません。
右の「Width」と「Height」は、今回の環境では通常のクリックだけでは文字を入力できませんでした。数字をダブルクリックすると入力できたので、Widthを480、Heightを280にして、それぞれEnterで確定しました。
左の四角形の道具にポインターを重ねると「Square/Rect Tool」と表示されます。選んでキャンバス上を斜めにドラッグすると、長方形が描けます。次に「Ellipse/Circle Tool」を選び、縦横が同じ長さになるようドラッグして丸を描きました。正確な寸法にそろえる操作は今回試していません。
線を手で何本もつなぐより、道具を選んで一度のドラッグで輪郭を作れる点が便利でした。塗りや線幅は変更していないため、色の設定手順はこの紹介の確認範囲に含めません。
「Save Image...」でSVGを保存し、中身を確かめる
左上の「File」を押し、「Save Image...」を選びます。今回、最初の操作では保存イベントを取得できませんでした。ページを読み直した後、描画が残っていることを確かめて同じ項目を選ぶと、svg.svgがダウンロードされました。掲載用にはcircle-and-square.svgへ名前を変えています。
ダウンロードが始まらないときは、先に描画を残す方法を確保してください。今回の図は読み直しても残っていましたが、あらゆる環境での復元を保証するものではありません。タブを閉じる前に、ブラウザのダウンロード一覧と保存先で実ファイルを確認します。
エディタ上でCtrl＋Uを押すと、SVGのコードを表示できました。保存ファイルにもwidth="480"とheight="280"、四角形のrectと丸のellipseがありました。ブラウザでSVGを開き、二つの形が表示されることも確かめます。
「Export as PNG」は別の操作です。SVGとして残したい場合は、拡張子と中身を確認します。SVGは図形をコードで表す形式なので、今回のような簡単な輪郭を使い回す練習に向いています。
シンプルな図を作る道具として使う
今回の描画とSVG保存は、登録・インストール・支払いなしで試せました。公式READMEでも簡単な図形編集を目的とし、多機能な編集にはSVG-Editを案内しています。複雑な制作まで一つで済むとは紹介しません。
ソフトウェアはMITライセンスです。コードの再利用・配布には著作権表示と許諾文を残す条件があります。これはツール本体の条件であり、読み込んだ他人の素材を無条件で公開できるという意味ではありません。
PCでキャンバス寸法の入力、二つの図形の描画、ソース表示、SVG保存を確認しました。スマホ実機での編集、文字入力、画像取り込み、PNG出力、別アプリへの取り込みは未検証です。最近のX投稿や反響も確認できていません。手描き風の図ならExcalidraw、既存のSVGの点を調整するならSVG Path Editorも選択肢になります。