svg多媒体图标_SVG中的媒体查询

svg多媒体图标

There has been a lot of interesting chatter regarding SVG as of late, including thorough posts by David Bushell and Chris Coyier. One aspect in particular that is getting quite a bit of attention is the ability to embed media queries within SVG files. Even more amazing is the fact that this was first talked about by Andreas Bovens of Opera all the way back in 2009!

到目前为止，关于SVG的讨论非常有趣，包括David Bushell和Chris Coyier的详尽帖子。 特别引起关注的一个方面是能够将媒体查询嵌入SVG文件中。 更令人惊奇的是，这是Opera的Andreas Bovens在2009年就开始谈论的事实！

The renewed interest in the technique makes a lot of sense. In 2009 using SVG wasn’t a very viable option, but the landscape has improved quite a bit since then. This has lead to some very interesting ideas such as Estelle Weyl’s experiment using SVG to display different raster images.

对这项技术的重新兴趣很有意义。 在2009年，使用SVG并不是一个非常可行的选择，但是从那时起，情况已经有了很大的改善。 这导致了一些非常有趣的想法，例如Estelle Weyl的使用SVG显示不同栅格图像的实验 。

There are simpler applications as well. Say you have a logo that includes a slogan. When the logo is displayed at a small size the slogan can become illegible. At those sizes it may make the most sense to simply hide the slogan allowing the rest of the logo to display. With embedded media queries you could apply an id or class to the portion of SVG that generates the slogan and then embed a media query within the SVG file that hides the slogan when the logo is below a certain size. Essentially something like this:

还有更简单的应用程序。 假设您有一个包含标语的徽标。 当徽标以小尺寸显示时，标语可能变得难以辨认。 在这些尺寸下，最简单的方法是隐藏标语，让徽标的其余部分显示出来。 使用嵌入式媒体查询，您可以将ID或类应用于生成标语的SVG部分，然后将媒体查询嵌入SVG文件中，当徽标小于特定大小时，该媒体查询将隐藏标语。 本质上是这样的：

<svg>
    <defs>
        <style type="text/css">
            @media screen and (max-width: 200px) {
                #slogan{
                    display: none;
                }
            }
        </style>
    </defs>
    <g id="slogan">
        ...
    </g>
</svg>

In the stripped down example above, the code that creates the slogan is wrapped in a group element (<g>) with an id of “slogan” applied. Here’s where the fun part comes in. The media query is based on the width of the image, not the screen! So in the above example, the slogan is hid when the image is below 200px wide, regardless of screen size. It’s sort of a small teaser for what it would be like to have element media queries.

在上面的精简示例中，创建标语的代码被包装在一个组元素(<g>)中，其ID为“ slogan”。 有趣的部分就在这里。媒体查询基于图像的宽度，而不是屏幕的宽度！ 因此，在上述示例中，无论屏幕大小如何，当图像的宽度小于200px时，都会隐藏该标语。 对于元素媒体查询来说，这有点像一个预告片。

The exception to this rule are inline SVG images. In that case, the SVG file is no longer self-contained and the media queries are relative to the width of the viewport of the screen.

内联SVG图片是该规则的例外。 在这种情况下，SVG文件不再是独立的，媒体查询相对于屏幕视口的宽度。

支持 (Support)

To get an idea of the level of support, I grabbed the image of a Kiwi standing on an oval from Chris Coyier’s post. I put an id on the oval and, using a max-width media query, hid it when the image is below 200px wide.

为了了解支持的程度，我从克里斯·科耶尔(Chris Coyier)的帖子中捕捉了一个猕猴桃站在椭圆形上的图像。 我在椭圆上放了一个id，并使用最大宽度的媒体查询在图像宽度小于200px时将其隐藏。

I love automating test results, but couldn’t figure out a way to pull it off consistenly so these test were run by hand on the following browsers:

我喜欢自动化测试结果，但无法找到一种始终如一的方法，因此这些测试是在以下浏览器上手动运行的：

• Chrome 14 - 25
  Chrome14-25
• Safari 4.0.5 - 6.0.2
  Safari 4.0.5-6.0.2
• Opera 10 - 12.14
  Opera 10-12.14
• IE 10
  IE 10
• Firefox 3.6 - 19
  Firefox 3.6-19
• Android 3.2 - 4.1
  Android 3.2-4.1
• Blackberry 6 - 7
  黑莓6-7
• iOS 5 - 6.0.1
  iOS 5-6.0.1

背景图片 (Background Images)

Run the test

运行测试

Tested	Passed
Android 3+	No
Blackberry 6+	No
Chrome 17+	Yes
Firefox (<= 19 tested)	No
IE 10	No
iOS 6+	Yes
Opera 10+	No
Safari <= 5.1	No
Safari 6+	Yes

经过测试	已通过
Android 3+	没有
黑莓手机6+	没有
Chrome17+	是
Firefox(已测试<= 19)	没有
IE 10	没有
iOS 6以上	是
歌剧10+	没有
Safari <= 5.1	没有
Safari 6+	是

结果 (Results)

Support for media queries within an SVG file that is used as a background image is still a bit poor. Basically, you have support in Chrome 17+, iOS 6 and Safari 6. Opera, since version 11, and IE10 both hid the slogan regardless of whether or not the media query applied. It’s bizarre and if someone knows why, please feel free to enlighten me.

在用作背景图像的SVG文件中，对媒体查询的支持仍然有点差。 基本上，您在Chrome 17 +，iOS 6和Safari 6中都具有支持。自版本11和IE10起，无论是否应用媒体查询，都隐藏了该标语。 这很奇怪，如果有人知道为什么，请随时启发我。

IMG元素 (IMG Element)

Run the test

运行测试

Tested	Passed
Android 3+	No
Blackberry 6+	No
Chrome 14-18	No
Chrome 19+	Yes
Firefox 4+	Yes
IE 10	Yes
iOS 6+	Yes
Opera 10+	Yes
Safari <= 5.1	No
Safari (6+)	Yes

经过测试	已通过
Android 3+	没有
黑莓手机6+	没有
Chrome14-18	没有
Chrome19+	是
Firefox 4+	是
IE 10	是
iOS 6以上	是
歌剧10+	是
Safari <= 5.1	没有
Safari(6岁以上)	是

结果 (Results)

Support for media queries inside SVG images placed in a img element is a bit better. Chrome 19+, Firefox 4+, Opera 10+ (maybe earlier—10 is the oldest I had handy for testing), Safari 6, iOS6 and IE10 all behaved as expected.

对放置在img元素中的SVG图像内部的媒体查询的支持要好一些。 Chrome 19 +，Firefox 4 +，Opera 10+(也许是更早的版本-10是我测试过的最老的版本)，Safari 6，iOS6和IE10的表现均符合预期。

对象元素 (Object Element)

Run the test

运行测试

Tested	Passed
Android 3+	No
Blackberry 6+	No
Chrome (14+ tested)	Yes
Firefox 4+	Yes
IE 10	Yes
iOS 6+	Yes
Opera 10+	Yes
Safari 5.1+	Yes

经过测试	已通过
Android 3+	没有
黑莓手机6+	没有
Chrome(14 +测试)	是
Firefox 4+	是
IE 10	是
iOS 6以上	是
歌剧10+	是
Safari 5.1以上版本	是

结果 (Results)

Using the object element, the picture is even more rosy. Safari 5.1+, iOS 6+, Firefox 4+, Chrome 14+, Opera 10+ and IE10 all passed the test.

使用对象元素，图片会变得更加红润。 Safari 5.1 +，iOS 6 +，Firefox 4 +，Chrome 14 +，Opera 10+和IE10均通过了测试。

内联SVG (Inline SVG)

Run the test

运行测试

Tested	Passed
Android 3+	Yes
Blackberry 6+	No
Chrome (14+ tested)	Yes
Firefox 4+	Yes
IE 10	Yes
iOS 6+	Yes
Opera 10+	Yes
Safari 5.1+	Yes

经过测试	已通过
Android 3+	是
黑莓手机6+	没有
Chrome(14 +测试)	是
Firefox 4+	是
IE 10	是
iOS 6以上	是
歌剧10+	是
Safari 5.1以上版本	是

结果 (Results)

As mentioned before, using inline SVG’s do not respond based on image width, but on the width of the screen. So the results above are based on how it performed at different screen sizes. As it turns out, it’s pretty good. You get the usual suspects, and Android 3.x and up decides to play along as well.

如前所述，使用嵌入式SVG不会根据图像宽度做出响应，而是根据屏幕的宽度做出响应。 因此，以上结果基于它在不同屏幕尺寸下的表现。 事实证明，这非常好。 您会遇到通常的疑惑，Android 3.x及更高版本也决定一起玩。

注意事项和结论 (Caveats and Conclusion)

Notably absent from the use cases above (aside from inline SVG) is the stock Android browser, which had no SVG support at all in 2.x and still doesn’t support media queries inside of SVG images as of 4.1.

上面的用例中(在线SVG除外)特别缺少的是普通的Android浏览器，该浏览器在2.x中完全不支持SVG，但自4.1以来仍不支持SVG图像内部的媒体查询。

I also haven’t tested what the performance implications are of this. I know with my simple example, there wasn’t anything that noticeable, but I suspect that could change if the number of queries applied increases or you do something more substantial than a simple show/hide.

我也没有测试这对性能的影响。 我以简单的示例知道，没有什么值得注意的，但是我怀疑如果应用的查询数量增加或者您做的事情比简单的显示/隐藏更重要，那可能会改变。

Finally, this isn’t as clear cut as a boolean supports or no supports. For example, changing the fill of the oval in a SVG background image works just fine in IE10. (Though Opera still appears to apply it no matter what.) Results for support will no doubt vary based on what properties you try to alter, what media queries you use (more on that soon, I hope!), and perhaps even what elements you try to apply those too. I would love for someone with a bit more knowledge of SVG to chime in if they’ve got any ideas about this.

最后，这不像布尔值支持或不支持那样明确。 例如，在IE10中， 更改 SVG背景图像中椭圆形的填充效果很好。 (尽管Opera无论如何仍会应用。)毫无疑问，支持的结果会因您尝试更改的属性，所使用的媒体查询(希望不久之后会出现更多情况)以及甚至什么元素而异。您也尝试将其应用。 在如果他们已经得到了有关这个任何想法，我会为某人与SVG的多一点知识，磬爱 。

Update: Turns out, Jeremie Patonnier’s has already built a great test for media query support in SVG images.

更新：事实证明，Jeremie Patonnier已经为SVG图像中的媒体查询支持建立了很好的测试 。

In short be sure to experiment and test thoroughly to make sure the results are as expected. It’s exciting stuff with loads of potential.

简而言之，请务必进行实验和测试，以确保结果符合预期。 这是充满潜力的令人兴奋的东西。

翻译自: https://timkadlec.com/2013/04/media-queries-within-svg/

svg多媒体图标