Question

我有一些指定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文件。这可能吗？

Answer 1

您可以将“preserveAspectRatio”和“viewBox”属性添加到<svg>标记中以完成此操作。

在编辑器中打开.svg文件，找到<svg>标记。在该标记中，添加以下属性：

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

将{width}和{height}替换为viewBox的一些默认值。我使用了SVG标签的“width”和“height”属性中的值，它似乎有效。

保存SVG，现在应按预期进行扩展。

我在这里找到了这些信息：

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

Answer 2

当我在2009年回复时，这里给出的答案都没有给我带来帮助。我现在再次遇到同样的问题，我注意到使用<img>标签和宽度以及svg一起工作正常。

<img width="400" src="image.svg">

Answer 3

您可以使用JavaScript进入嵌入式svg：

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

由于你的svg已经有了一个viewBox，Firefox应该将viewBox中的576像素宽度缩放到文档中的400像素宽度。其他svgs可能会受益于从广告的宽度和高度派生的新viewBox（这些通常是相同的数字）。其他浏览器可能会受益于不同的svg调整。

Answer 4

<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

IMG / logo.svg的 ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

此设置对我有用。

Answer 5

我遇到一个问题，即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中嵌入位图图像。

Answer 6

设置缺少的视图，并在svg标记中填写设置的高度和高度属性的高度和宽度值
然后只需将设置高度和宽度缩放到所需百分比值即可缩放图片。祝你好运。
您可以使用preserveAspectRatio =“x200Y200 meet设置固定宽高比，但不一定

e.g。

 <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">

Answer 7

只需使用CSS让浏览器调整SVG的大小！像这样： <object style="width:30%"> 有关详细信息，请参阅http://www.vlado-do.de/svg_test/。我还在本地尝试了一个SVG，其宽度和高度以“pt”给出。它在Firefox中运行良好。

Answer 8

让我们看看。我不得不刷新我对SVG的记忆，这些年来我还没有用过它。

从我今天发现的情况来看，似乎如果你指定没有单位的对象的尺寸，它们就有一个固定的大小（以像素为单位，我认为）。显然，当你调整SVG大小时它没有办法调整它们的大小（它只会改变视口/画布大小）。

除非指出SVG的大小百分比，否则指定一个viewBox（例如viewBox =“0 0 600 500”）。

现在，如果你无法改变导出的SVG，我担心你运气不好。你用什么图书馆？

Answer 9

根据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();
}

如何缩放嵌入<object>标签的顽固SVG？</object>

9 个答案: