CodeKitHubこのツールとは？
一部のレンダリングパイプライン——特定のアイコンフォントジェネレーター、一部のゲームエンジン、古い PDF エクスポーター、塗りつぶしのみを合成するツールなど——は SVG のストロークを正しく扱えない、あるいはまったく扱えません。ストロークを同じ幅の塗りつぶし形状に変換すれば、この問題を完全に回避できます。見た目の結果は同一ですが、ストローク付きの線ではなく単一の塗りつぶしパスとして表現されます。
このツールは各図形の輪郭に沿って多数の点をサンプリングし（ブラウザ自体のパス長 API を使用しており、これは SVG アニメーションが使うのと同じ仕組みです）、ストローク幅の半分の位置に両側それぞれ平行なオフセット線を構築し、それらを閉じて1つの塗りつぶしポリゴンにすることで動作します。
なぜこれを使うのか？
- path だけでなく、line、polyline、polygon、rect、circle、ellipse 要素にも対応——1つの統一されたサンプリング手法を使用します。
- 元の図形自体に塗りつぶしがあった場合、それを新しいストローク塗りつぶしの下に別レイヤーとして保持するため、塗りつぶしとストロークを両方持つ図形も正しく変換されます。
- 変換前後を並べたプレビューで、結果をコピーする前に視覚的に確認できます。
- すべてブラウザ内で処理されます——貼り付けた SVG がどこかにアップロードされることはありません。
- 無料・即時変換で、ブラウザが描画できる範囲であればファイルサイズの制限もありません。
使い方
- SVG コードをテキストボックスに貼り付けます（動作するサンプルが最初から入力されています）。
- 「Convert strokes to fills」をクリックします。
- 変換前後のプレビューを比較し、結果が正しいか確認します。
- 「Copy SVG」をクリックして、変換後のストロークなしコードをコピーします。
例
入力
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>出力
元の曲線の両側を 12 単位の間隔でなぞる輪郭を持つ、単一の <path fill="#3B82F6">（stroke 属性は一切なし）。曲線の形状が保持されるのは、このツールが制御点だけでなく、実際にレンダリングされたパスに沿って連続的に点をサンプリングしているためです。
よくある質問
なぜ鋭角のコーナーが尖ったまま（マイター）ではなく丸くなるのですか？
これはサンプリング手法の既知の、意図的な簡略化です。パスに沿った密な点サンプリングは、元の stroke-linejoin や stroke-linecap の値に関係なく、自然に丸い接合部や端部を生成します。正確なマイターやベベルの接合を再現するには、このツールが実装していない別のより複雑なアルゴリズム（各頂点での線分交差計算）が必要です。ほとんどのアイコンやイラストの用途では視覚的な差はわずかですが、正確なマイター接合が必要な場合は、専用のベクターエディタの「アウトライン化」機能の方が精度が高くなります。
破線ストローク（stroke-dasharray）には対応していますか？
いいえ——このツールはすべてのストロークを実線として扱い、stroke-dasharray/stroke-dashoffset を無視します。破線ストロークは実線であるかのように変換されるため、見た目が変わってしまいます。SVG に破線ストロークが含まれている場合、その図形にはこのツールは適していません。
なぜ何も変換されないのですか？
このツールは、ストロークの色（"none" 以外）と正の stroke-width の両方を持つ要素のみを変換します（属性として設定されている場合でも、要素自体の style で設定されている場合でも同様）。SVG が外部の CSS クラス経由でストロークを設定しており、このツールの独立したプレビュー内でブラウザがそれを解決できない場合や、クラスを参照する <style> ブロック経由で設定されている場合、計算されたスタイルが正しく解決されないことがあります——代わりに stroke と stroke-width を図形の直接の属性として設定してみてください。
いつストロークを塗りつぶしに変換し、いつストロークのままにすべきですか？
まだデザイン中であれば、ストロークのままにしておきましょう——stroke-width は編集可能な単一の数値のままですが、変換後は失われます。ストロークをうまく扱えないパイプライン（アイコンフォントジェネレーター、特定のゲームエンジンや PDF エクスポーターなど）に書き出す場合は、最終的なエクスポートステップとして変換し、変換は一方向なので、元のストローク付きファイルは編集可能なソースとして保持してください。
変換すると SVG ファイルは大きくなりますか？
通常は大きくなります——少数の制御点で定義されたストローク付きの曲線が、数百のサンプリングされた線分から成る塗りつぶし輪郭になるため、パスデータが大幅に増加します。アイコンであれば実際にはほとんど問題になりませんが、サイズが気になる場合は、変換後の出力を SVG 最適化ツールに通して座標精度を削減してください。
stroke-opacity は変換後の塗りつぶしに引き継がれますか？
いいえ——変換後のパスはストロークの色を塗りつぶし色として採用しますが、不透明度は 100% になります。元の図形の stroke-opacity の値は失われます。透明度を保持したい場合は、結果をコピーした後、変換後のパスに同じ値の fill-opacity を手動で追加してください。