关于高度和宽度，使用SVG的最佳实践? [英] Best practice for using SVGs, regarding height and width?

问题描述

我一直在尝试在一些最新项目中使用SVG，并且由于它可以扩展，所以我想知道您对这些SVG的动态高度和宽度有何看法?

I've been trying out using SVGs on a few of the latest projects, and since it scales, I was wondering what's your take on dynamic height and width of these SVGs?

到目前为止，我已经从Illustrator中导出了图形，将它们另存为SVG，打开了SVG，并删除了文档类型和#layer_1等ID.然后，我将height和width属性编辑为100％.因此，我通过在其父级上设置宽度和/或填充来调整SVG的大小.这使得通过媒体查询轻松调整大小.以及CSS过渡.但是我不确定这是最好的方法.

So far, I've exported graphics from Illustrator, saving them as SVGs, opened the SVG and removed the doctype and #layer_1 etc IDs. And then I've edited the height and width attributes to 100%. So I've adjusted the size of the SVG by setting width and/or padding on their parent. This makes it easy to adjust the size with media queries. As well as CSS transitions. But I'm not sure this is the best way of doing it.

我的HTML一直是这样的:

My HTML has been like this:

<div class="svg icon_phone">
  <img src="static/icon_phone.svg">
</div>

<div class="svg">
  <img src="static/icon_other.svg">
</div>

像这样的CSS:

.svg {
  width: 60%;
}

.icon_phone {
  padding-left: 80px;
}

SVG看起来像这样:

And the SVG would look like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     height="100%" width="100%" viewBox="0 0 97 94.5" enable-background="new 0 0 97 94.5" xml:space="preserve">
<circle fill="#5B2B6E" cx="48.63" cy="47.125" r="42.75"/>
<g>
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="48.85" y1="47.125" x2="26.41" y2="47.125"/>
    <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="70.85" y1="47.125" x2="58.25" y2="47.125"/>
    <polyline fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" points="44.794,65.51 26.41,47.125 44.794,28.74   
        "/>
</g>
</svg>

我不知道这是否是处理问题的好方法，因为它们在IE和某些浏览器中的行为很奇怪，除非我专门在其父级上设置了width和height.有些SVG伸展了，有些高度却被弄乱了.但是在Chrome浏览器中，一切都很好.

I don't know if this would be a good way about doing things, because they behave weird in IE and some browsers, unless I specifically set both width AND height on their parent. Some of the SVGs stretch, some have their heights are all messed up. But in Chrome, everything's good.

对此最好的做法是什么?

What would be the best take on this?

推荐答案

最好从svg自身中除去height和width属性(以及x，y和viewBox的属性)，并在CSS中使用width和height. 例如:

It's better to remove height and width (and x, y and viewBox if needed) attributes from svg itself and use both width and height in css. Ex:

.parent svg {
   width: 100%;
   heigth: 100%;
}

.parent {
   width: 100px;
   height: 50px;
}

或者:

.parent svg {
   width: 100px;
   heigth: 50px;
}

因此您可以轻松地使所有内容具有响应性.

So you can easily make everything responsive.

这篇关于关于高度和宽度，使用SVG的最佳实践?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！