Caveats

Stroke width should be in CSS pixels

When preserving line width, always define stroke width in CSS pixels. The image size itself does not matter.

Example of different stroke widths:

Different widths

Poorly-chosen stroke width will result in visual issues:

Stroke width is too large for the image

Preserving line width works only on strokes

To preserve line width when scaling, ensure that your images use strokes rather than filled paths.

Toggle an original image to see the effect of using both.

Filled polygon vs. Outlined polygon

Transparent colors should be omitted or set as none or transparent

A common mistake is setting a fill color to white and wondering why the output appears incorrect.

If you do not want a fill, simply omit it, or explicitly set it to none or transparent.

White fill vs. No fill