SVG图像比例？对于移动应用答案

【问题标题】：SVG image scale? For mobile applicatiosSVG图像比例？对于移动应用
【发布时间】：2012-07-10 16:01:07
【问题描述】：

我阅读了很多资源，但似乎无法让 SVG 图像适合浏览器窗口。

有人告诉我，如果我必须在适合现代移动浏览器的移动应用程序中使用图像，我必须在 html5 页面中使用 SVG 图像。

我似乎无法让 SVG 图像工作！我从 illustrator 中保存它，然后以 100% 宽度的 div 嵌入到 html5 页面中。

这样做的最佳方法是什么？感谢您的帮助..

顺便说一句，我正在使用 Jquery mobile/HTML5/CSS3

<embed src="header.svg" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install" />

当我希望它适合设备尺寸时，我应该如何在“viewBox”中指定某个宽度和高度？我没有具体的尺寸

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg version="1.1" baseProfile="basic" id="Layer_1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="253px" height="60px" viewBox="0 0 253 60" xml:space="preserve">
<g>
    <g>
        <defs>............

【问题讨论】：

您能否将其中一张 SVG 图像的源代码添加到问题中？或者链接到它？
对了，我尝试上传带有图片的页面，但它没有在线显示？！！
您的 SVG 有其内部公制系统，用于其内部对象的所有位置和大小。您在 SVG 上指定“视图框”，当在浏览器中显示 SVG 时，它将被缩放。只需尝试一些值并尝试一下。
在记事本中打开 SVG 文件，将您看到的文本复制并粘贴到您的问题中，选择该文本并单击格式为代码工具。

标签： jquery image jquery-mobile svg cross-browser

【解决方案1】：

如果您的受众正在使用带有 HTML 5 解析器 (now widely supported) 的浏览器，则您不需要任何直接在 svg 标记中的 xml 内容。您不需要对象或嵌入标签标签。在这一点上，这是老派。而且您当然不需要 iFrame。另外，为了澄清一点，SVG 本身与 jQuery 无关（事实上，jquery 与 svg 元素的关系非常糟糕）。只需确保您使用的是 html5 文档类型，并编写如下内容：

<svg id="mycoolgraphic" viewBox="0 0 253 60" >
<g>
    <g>
        <defs>............
    </g>
</g>
</svg>

确保所有标签都已关闭，并且作为 xml 有效。不要缩进或添加一大堆间距，这只会创建空文本节点。把这一切都丑陋不堪，弄得一团糟。它使以后的任何 javascript 工作变得更加容易。如果您正在使用 illustrator（这很好），您可能想要进入并清除主 svg 标记中的一些 xml 声明。如果您希望元素具有响应性，请忽略任何明确的高度和宽度。您可以通过普通的 CSS 声明来控制高度和宽度：

   #mycoolgraphic { height: 10em;width: 10em;}

响应式 svg 的主要技巧是设置 preserveAspectRatio 属性。这是您需要添加的内容。（从 Illustrator 导出的图形不会包含 preserveAspectRatio 的任何内容。）此属性控制 svg 内容（viewbox）在 svg 元素（svg viewport ）。视图框按比例固定。它是您在 illustrator 中创建艺术作品时的边界矩形。除非您非常确定自己知道自己在做什么，否则不要乱用它。然而，包含 viewbox 的 svg 元素可以像任何 html 元素一样调整大小，preserveAspectRatio 属性描述了两者之间的关系。 MDN 关于 preserveAspectRatio 的文章很好。在这一点上，spec 的可读性也令人惊讶。

希望这会有所帮助！

【讨论】：