不使用CSS 仅通过修改SVG代码将矢量图调整为17×17尺寸的方法

整个过程完全不需要引入CSS，只需要调整SVG标签本身的原生属性就可以，具体操作点：

• 直接修改根SVG标签的原生宽高属性，把原代码里的width="420px" height="420px"，替换为目标尺寸width="17px" height="17px"，这是SVG自带的原生尺寸控制项，不依赖任何外部样式。
• 一定要补充和原图形坐标范围匹配的viewBox属性：如果只改宽高不写viewBox，SVG不会自动把内部420坐标体系下的图形映射到小尺寸画布，最后只会显示17px大小的一块左上角截片，根本出不来完整图形。你的原SVG所有绘制内容都落在0~420的坐标区间内，所以直接给根标签加viewBox="0 0 420 420"即可，它会自动完成坐标映射，把整幅图形等比缩到17×17的尺寸里。
• 不需要手动修改每个路径的stroke-width值：因为有viewBox的等比缩放规则，原代码里设置的26、18的描边宽度会跟着整体一起按比例缩小，全程不用挨个算缩放系数。

修改完成后可直接使用的17×17尺寸SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="17px" height="17px" viewBox="0 0 420 420" fill="none" stroke="#dcdcdc">
    <path stroke-width="26" d="M209,15a195,195 0 1,0 2,0z"/>
    <path stroke-width="18" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
</svg>

小提示：如果觉得17px尺寸下描边跟着缩得太细看不清，可以给根SVG标签追加vector-effect="non-scaling-stroke"属性，就能让所有描边保持固定的视觉粗细，不会随画布缩放变细，日常图标使用下默认的等比缩放效果就足够。

内容的提问来源于stack exchange，提问作者Gidon Wise