如何不使用 width 和 height 控制 svg 的渲染大小？-灵析社区

如何不是用 width 和 height 控制 svg 的渲染大小？ 下面的网站 [https://nicegui.io/](https://link.segmentfault.com/?enc=klCB9mIvlOkBJOSKDJ73tg%3D%3D.ZNawszZuXvXFkUPooJf0yXBIwRqXHaxcp068vYeupwI%3D) 首页左上角的的 「NiceGUI」的尺寸不大不小刚刚好，对应的 svg 是：[https://github.com/zauberzeug/nicegui/blob/main/website/static/nicegui_word.svg](https://link.segmentfault.com/?enc=jKOcAkqGaY0pezv7RS2m0A%3D%3D.HlwLx6TH5iRb%2FWWk2xny%2FqQZo5MZ1akbv2mgaWFfT4aopbUvwoYQ02AAhBzD9hF7mG8a0vtYslZs4Dqrh%2Bu5Z2BZI8bw%2Bon0pyo92eQCoRI%3D)  > > [https://nicegui.io/](https://link.segmentfault.com/?enc=LagRmt0ewA0tJ5DosdBwTQ%3D%3D.I9BKNNzbKKGViqmdzIKAr0ouAlxhnzVKLrjwDzZYBwU%3D) > 这个界面就是 > [https://github.com/zauberzeug/nicegui](https://link.segmentfault.com/?enc=YBHsov%2B1fvn2MJ0Cn5T0oQ%3D%3D.nvZk5XPqN8zRIRewZh978tgC0QvjECJPi05EQALs%2FA7NTaHg3Go%2BSAV6cnzR4woW) > 这个项目跑起来的: `python main.py` 这个 svg 的内容如下，里面并没有写死 width 和 height .svg_letter1{stroke:#fff;fill:#fff;stroke-miterlimit:10;stroke-width:.25px;} .svg_letter2{fill:#fff} 然后我 clone 了这个项目，想在这个项目基础上改出我自己想要的内容，第一步就是要替换掉这个 svg logo 成我自己的，所以我就用 「菜鸟教程」的 svg 编辑器创建了我自己的 svg > > [https://c.runoob.com/more/svgeditor/](https://link.segmentfault.com/?enc=I4hU6RwVRLR5Tz01Zqz7Tw%3D%3D.W4Sf5ba0kUj8af6ZJFzosTp4951OXQjvabLDvnV6FRX3mP9e2osyVoG6LoKAbHKD)  svg 内容如下 Layer 1 ImageSearch > 我已经提交到 GitHub, svg 的地址: > [https://github.com/ponponon/image_search_engine/blob/feature/gui/website/static/ImageSearchLogo.svg](https://link.segmentfault.com/?enc=bSyy6MOpScmPY1rN7%2Bts0w%3D%3D.yVK8ktXgeTWhhtGA9SKuDHQcqqocDAYoQWvypPfyOHxEQsfWLfvrjhxrT2aIMm3rBPhgWu4B1bAfvgoaucIKQy0tazPyqx%2BYc%2BRhUw5SbaPCNdxzpXEcbgFK0wc9LbzYJPNWNiL2p1%2Bncr%2FQ2rl9Ag%3D%3D) > 这里面也没有写死 width 和 height * * * 然后我是用这个新的 svg 替换了原项目中的 svg  但是渲染出来就乱了  渲染出来巨大无比，界面都显示不下 我不知道哪里出问题了 我询问了 chatGPT ：「如何设置 svg 的大小？」 下面是 chatGPT 的回答 > 要设置 SVG 的大小，你可以通过几种方式实现： > > ### 1\. 直接在 SVG 元素中设置宽高属性 > > > > > > > 这会直接设置 SVG 的宽度为 200 像素，高度为 100 像素。 > > ### 2\. 使用 CSS 控制 SVG 的大小 > > 通过 CSS 中的 `width` 和 `height` 属性来控制 SVG 的大小： > > > > .custom-svg { > width: 200px; > height: 100px; > } > > > > > > > 这种方法允许你通过类名或其他选择器来控制多个 SVG 元素的大小。 > > ### 3\. 使用视口单位设置 SVG 大小 > > 你还可以使用视口单位（如vw、vh等）来设置 SVG 的大小，让其相对于视口大小进行调整： > > > > > > > 这种方法允许 SVG 元素根据视口大小进行相对调整。 > > 选择其中一种方法根据你的需求设置 SVG 的大小，这些方法都能有效控制 SVG 的尺寸。 * * * 但是我检查了代码，并没有地方设置了 width 和 height * * * 除此之外，我还有一个问题，我自己做的 [ImageSearchLogo.svg](https://link.segmentfault.com/?enc=0ClAf4r0%2ByLnlSA8ti0Sjg%3D%3D.IS%2FMlXP0fRA4mKJFt11a6qDQWqByrMOj3gEb7iZlc8%2BxAAOnrrneaFuZV52DQ2jj8aBKLt69qqgRBgIpAXDVioYQ%2BZ2GROkbCX4IRDr55KRLVNMNfDY5BpC4R7Jkg1jdIte6r1llLFrBOMpeEh73cg%3D%3D)，要显示的 「ImageSearch」是作为一个字符串存在 svg 文件里面 但是 [nicegui_word.svg](https://link.segmentfault.com/?enc=QJu3RnrnqYlqSNoM3FyVIw%3D%3D.%2FUYgKFYtGu71C1srB1Rnlqu1Q%2FprUQGN0%2FEEk40ZrtwS4Bq0Q0%2Fp3vG5ZKg%2B%2BFBfH6F2em%2FdSFRMSInwHlA61zE9vIxctbtO6PVwfYpi1v8%3D) 里面的 「NiceGUI」却不是字符串 nicegui 为什么呢？  * * * 我好像知道为什么了 是因为 font-size 刚刚是 28，我改成 4 感觉就对了  但是我很奇怪的是这个 svg 为什么占用的空间是 300x150，我都没有看到有什么地方设置了这个大小  我现在有两个问题： * 怎么实现自适应文字大小的 svg 呢？感觉固定 svg 里面的 font-size 不优雅 * 为什么这个 svg 占用的大小是 300x150呢？