コード、データと QRツール

SVG Stroke to Fill 変換

「SVG Stroke to Fill 変換」はコード、データと QRに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。

ブラウザ内で処理登録不要プライバシーの説明 ↗

STRICT LINE CONVERSION

Convert direct line strokes into fills

Supported input is an SVG with an explicit viewBox and one or more direct <line> elements. Each line may use unitless coordinates, a direct color, a positive stroke width, and a butt, square, or round line cap.

Rejected deliberately: paths, polylines, polygons, groups, transforms, inherited styles, dashes, markers, units, and paint servers.

FILLED OUTPUT PREVIEW

Convert the example to inspect the generated fill shapes.

The output preserves the numeric viewBox. It does not infer width, height, transform, or inherited presentation values.

使い方

使い方

  1. Paste an SVG with a numeric viewBox and direct line elements using only the listed attributes.
  2. Convert it to inspect the filled path or circle output and its local preview.
  3. Copy or download the result, then validate it in the SVG context where you plan to use it.

An intentionally small conversion contract

This converter accepts only direct SVG line elements inside an SVG root with an explicit numeric viewBox. Each line can use x1, y1, x2, y2, stroke, stroke-width, and stroke-linecap. It rejects paths, polylines, polygons, rects, circles, groups, transforms, CSS styles, inherited presentation attributes, dashes, markers, units, percentages, paint servers, and unsupported attributes instead of silently approximating them. Input is limited to 100,000 characters and 500 line elements.

Stroke width and cap semantics

A butt cap becomes a filled four-corner path ending at each line endpoint. A square cap extends that rectangle by half the stroke width at each end. A round cap becomes the same central rectangle plus one filled circle of half the stroke width at each endpoint. This output represents only a single straight segment; it does not model joins because the supported source has no connected segments.

viewBox and output boundaries

The output keeps the four numeric values of the input viewBox so its coordinate system remains visible and reviewable. It does not preserve root width or height, CSS layout, transforms, clipping, opacity, blending, metadata, ids, accessibility text, or style inheritance. The result is a local geometry conversion, not a general SVG optimizer, outline engine, or artwork repair tool.

よくある質問

あわせて知りたいこと

Why does the converter reject SVG paths?

Accurately outlining arbitrary path curves, arcs, joins, dashes, transforms, and inherited styling requires a complete stroke-expansion engine. This focused tool does not pretend that a simple approximation is equivalent, so it rejects paths rather than producing uncertain geometry.

How are round caps converted?

The central body becomes a filled rectangle and each endpoint receives a filled circle with radius equal to half the stroke width. Their union is the same visible shape as a round-capped straight line.

Does the output preserve the original dimensions?

It preserves the explicit numeric viewBox, which defines the output coordinate system. Width and height attributes are not carried forward because this tool does not infer display sizing or layout from the source SVG.

Are my SVG files uploaded?

No. Parsing, conversion, preview, copying, and download all occur in your browser. The page does not send SVG input to a server.