今回の仕上がり
最後の点の横位置を6から8へ変えた三角形です。下は記事と同じパスをブラウザに表示した結果です。
使用した命令はM 2 2 L 10 2 L 8 10 Z。ファイルの書き出し確認とは別に、形の変化を確認しています。
形を少し直したい人のための道具
SVGは拡大しても輪郭がぼやけにくい画像形式です。その中のpathには、線や曲線を描く命令が入っています。このツールでは命令を入力すると図形が表示され、数字を直した結果をすぐ見比べられます。
手描き風の図解ならExcalidraw、SVGの容量を減らすならSVGOMG。こちらは線の形そのものを調整したいときに向いています。SVGファイル全体を編集するソフトとは役割が違います。
まずは三角形の頂点を動かす
1. 左上のPathへ命令を貼る
公式エディターを開き、左上のPath欄を次の文字に置き換えてください。今回のPC操作では、登録や支払いなしで入力できました。
M 2 2 L 10 2 L 6 10 ZMは線の出発点、Lは次の点まで引く直線、Zは出発点へ戻って閉じる命令です。右側に下向きの三角形が表示されたら、入力できています。
2. 最後の横位置を6から8へ変える
Path欄をM 2 2 L 10 2 L 8 10 Zへ変更してください。編集部の操作では、下の頂点が右へ移り、左右対称だった三角形が傾いた形になりました。
3. うまく表示されなかったら
まず最初の文字列に戻してください。コンマやSVGのタグを足さず、命令と座標だけを貼ります。図が見切れた場合は表示範囲の調整が必要です。複雑な曲線から始めず、この三角形で一つずつ数字を変えると変化を追いやすくなります。
命令だけでは、完成したSVGファイルにならない
Path欄の文字はSVGの一部です。Webページへ置くときはsvgの中のpathに指定します。下は同じ座標を使った、このページの表示例です。
<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M 2 2 L 10 2 L 8 10 Z" fill="#087d69"/></svg>他者のアイコンを編集する場合は、元の素材の利用条件を確認してください。エディターのライセンスが、読み込んだ素材の権利まで変えるわけではありません。
確認したことと、まだ試していないこと
2026年10月2日にPCブラウザで入力と座標変更、三角形の表示を確認しました。掲載画像は実画面です。ファイル出力、複雑な曲線、実機スマホの編集は未確認。現在のXの反響やAI利用は確認できていないため、流行中の作品とは紹介していません。
公式READMEには点のドラッグ、拡大、回転なども案内されています。ソフトウェアはApache License 2.0。今回はツール本体を配布せず、使い方を紹介しています。
形ができたらSVGOMGで容量を見比べると、公開前の確認へ進めます。