响应式SVG图像

时间:2013-12-30 13:27:47

标签: css html5 image svg

在网站中实施SVG的最佳方法是什么?

目前,我在Illustrator& amp;将SVG代码直接复制到html中。我想这样做可以减少几个图像加速加载的http请求,而不是使用几个img标签。

这样做让我不得不为小屏幕调整元素的大小,就像用图像标签轻松完成一样。

有人可以推荐使用SVG图像并调整其大小的好习惯吗?

<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="75px"
    height="75px" viewBox="0 0 75 75" enable-background="new 0 0 75 75"
    xml:space="preserve">

<!--lots of <g> and <path> -->

</svg>

这是Illustrator在取出路径时生成的代码。它根据我在Illustrator中处理的画板大小创建元素的大小。

如何调整元素大小以适应其容器?

我尝试删除了viewbox和width / height属性,这使得svg容器的大小增加了三倍,并且img路径内容没有显示。

0 个答案:

没有答案