相同大小的 SVG 在页面上一次大小不一样？答案

【问题标题】：Same size SVGs not same size once on the page?相同大小的 SVG 在页面上一次大小不一样？
【发布时间】：2015-05-26 05:59:35
【问题描述】：

在此网站上为学校项目工作，这里有问题的网站： http://jmtestserver.net46.net/

您可以看到右侧的框由于图像尺寸被关闭而进一步向下移动。如果你检查元素，工作的说 126x71，太大的说 126x127，我不知道尺寸差异来自哪里。

我根据 illustrator 中的工作图像调整了图像的大小，如下 gfy 所示：

我不知道如何离线检查 SVG 的大小，因为我只能在 illustrator 中打开它，但它在 illustrator 中对我来说似乎是完全相同的大小，但是当我将它插入网页时，它会“增长”出于某种原因，尽管它具有完全相同的 CSS，但我不知道。

任何帮助将不胜感激，因为我正在处理非常小的事情。

我猜：我如何离线检查 SVG 的大小，什么会导致它像这样“增长”？

【问题讨论】：

标签： html css svg

【解决方案1】：

快速修复：

photo_icon {
  /* remove margin top */
  height: 75px;
}

并确保每个 AI 文件的画布都相同。

长答案

额外的空间确实来自画布大小：

【讨论】：

【解决方案2】：

或者您可以手动编辑视口和视框值。但你不需要。 http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

【讨论】：

我希望所有图像都具有相同的大小...如果不是，您将无法轻松重复使用
我不明白的是它们的大小都一样。我什至只是在完全相同的画布上重新制作了它们。只有当我将它们放入网页时，它们才会有所不同。我也无法让我的 SVG 加载到该编辑器中，它只是卡在“加载”中。
这是我的图标的 zip，如果你有任何方法可以确认它们的大小相同...dropbox.com/s/vk83qjc6hvxw8l8/camera_icon.zip?dl=0
我打开文件，它们是不同的，viewBox 是不同的。 viewBox="0 0 82.8 66.2" viewBox="0 0 100 100"
好吧，我按高度匹配它们，因为有些更宽，但我只需要匹配高度 - 这可能是为什么？