在介绍了SVG的基础《HTML5 SVG简介》和《如何在网页中使用SVG》之后，今天我们来讨论SVG的响应式效果问题。
矢量图默认情况下是不会缩放自己的大小来适应屏幕的大小的，SVG图像能够通过多种方式来实现响应式效果，本教程教和大家分享这些实现方法。
制作一个响应式的SVG图像
作为一个图片，你可以使SVG图像通过width和height来制作任何大小的图片。并可以使图片随内容大小的变化而变化。
<img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">
这种做法在许多情况下是有所不足的，特别是你想使用<object>标签来嵌入一个SVG或直接在页面上使用SVG标签的时候。在这些情况下，简单的修改img的 width 和 height 属性是不可行的。
制作响应式的内联SVG
在HTML的<body>标签之后添加SVG，如下所示：
<body>
<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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>
</body>
可以清理掉<svg>标签中的一些没用的属性，使代码更易于阅读：
<svg version="1.1" viewBox="0 0 500 500">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>
通过移除<svg>标签中的属性，这时SVG图像变成响应式的，但这会增加一些图片空间成本。注意，viewBox属性要保留。我们需要几个步骤来使SVG图像和页面内容整合起来。
首先，使用一个div来包裹SVG，并为<svg>标签添加一个preserveAspectRatio属性。
<div class="svg-container">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>
</div>
然后我们需要将SVG移动到容器的顶部。为了达到这种效果，这里使用了一点小技巧，看下面的代码：
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
注意宽度的设置，这里设置为100%，以适应容器的100%宽度。padding-bottom的百分比是宽和高的比例。viewBox中的宽高比是1:1，所以这里padding-bottom设置为100%。如果宽高比是1:2，那么padding-bottom的值应该设置为50%。
最后，还要单位SVG在容器中的位置：
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
这种方法可以使SVG图像随页面的缩放而缩放，以上代码在使用<object>来嵌入对象时同样可用。
<div class="svg-container">
<object type="image/svg+xml" data="samurai.svg" width="100%" height="100%" class="svg-content">
</object>
</div>
在后面的文章中，我们将详细介绍viewBox属性，还有为不支持SVG的浏览器提供回退代码的知识。
