以下是Amelia Bellamy-Royds的来宾帖子。 作为SVG Essentials的合著者和即将出版的《 将SVG与CSS3和HTML5结合使用》的作者，Amelia在SVG方面拥有丰富的经验。 我和Amelia都将在即将到来的RWD峰会上就SVG发表演讲！ 在这里，她分享了扩展SVG的史诗指南，涵盖了您可能要执行的所有方法。 它几乎不像缩放栅格图形那样简单，但是那样很好，因为它带来了有趣的可能性。
您已做出决定。 您终于要做到了。 今年，您将开始在Web设计中使用SVG 。 您在Inkscape中创建了精美的标题徽标，然后将其吐出的SVG代码复制并粘贴到WordPress标题文件中。 当然，您不会因为总是使用响应式设计而放弃去年的分辨率，因此您设置svg.banner { width: 100%; height: auto; } svg.banner { width: 100%; height: auto; } svg.banner { width: 100%; height: auto; } ，并认为您已设置好。
除非您在测试浏览器中打开网页，然后发现其中一些在图像的上方和下方都留有巨大的空白块，而另一些则将其裁剪得太短。
SVG代表可缩放矢量图形。 因此，缩放SVG应该很容易，对吧？ SVG倡导者一直以来都在说SVG在任何大小上看起来都不错吗？ 是的，但事实并非如此。 SVG在任何规模上都看起来不错，但是它可以以多种不同的方式进行扩展，以至于它只能按照您想要的方式运行，这会使SVG初学者感到困惑。 浏览器只是最近才开始采用标准方法来调整嵌入式SVG内容的大小，这无济于事。
SVG不是（只是）图像
缩放SVG如此困难的部分原因是因为我们对图像应如何缩放有一定的了解，并且SVG的行为方式不同。
JPG，PNG和GIF之类的光栅图像具有明确定义的尺寸。 图像文件描述了浏览器应如何在一定像素宽和一定像素高的网格中着色。 一个重要的副作用是，光栅图像具有明确定义的宽高比 ： 宽高比 。
您可以强制浏览器以不同于其固有高度和宽度的大小来绘制光栅图像，但是如果将其强制为不同的宽高比，则事情将变得失真。 出于这个原因，自网络早期以来，就支持auto缩放图像：设置高度或宽度，然后浏览器调整其他尺寸，以使纵横比保持恒定。
看到笔图像缩放基本由无肢贝拉米-罗伊兹（ @AmeliaBR上） CodePen 。
相反，SVG图像可以以任何像素大小绘制，因此它们不需要明确定义的高度或宽度。 而且它们并不总是具有明确定义的宽高比。 如果希望SVG缩放以适合您提供的尺寸，则需要显式提供此信息（以及更多信息）。
如果您不这样做，SVG将根本无法扩展。 下面的示例使用嵌入式SVG，在不更改绘制图形大小的情况下，调整元素的尺寸（虚线）：
见笔无标SVG被阿梅利亚贝拉米-罗伊兹（ @AmeliaBR上） CodePen 。
为什么会这样呢？ 因为SVG并非（仅仅是）图像。 SVG是一个文档。 尽管上面的示例使用了嵌入式SVG，但使用或