How do you keep SVG strokes sharp in a PNG?
Export at the final display size or a clean multiple of it, then inspect how each thin stroke lands on the PNG pixel grid. If a line looks soft or disappears, test a larger 2× or 4× export, avoid fractional output scaling, check transformed stroke widths, and use vector-effect="non-scaling-stroke" only when the stroke is intentionally meant to stay visually constant while its shape scales.
Why an SVG line changes after rasterization
| PNG symptom | Likely cause to inspect | First test |
|---|---|---|
| A thin line looks gray or soft | The stroke edge falls between output pixels, so anti-aliasing spreads coverage. | Export at 2× and compare; also test a pixel-aligned position at the final size. |
| Some lines look heavier than others | Different transforms or fractional scale factors map equal SVG strokes to different pixel coverage. | Inspect parent transform values and use one consistent output scale. |
| A hairline disappears | The mapped stroke is narrower than one output pixel or has very low opacity. | Increase the output size or increase the source stroke-width. |
| Strokes stay thin while shapes grow | The artwork may use vector-effect="non-scaling-stroke". | Remove that property in a copy and compare the two exports. |
| Diagonal lines look jagged | Raster pixels approximate a sloped vector edge. | Export larger, then display or downsample to the intended size. |
Do not diagnose only from the browser zoom level. Download the PNG and inspect it at 100% display size. Browser zoom can introduce another scaling step that is not part of the file.
When half-unit coordinates can make a 1-pixel line sharper
An SVG stroke is centered on its path. When one SVG unit maps to one output pixel, an axis-aligned stroke with stroke-width="1" centered on an integer coordinate extends half a unit to each side. Its coverage can be split across two pixel columns or rows.
Vertical 1-unit stroke
Compare a path at x=10 with one at x=10.5 when the export scale is exactly 1 SVG unit per pixel. The half-unit version may align its edges with pixel boundaries more cleanly.
Even-width stroke
A 2-unit stroke centered on an integer coordinate already has edges one unit away. Moving it by half a unit can make it softer instead.
Scaled viewBox
If the viewBox is being scaled, calculate alignment after the scale is applied. A coordinate that is aligned at one output width may be fractional at another.
Curves and diagonals
Half-unit alignment is mainly a test for horizontal and vertical strokes. Curves and diagonals still require anti-aliasing.
This is not a universal “add 0.5” rule. It depends on stroke width, direction, transforms, viewBox scaling, and final PNG dimensions. Compare the actual result preview before changing source geometry.
Normal strokes versus non-scaling strokes
Normally, a stroke participates in the element's transforms. Scaling a shape can therefore scale its visible stroke width. SVG also provides vector-effect="non-scaling-stroke", which keeps the stroke width independent of the element's transformations and zoom.
| Source behavior | Useful when | PNG risk to check |
|---|---|---|
| Normal scaling stroke | The outline should grow and shrink with the artwork. | A non-integer transform can produce a fractional mapped stroke width. |
non-scaling-stroke | Diagram lines, map routes, or interface outlines should remain visually consistent while shapes transform. | A high-resolution PNG may preserve a stroke that is thinner relative to the enlarged artwork than expected. |
| Mixed behavior | Different elements intentionally use different line systems. | The PNG can look inconsistent if the distinction was not deliberate. |
Also inspect stroke-linecap and stroke-linejoin. Round caps extend beyond path endpoints, while mitered joins can create long spikes at sharp angles. Those are geometry choices, not converter errors.
Export icons and line art without guessing
- Choose the final display size first, such as 24 × 24, 32 × 32, or 128 × 128 pixels.
- Confirm that the output aspect ratio matches the SVG viewBox.
- Export once at the final size and once at 2× or 4×.
- Inspect horizontal and vertical hairlines at 100% zoom.
- If only axis-aligned lines are soft, test pixel alignment in a copy of the SVG.
- If line weights change unexpectedly, inspect transforms and
vector-effect. - If the larger export is cleaner, keep the larger file for high-density use or downsample it with a high-quality image editor.
For a set of icons, test the whole set at the same dimensions. A fix that sharpens one icon can make another icon inconsistent if their viewBoxes or stroke systems differ.
Should you use shape-rendering="crispEdges"?
The SVG shape-rendering attribute gives the renderer a preference. crispEdges may reduce anti-aliasing or adjust near-horizontal and near-vertical edges, while geometricPrecision favors geometric accuracy. It is a rendering hint, not a guaranteed repair for every stroke.
Test it only on artwork that benefits from hard edges, such as grid-like icons or pixel-oriented diagrams. Curved logos and diagonal illustrations can look worse when anti-aliasing is reduced.
SVG stroke to PNG questions
Why is a 1-pixel SVG line blurry in PNG?
The stroke may straddle two output pixels or be scaled to a fractional width. Check the final mapping between SVG units and PNG pixels.
Does exporting at 4× always fix thin lines?
No. It gives the rasterizer more pixels, but it does not fix an incorrect viewBox, inconsistent transforms, or unintended non-scaling strokes.
Should every icon use non-scaling-stroke?
No. Use it only when the line width should remain constant while the shape transforms. Most artwork expects outlines to scale with the geometry.
Can I remove anti-aliasing completely?
Some rendering hints may reduce it for selected shapes, but curves and diagonal edges need partial pixel coverage to look smooth at normal sizes.
Export at the intended size, then inspect every important stroke at 100%.
Open the SVG to PNG converterPublished September 28, 2026.