SVG图像像素大小是如何计算的

Question

如果你检查 Stackoverflow 徽标，你会发现它是一个<a>以 SVG 图像作为背景的元素。

#hlogo a {
    text-indent: -999em;
    display: block;
    width: 200px;
    height: 50px;
    background-image: url("img/sprites.png?v=c4222387135a");
    background-image: url("img/sprites.svg?v=1bc768be1b3c"),none;
    background-position: top left;
    background-repeat: no-repeat;
    position: relative;
    top: 5px;
}

在Chrome中使用开发者工具查看SVG图像时，显示图像尺寸为240 * 500。

元素的大小<a>为 200 * 50 px。

那么 SVG 图像的大小 240 * 500 px 是如何计算的呢？

我们都知道 SVG 是一种可扩展的图像，基于矢量，所以它无论如何都不应该有固定的像素大小。

根据当前的元素上下文，我无法弄清楚。

Answer 1

我找到了答案。

因为SVG定义中提到了它。

宽度=“240像素”高度=“500像素”

<?xml version="1.0" encoding="UTF-8"?><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="240px" height="500px" viewBox="0 0 240 500" enable-background="new 0 0 240 500" xml:space="preserve">
<g id="Layer_2_1_">
</g>
</svg>