「Simple SVG」は、色々な方法で作成・入手したSVG画像のソースコードを、独自の手法で軽量化するツールです。 処理対象のSVG画像を読込み、処理結果のソースコードをクリップボードにコピーできます。 コードは改行整形され JavaScriptのコード編集画面にペーストして利用できます。
最も一般的な SVGアイコンの作成手順については、以下のページで紹介していますので、参考にしてください。
ver. 1.0以降に対応 2023.03.25 更新
「Simple SVG」は、画面上のボタンを「左Click」する、ボタンに表示された「Fn」キーを押す、の両方で操作が可能です。
起動方法
「Tampermonkey」のダッシュボードで「Simple SVG」を「ON」にして、ポップアップ許可を設定した任意のページで「F10」キーを押します。 これで別ウインドウに「Simple SVG」が開きます。
●「F10」キーを押すと、別ウインドウに「Simple SVG」が起動します。
▪現在のブラウザは、デフォルトで「ポップアップを許可しない」設定になっています。「F10」キーを押した時に「ポップアップをブロックした」という表示が出る場合は、ポップアップの許可を設定してください。 その場合、比較的安全なページを開いて（例えばアメーバのブログ管理ページ）、そこを許可するページとして「F10」を押すのが、お勧めの方法です。
▪ポップアップの許可は、サイトごとに設定が記憶されます。 危ういページでポップアップを許可するのは、セキュリティ上で好ましくありません。
「Simple SVG」の機能 と操作
以下は、「Simple SVG」が起動した初期画面です。
▪「F1」～「F7」の枠にマウスを移動すると、それぞれの処理の説明が「処理結果」の画像枠上に表示されます。
処理するのSVG画像の読込み
先ず最初に処理対象のSVG画像を読込みます。
●「F10」を押すと、SVG画像を指定する Windowsのダイアログが出ます。
▪SVG画像が読込まれると、左枠（元画像）に表示されます。
▪「F1」～「F7」の処理をした結果が、右枠（処理結果）に表示されます。
▪ 処理を選択したボタンは「●」が表示されます。
処理結果の画質と文字数から、最適な処理を選択します。 処理の選択は何度でも変更して試せますが、元画像が失われる心配はありません。
▪処理途中で「F10」を押し、別のSVG画像を読込む事ができます。 対象のSVG画像を読込んだ時点で、それまでのSVG画像や処理結果はクリアされます。
軽量化の処理指定
●「F4」>「F3」>「F2」>「F1」の順に軽量化の処理が強くなります。 SVG画像によっては全く処理が出来ない場合があります。
▪「F1」～「F4」は、「path」の「d属性」の軽量化処理です。
▪「F1」～「F4」のどれかを選択しますが、「F4」は無処理の選択です。
処理方法の詳細は複雑なので、以下の制作記事の最初から参照ください。
●「F5」「F6」「F7」は、各種の不必要な指定の削除を試します。 これも、画像によって指定できない、無変化、効果がある、などの違いがあります。
▪「F5」～「F7」は、無選択、一部の選択、全て選択など、追加型の選択です。
「F5」Atter 各種の属性指定の削除を試します。 多くの場合削除可能です。
「F6」Stroke「style属性」の「strole」のインラスライン指定のみを削除。
「F7」Style 「style属性」のインライン指定を全て削除。
画像の表示サイズの変更
処理する画像は、アイコンに利用する小型サイズの場合が多く、拡大観察ができる様にしています。「表示サイズの変更」は仮の変更です。 処理したSVG画像を実際に利用する際は、「style指定」または「CSS指定」で表示サイズの指定が必要です。
（SVG画像によっては無指定で使える場合もあります）
●「F9」を押すごとに、SVG画像の表示サイズが切換ります。
▪「サイズ変更なし」⇄「枠サイズにフィット」が切換わります。
▪この処理に「F9」の2回押しが必要な SVG画像があります。
画像コードの表示と出力
軽量化処理の選択が決まった段階で、その処理結果のソースコードを画面上で確認して、コピーができます。
●「F8」を押すと、処理結果のコードパネルが表示されます。
▪右枠のSVG画像のソースコードを、どの段階でも表示・コピーができます。
▪他の「Fn」を押して処理の選択を変更すると、ソースコードが更新されるので、パネルはいつたん非表示になります。
▪「F8」を押すごとに、下の様に順番にパネル表示が切変わります。
パネル非表示 ➔ 改行処理をしたコード ➔ 改行処理なしのコード ➔ パネル非表示
〔改行処理をしたコードの出力〕
●「1行の文字数」を指定できます。
▪文字数の入力枠の値を変更すると、リアルタイムに行数指定が反映します。
●「Copy」を押すと、クリップボードに表示したソースコードがコピーされます。
▪コピーされた事を示すために、1secだけボタンデザインが変化します。
▪パネルに表示された「改行処理されたソースコード」を、コード編集枠やメモ帳に貼り付ける事が出来ます。
〔改行処理なしのコードの出力〕
「F8」の2回押すと、上の「改行処理なし」のソースコードが表示されます。 コード編集画面で自動折返しを設定して利用する場合などに、改行処理のないソースコードを選択します。
▪コードパネルは一定の範囲で幅を変更できます。
▪「コピー」ボタンで表示しているソースコードをコピーできます。
Simple SVG の終了
「Simple SVG」は非常駐型のツールです。 処理が終了したら「Tampermonkey」のダッシュボードで「OFF」にするのが正しい扱い方です。
●「ESC」キーを押すと、以下のダイアログが出ます。
▪もう一度「ESC」キーを押すと、このダイアログを閉じる事ができます。
作業用ウインドウを閉じても、「Simple SVG」の待ち受けコードはブラウザの殆どの画面で起動し動作し続けます。 これを停止するために、「Tampermonkey」のダッシュボードで「Simple SVG」を「OFF」にしてください。
▪「ウインドウを閉じる」を押すと、作業用ウインドウが閉じます。
▪作業用ウインドウは、ウインドウ全体を「✖」で閉じても同じ事ですが、ユーザーに「Simple SVG」を「OFF」を促すために、ダイアログを表示しています。
このツールの最新バージョンは、以下のリンクリストから探せます。
