缩小 SVG 的大小答案

【问题标题】：Shrinking SVG to size缩小 SVG 的大小
【发布时间】：2025-12-21 13:30:11
【问题描述】：

我尝试了很多不同的方法，但不知道如何让这个 SVG twitter 图标在包含在链接中时缩小到 24x24。我尝试过 viewbox，尝试设置宽度/高度，但似乎无法弄清楚。在 chrome 中，下面的代码生成一个 24x24 的容器，但 SVG 本身是 400x400，所以我只看到左上角。似乎我遗漏了一些明显的东西，但我们将不胜感激。

<a class="twitter-share-button" href="https://twitter.com/intent/tweet">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             width="24px" height="24px" viewBox="0 0 24 24">
                        <style type="text/css">
                            .st0{fill:#1DA1F2;}
                            .st1{fill:#FFFFFF;}
                        </style>
                        <g id="Dark_Blue">
                            <path class="st0" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300
                                C400,377.6,377.6,400,350,400z"/>
                        </g>
                        <g id="Logo__x2014__FIXED">
                            <path class="st1" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6
                                c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2
                                c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8
                                c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8
                                c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7
                                C97.7,293.1,124.7,301.6,153.6,301.6"/>
                        </g>
                    </svg>
                </a>

【问题讨论】：

标签： css svg

【解决方案1】：

SVG 是关于 viewBox，这个 SVG 应该有一个 400 x 400 的 viewbox

<style>
    svg {
    width: 80px;
    height: 80px;
    background: lightcoral
</style>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="#1da1f2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300C400,377.6,377.6,400,350,400z"/>
        <path fill="white" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7     C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <path fill="#1da1f2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300C400,377.6,377.6,400,350,400z"/>
        <path fill="white" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7     C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>

或优化

<style>
  svg {
    width:80px;
    height:80px;
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       <rect fill="#1da1f2" width='100%' height='100%' rx="15%"/>
       <path fill="white" d="M39 76c24 0 37-20 37-37c0-1 0-1 0-2c3-2 5-4 7-7
c-2 1-5 2-8 2c3-2 5-4 6-7c-3 2-5 3-8 3c-2-3-6-4-9-4c-7 0-13 6-13 13c0 1 0 2 0 3
c-11-1-20-6-27-14c-1 2-2 4-2 7c0 5 2 9 6 11c-2 0-4-1-6-2
c0 0 0 0 0 0c0 6 5 12 10 13c-1 0-2 1-4 1c-1 0-2 0-3 0c2 5 7 9 12 9
c-5 4-10 6-16 6c-1 0-2 0-3 0C25 73 31 76 39 76"/>
    </svg>

【讨论】：

【解决方案2】：

viewport 应该是原始内容的大小 (400)。由于您使用的是小viewport (24)，因此图像仅显示了整个 svg 的一部分。将 viewport 设为 400，然后使用 height 和 width 来获取 svg 的大小呈现。

注意：您还应该从height 和width 中删除任何px。

你这个：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="24" height="24" viewBox="0 0 400 400">

【讨论】：

【解决方案3】：

简单的解决方案

.twitter-share-button >svg{
  height:24px;
  width:24px;
}

【讨论】：

我试过了，但这只会压缩 svg 的空间，而不会缩小底层渲染，所以你只能看到 svg 的一个角。