SVG stroke を fill に変換
直接記述された SVG line の stroke を塗りつぶしジオメトリに変換します。任意のベクターアートを推測せず監査できるよう、構文を意図的に限定しています。
厳密な線変換
直接指定された線のストロークを塗りつぶしに変換
明示的なviewBoxと1つ以上の直接のline要素を含むSVGに対応します。各線は単位なし座標、直接色、正の線幅、butt・square・roundの線端を使用できます。
意図的に非対応：パス、ポリライン、多角形、グループ、変換、継承スタイル、破線、マーカー、単位、ペイントサーバー。
塗りつぶし出力のプレビュー
例を変換して生成された塗りつぶし形状を確認します。
数値のviewBoxを保持します。幅、高さ、変換、継承された表示属性は推測しません。
使い方
使い方
- 数値 viewBox と、指定属性だけを使う直接 line 要素を含む SVG を貼り付けます。
- 変換して塗りつぶし path または circle の出力とローカルプレビューを確認します。
- 結果をコピーまたはダウンロードし、使用予定の SVG 環境で検証します。
意図的に小さくした変換仕様
明示的な数値 viewBox を持つ SVG root 内の直接 SVG line 要素のみ受け付けます。各 line で使用できるのは x1、y1、x2、y2、stroke、stroke-width、stroke-linecap です。path、polyline、polygon、rect、circle、group、transform、CSS style、継承属性、dash、marker、単位、割合、paint server、未対応属性は近似せず拒否します。入力上限は 100,000 文字、line 要素 500 個です。
stroke 幅と cap の意味
butt cap は両端で終わる四隅の塗りつぶし path になります。square cap は矩形を両端で stroke 幅の半分だけ延長します。round cap は同じ矩形に、各端点で stroke 幅の半分を半径とする塗りつぶし円を加えます。対応する入力に接続線分はないため、単一直線だけを表し join は扱いません。
viewBox と出力範囲
座標系を明確に確認できるよう、入力 viewBox の 4 つの数値を保持します。root の幅・高さ、CSS レイアウト、transform、clip、不透明度、合成、メタデータ、id、アクセシビリティテキスト、style 継承は保持しません。汎用 SVG 最適化、アウトライン化、作品修復ツールではなく、ローカルなジオメトリ変換です。
よくある質問
あわせて知りたいこと
SVG path が拒否されるのはなぜですか？
任意の path 曲線、弧、join、dash、transform、継承スタイルを正確にアウトライン化するには完全な stroke 拡張エンジンが必要です。単純な近似を同等と見せないため、不確かな形状を作らず拒否します。
round cap はどう変換されますか？
中央部分は塗りつぶし矩形になり、各端点には stroke 幅の半分を半径とする塗りつぶし円が追加されます。組み合わせると round cap の直線と同じ見た目になります。
元の寸法は保持されますか？
出力座標系を定義する明示的な数値 viewBox は保持します。表示サイズやレイアウトを推測しないため、幅と高さ属性は引き継ぎません。
SVG はアップロードされますか？
いいえ。解析、変換、プレビュー、コピー、ダウンロードはブラウザー内で完結し、SVG 入力をサーバーに送信しません。