今回の仕上がりは、水色の長方形
640×480のキャンバスに、180×120の長方形を一つ置きました。下は編集画面ではなく、エディタで確認したソースを保存したSVGです。塗りを水色、輪郭を濃い紺色にしています。
図は編集部が作った練習用です。他人の画像やロゴ、AI生成画像は使っていません。この図だけをCC0で提供します。ツール本体や操作画面をCC0として配布するものではありません。
「R」で長方形の道具を選ぶ
公式リポジトリから案内されているオンライン版を開きます。今回の初回画面では、ブラウザ内に設定や図を残すか聞かれました。「Do not store my preferences or SVG content locally」を選び、「Remember this choice?」を外して進めています。ブラウザ内の保存を使う場合とは条件が異なります。
キャンバスの外を選び、キーボードのRを押して長方形の道具に切り替えました。左の道具にポインターを重ねると「Square/Rect Tool」と表示されます。白いキャンバス上を斜めにドラッグすると、四角が描けます。今回の最初の図は赤く、以下の操作で水色に変えました。
ドラッグだけでは正確な寸法に合わせにくいため、この例の位置と大きさは次のソース編集でも指定しています。画面上の見た目と数値を照合する練習として使いました。
「U」で開き、fillとstrokeを変える
テキスト欄に入力していない状態でUを押すと、「Edit Source」の画面が開きました。そこに表示されるのは、現在の図を表すSVGコードです。変更前のコードを別に残してから編集します。
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
<rect fill="#0ea5e9" stroke="#172b3a" stroke-width="5"
x="99" y="99" width="180" height="120" id="svg_1"/>
</g>
</svg>rectは長方形です。fillは塗り、strokeは線の色、stroke-widthは線幅を表します。今回はfillを#0ea5e9、strokeを#172b3aにしています。全体を上のコードに置き換え、「Apply Changes」を押すと、この例の色と寸法になりました。
widthとheightは、外側のsvgではキャンバス全体、rectでは図形の大きさです。xとyは図形の位置です。同じ名前でも、どの要素の値かを見分けます。数値を変えたら図の位置や大きさも確認します。
コードを壊すと表示できなくなることがあります。まずはこの自作例で試し、他人から入手した出所不明のSVGやスクリプトを、そのまま貼り付けないようにしてください。
今回はコードをファイルに保存して確認した
エディタの保存操作では、今回の確認環境でダウンロードしたファイルを取得できませんでした。原因は特定していません。「Save as SVG」を押しただけで保存済みとは判断しないでください。
確認できた方法は、Uで再びソースを開き、コードをUTF-8のテキストとしてblue-rectangle.svgに保存する方法です。今回は表示されたソースをローカルファイルへ保存し、そのファイルを別のブラウザページで開いて、水色の長方形と寸法を確かめました。エディタの自動ダウンロードで取得したファイルではありません。
テキストエディタから保存する場合は、拡張子が.svg.txtになっていないか確認します。ファイルを開いて形が出ないときは、svgの開始タグ・終了タグや引用符が欠けていないかを見直します。タブを閉じる前に、保存先でファイルが存在し、開けることまで確かめます。
図とコードを行き来する練習に使う
今回のオンライン版での描画とソース編集は、登録・インストール・支払いなしで試せました。ソフトウェアはMITライセンスです。ツールのコードを再利用・配布する場合は、著作権表示と許諾文を残す条件があります。読み込んだ他人の素材まで自由に使えるという意味ではありません。
操作画面の出典はSVG-Edit、著作権表記はCopyright (c) 2009-2022 by SVG-edit authorsです。MIT全文を併記しています。
PCで長方形の描画、ソース入力、反映、ファイル化後の表示を確認しました。スマホ実機での編集、PNG出力、画像の取り込み、複雑なパス、外部アプリでの編集は未検証です。このツールについて最近のXの反響は確認できておらず、流行しているとは紹介しません。
図形を手早く描くならMethod Draw、既存のパスの点を調整するならSVG Path Editorの紹介もあります。SVG-Editでは、画面の図とソースを見比べて、色や寸法の対応を学べました。