我有一些指定 width 和 height 以及 viewbox 的 SVG 文件，如下所示：
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
但是如何以我决定的大小在浏览器中显示它们？我希望它们更小并尝试过：
<object width="400" data="image.svg"></object>
但后来我得到可见的滚动条。
如果我将 SVG 文件更改为将 width 和 height 设置为 100%，它会起作用，但我想决定 HTML 中的大小，而不管 SVG 文件中使用什么大小。这可能吗 ？
您可以将“preserveAspectRatio”和“viewBox”属性添加到 <svg> 标记来完成此操作。
在编辑器中打开 .svg 文件并找到 <svg> 标记。在该标签中，添加以下属性：
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
将 {width} 和 {height} 替换为 viewBox 的一些默认值。我使用了 SVG 标签的“宽度”和“高度”属性中的值，它似乎有效。
保存 SVG，它现在应该可以按预期缩放。
我在这里找到了这些信息：
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
当我在 2009 年问这个问题时，这里给出的答案都没有对我有用。因为我现在再次遇到同样的问题，我注意到将 <img> 标记和宽度与 svg 一起使用效果很好。
<img width="400" src="image.svg">
<img> 时，您将失去与链接、javascript 等的所有交互性。
<img width="400" src="image.svg"/>。
<body>
<div>
<object type="image/svg+xml" data="img/logo.svg">
<img src="img/logo.svg" alt="Browser fail" />
</object>
</div>
图像/徽标.svg ...
<svg
width="100%"
height="100%"
viewBox="0 0 640 80"
xmlns="http://www.w3.org/2000/svg"
version="1.1" />
这个设置对我有用。
viewBox="0 0 640 80"。显然，如果这没有定义，你不能真正缩放它或让 CSS 使用例如 width: 100% 等来为你缩放它。
您可以使用 JavaScript 访问嵌入式 svg：
var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
由于您的 svg 已经有一个 viewBox，Firefox 应该将 viewBox 中的 576 像素宽度缩放到文档中的 400 像素宽度。其他 svg 可能会受益于从广告宽度和高度派生的新视图框（这些通常是相同的数字）。其他浏览器可能会受益于不同的 svg 调整。
Security error: attempted to read protected variable
我遇到了一个问题，即 iPad 上的 iOS 无法正确调整 <object> 标记中的 SVG 图像大小。
CSS 样式会增加或减小 <object> 容器的大小，但其中的图像不会被修改（在 iPad、iOS 7 上）。
SVG 图像是从 Adobe Illustrator 导出的，结果证明解决方案是在此替换宽度和高度：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843"
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">
和：
width="100%" height="100%"
我需要使用 <object> 标记，因为 <img> 标记当前不支持在 SVG 中嵌入位图图像。
设置缺少的viewbox并在svg标签中填写设置的height和height属性的height和width值然后只需将height和width设置为所需的百分比值即可缩放图片。祝你好运。您可以使用 preserveAspectRatio="x200Y200 meet 设置固定的纵横比，但这不是必需的
例如
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
只需使用 CSS 让浏览器调整 SVG 的大小！像这样：<object style="width:30%"> 有关详细信息，请参阅 http://www.vlado-do.de/svg_test/。我也只是在本地尝试了一个 SVG，它的宽度和高度在“pt”中给出。它在 Firefox 中运行良好。
让我们看看。我不得不刷新我对 SVG 的记忆，这些年来我没有用太多。
从我今天发现的情况来看，如果您指定没有单位的对象的尺寸，它们的尺寸是固定的（我认为以像素为单位）。显然，当您调整 SVG 大小时，无法调整它们的大小（它只会更改视口/画布大小）。
除非，正如所指出的，您以百分比指定 SVG 的大小或指定 viewBox（例如 viewBox="0 0 600 500"）。
现在，如果您无法更改导出的 SVG，恐怕您就不走运了。你用什么图书馆？
这是基于 Jim Keller 的回答使用 QueryPath 的 PHP 解决方案。
加载 QueryPath 后，只需将您的 svg 脚本传递给该函数。
function scaleableSVG($svg){
$qp = qp($svg, 'svg');
$width = $qp->attr('width');
$height = $qp->attr('height');
$qp->removeAttr('width')->removeAttr('height');
$qp->attr('preserveAspectRatio', "xMinYMin meet");
$qp->attr('viewBox', "0 0 $width $height");
return $qp->html();
}
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
preserveAspectRatio="xMinYMin meet"对我来说还不够。我还需要提供答案中提到的viewBox。遗憾！preserveAspectRatio="none"。100%，如 this answer 所述。