svg 圆_圆（几乎）完成：CSSConf上的SVG演示

svg 圆

During CSSConf 2014 I was encouraged to give a B-track presentation following Sara Soueidan’s talk on SVG earlier that day. Together with the video above, I’ve added a full linked transcript (since YouTube the auto-caption algorithim apparently renders my hybrid accent as Martian) and resource list (also available in the SVG reading lists). The presentation is divided roughly into thirds:

在CSSConf 2014期间，我鼓励当天晚些时候Sara Soueidan 在SVG上发表演讲后进行B轨演讲。 与上面的视频一起，我添加了完整的链接记录(自YouTube以来，自动字幕算法显然使我的混合口音显示为Martian)和资源列表(也可在SVG阅读列表中找到 )。 演示大致分为三部分：

• setting up drawings in Adobe Illustrator and exporting them

  在Adobe Illustrator中设置图形并将其导出

• cleanup of SVG code
  清理SVG代码
• rare or unappreciated uses for SVG
  SVG的罕见或未使用

The talk was very last minute – I had been ask to do it just the night before – so please excuse the poor quality of the slides; I’ve also added small corrections and clarifications in the transcript.

会谈是最后一分钟-我一直在问这样做只是前一天晚上-所以请原谅幻灯片的质量较差; 我还在笔录中添加了一些小的更正和澄清。

成绩单 (Transcript)

Hey. My name’s Dudley Storey, and I’m here as last-minute request to back on the excellent presentation by Sara Soueidan on SVG. To make a long story short, Sara was originally going to talk about Shapes, and I was originally going to talk about SVG. She got in, and I didn’t quite get in, but then she changed her mind… so I’m going and try and do an accessory topic to (hers), featuring a little bit of my own work and talking about some of the things Sara didn’t have time to address. I would recommend that if you’re watching this now that you go see Sara’s first so that you can get the basics.

嘿。 我叫Dudley Storey，是我在最后一刻要求回到Sara Soueidan在SVG上的精彩演讲。 长话短说，Sara本来要谈论Shapes ，而我本来要谈论SVG。 她进来了，而我还不太想进去，但是后来她改变了主意……所以我要去尝试为她(她)做一个辅助话题，以我自己的一些工作为特色，并谈论一些萨拉没有时间解决的事情。 我建议，如果您现在正在观看此视频，请先去看Sara的第一本，以便您了解基础知识。

I’m going to start off with just a little bit of perspective. I am Dudley Storey (@dudleystorey on Twitter) I have a blog where I write about web development, and by trade I am a web development teacher. That’s what I do: I teach full-time, part-time, and night classes. I’m also a writer: I published Pro CSS3 Animation through Apress last year. I’m also a contributing editor to Smashing Magazine: I do their coding section.

我将从一些角度开始。 我是Dudley Storey (Twitter上的@dudleystorey )，我有一个博客，其中写有关于Web开发的文章，按行业，我是Web开发老师。 那就是我要做的：我教全日制，兼职和夜间课程。 我也是作家：我去年通过Apress出版了Pro CSS3 Animation 。 我还是Smashing Magazine的特约编辑：我做他们的编码部分 。

So: SVG. SVG’s been thought of, and debated, and worked through as this foreign thing: this foreign, not terribly understandable, kind of battle against CSS. And it’s really not right. We really shouldn’t think of SVG and CSS as being enemies, or even frenemies… they really are two parts of the same side. Don’t think of them as battling each other: think of them as one tool, like a kick-ass lightsaber, that are joined together. I’ll show you ways that CSS and SVG – and, ultimately, HTML – can really start to complement each other. They’re not always just “Oh, it’s only just SVG” or “It’s only just CSS” – the two do start to work together in very interesting kinds of ways.

所以：SVG。 SVG已经被思考，辩论和解决，这是一件与众不同的事情：与CSS的这种陌生的，不是很容易理解的斗争。 这确实是不对的。 我们真的不应该将SVG和CSS视为敌人，甚至是敌人……它们确实是同一方面的两个部分。 不要将它们视为彼此搏斗：可以将它们视为结合在一起的一种工具，例如踢屁股的光剑。 我将向您展示CSS和SVG以及最终HTML可以真正开始互补的方式。 它们并不总是“哦，仅是SVG”或“仅是CSS”，两者确实开始以非常有趣的方式一起工作。

I’m going to give a very quick breakdown of a couple of things people need to do – again, Sara covered a little of this, but I’m going to do an addition.

我将快速简要介绍人们需要做的几件事-萨拉再次介绍了其中的一些内容，但我将做一些补充。

Adobe Illustrator Workflow for SVG Production. If you know that you’re going to be using Adobe Illustrator to export to SVG then there’s a couple of things that you do want to do. You’ll want to set up your canvas in pixels: that seems kind of weird at first, as SVG is meant to be this scale-free, doesn’t-matter-what-kinds-of-units-you-use (technology), and that’s true, but it’s easiest if you set up canvas first in pixels because it’s the easiest thing to relate to: it doesn’t mean that your SVG is limited to a certain pixel dimension, but it does help move things across, work out where components are, that kind of stuff.

SVG制作的Adobe Illustrator工作流 。 如果您知道要使用Adobe Illustrator导出到SVG，那么您需要做几件事。 您将需要以像素为单位设置画布：乍一看似乎很奇怪，因为SVG本应是无标度的，不需要使用任何种类的单位(技术)，的确如此，但是如果首先以像素为单位设置画布是最容易的，因为这是与之相关的最容易的事情：这并不意味着您的SVG限于特定的像素尺寸，但是它确实可以帮助您进行移动，计算出组件在哪里，那种东西。

The artboard (in Illustrator) is going to become the viewbox of the SVG. Although the viewbox does a lot of things in SVG, (it’s) essentially the visible area of your SVG. So if you want to do things off-canvas, that’s perfectly fine, just make sure your artboard is a certain size. If you want to make it larger, that’s perfectly fine too. Just be aware that the two (artboard and viewport) will match up by default in Illustrator.

画板(在Illustrator中)将成为SVG的视图框。 尽管viewbox在SVG中做了很多事情，但实际上是SVG的可见区域。 因此，如果您想在画布之外进行操作，那很好，只需确保您的画板尺寸一定即可。 如果您想使其更大，那也很好。 请注意，默认情况下，这两个(画板和视口)在Illustrator中会匹配。

SVG in Illustrator will set itself up to be CMYK: don’t make the mistake that generations of people have made using these tools when you really want RGB in most cases.

Illustrator中的SVG会将自己设置为CMYK：在大多数情况下，当您真正想要RGB时，不要犯几代人使用这些工具所犯的错误。

The way that I like to think about SVG is that you’re making drawings as data: you’re not just making pretty lines, you’re not just drawing curves. So as you build things, give them some sort of naming convention (with id or class attributes). Any kind of naming convention is fine, so long as it’s consistent and you stick to it. Name everything as you build it: while it’s not absolutely necessary to do so, it becomes a whole lot easier later when you’re drawing to manipulate that as a pure SVG.

我想考虑SVG的方式是将绘图作为数据进行绘图 ：您不仅在绘制漂亮的线条，而且还在绘制曲线。 因此，在构建事物时，请给它们某种命名约定(具有id或class属性)。 任何一种命名约定都可以，只要它是一致的并且您坚持使用即可。 在构建时为所有名称命名：尽管并非绝对必要如此，但是稍后当您打算将其作为纯SVG进行操纵时，将变得更加容易。

Simplify: as a rule, use the fewest number of points to create a shape. Again, a lot of people will start to use (many points) to get the shape they want on screen. Don’t do that: try to use the fewest number of points. Try to avoid filters in Adobe Illustrator, as they’re not yet translated into SVG when exported. Don’t stroke things if you don’t have to: stroking will add another level or layer to your SVG that you really don’t need. If you need it, fine, but if you don’t, make sure it’s not there. Try to keep polygons and circles as geometrical objects: don’t try to break them apart. Create a background if necessary: understand that (the background of) SVG elements is transparent by default: they’re automatically alpha-masked, which is awesome, but it means that there’s no “body” to an SVG file. You can do that in the body of your HTML page, where the SVG is obviously going to be used, but you can’t do it in the SVG itself, short of drawing a giant rectangle at the back of the whole artboard. You can kind of, sort of, do a background on the SVG using CSS (once the SVG is embedded into your document) – it’s possible to do, although you have to be a little bit careful about it.

简化：通常，使用最少的点数来创建形状。 同样，许多人将开始使用(很多点)来获得他们想要的屏幕形状。 不要那样做：尝试使用最少的点数。 尝试避免使用Adobe Illustrator中的过滤器，因为在导出时它们尚未转换为SVG。 如果不需要，不要抚摸：抚摸会为您的SVG添加您真正不需要的其他级别或层。 如果需要，可以，但是如果不需要，请确保它不存在。 尝试将多边形和圆形保留为几何对象：不要试图将它们分开。 如有必要，请创建一个背景：了解SVG元素的背景(默认情况下)是透明的：它们会自动进行alpha蒙版，这很了不起，但这意味着SVG文件没有“正文”。 您可以在HTML页面的正文中执行此操作，显然要在其中使用SVG，但是您不能在SVG本身中做到这一点，除非在整个画板的背面绘制一个巨大的矩形。 您可以使用CSS在SVG上做某种背景(一旦将SVG嵌入到文档中)–可以这样做，尽管您需要对此有所注意。

Before exporting from Illustrator to SVG, try to merge shapes using Pathfinder tools. Again: fewer elements, simpler elements, better: it doesn’t mean your SVG can’t be complex, doesn’t mean it can’t involve a lot of elements, but obviously the fewer things you have the better.

从Illustrator导出到SVG之前，请尝试使用“路径查找器”工具合并形状。 再说一次：更少的元素，更简单的元素，更好：这并不意味着您的SVG不会很复杂，并不意味着它不会涉及很多元素，但是显然，您拥有的东西越少越好。

Decide how you’re going to treat text: it’s important to understand that SVG can have text as text so it’s readable, styleable, and everything else, but with the downsides that we’ve experienced with real text on the web forever: that is, you might embed a font that doesn’t load. So SVG text has all the same problems in that regard. Or, you can break it apart into outlines. The downside of that is that (the text is) not readable anymore: it’s purely path information. So make a decision: is this going to be readable by Google (in which case) leave it as text, style it, and understand that styles might not be applied in every circumstance. Or: you want the (text) to be exactly the way it appears, but you don’t want it readable by anything, but you want it manipulatable so you can move points around, then break it apart and convert to outlines.

确定您将如何对待文本：了解SVG可以将文本作为文本，以便其可读性，可样式化以及其他所有功能，这一点很重要，但是，这是我们永远在网络上使用真实文本所遇到的缺点： ，您可能会嵌入无法加载的字体。 因此，SVG文本在这方面具有所有相同的问题。 或者，您可以将其分解为轮廓。 缺点是(文本)不再可读：它只是路径信息。 因此，请做出一个决定：Google是否可以理解(在这种情况下)将其保留为文本，设置样式并了解样式可能不会在每种情况下都适用。 或者：您希望(文本)与它的显示方式完全相同，但是您不希望它被任何东西读取，但是您希望它可以被操纵，以便可以移动点，然后将其分解并转换为轮廓。

Finally, crop the artboard – there’s no point in having areas that you don’t need – and export to SVG. One thing to keep in mind about that: Adobe Illustrator CC kinda sorta lies to you. It does allow export, but Adobe Illustrator CC has a new “make responsive” feature that’s not totally true: it does it part of the way by removing the height and width elements, which I’ll get into in a little bit, but it doesn’t really do do everything you need it to do in most circumstances, so take the feature with a grain of salt.

最后，裁剪画板-不需要的区域没有意义-并导出到SVG。 需要记住的一件事：Adobe Illustrator CC有点像是您的谎言。 它确实允许导出，但是Adobe Illustrator CC具有一个新的“使响应”功能，这并不完全正确：它是通过除去height和width元素来实现的，这是我将要介绍的一点，但是在大多数情况下并不能真正完成您需要做的所有事情，因此，请带着一丝盐来使用该功能。

Illustrator has an option to reduce the number of decimal points used in the exports: (i.e. the accuracy of) the position of each little element and point in the SVG drawing.  You don’t need 3 decimal places for drawings in the vast majority of circumstances; all it does is increase file size, making the SVG file larger and longer. If you possibly can, reduce the number of decimal points, ideally to 1. All of this stuff can ultimately done in post-processing, using some of the tools Sara talked about, but why post-process something if you can get it right the first time?

Illustrator可以选择减少导出中使用的小数点数量：(即，精度)每个小元素和点在SVG绘图中的位置。 在大多数情况下，图纸不需要三位小数； 它所做的只是增加文件大小，从而使SVG文件更大和更长。 如果可能的话，最好将小数点的数目减少到1。理想情况下，所有这些东西最终都可以使用Sara谈到的一些工具在后处理中完成，但是如果可以正确处理，为什么还要后处理呢？第一次？

Basic SVG cleanup: again, Sara was talking about how to make SVG “clean” using tools, and that’s good to know and important. What’s also good to know is what those tools are actually doing: it’s not terribly complicated for the most part, and if you know a little bit about what they’re doing, you can do the same thing by hand if the tool doesn’t work, (as well as) understand what might go wrong.

基本的SVG清理：Sara再次在谈论如何使用工具“清洁” SVG，这是很好的认识并且很重要。 还可以知道这些工具的实际作用是什么：在大多数情况下它并不十分复杂，并且如果您对它们的作用有所了解，则可以手动执行相同的操作工作(以及)了解可能出了什么问题。

Generally speaking the export of SVG from Inkscape, Illustrator or other tools will be extremely verbose: there will be a lot of information in there. While it’s not wrong, it’s also unnecessary, and you can usually save yourself space (by removing it). Things you don’t need, unless you’re doing some kind of deep dive into the SVG document: you don’t need the XML prolog (or) the doctype. You do need the namespace information, mostly because without it the SVG file is going to be invalid, so you may as well leave it in. version you don’t technically need. width and height, for the most part, are what get people a little screwed up because they think (the attributes) are what’s constraining (the SVG), and get it confused with the viewBox, and they try to take the wrong one out. For now, take width and height out: note that nothing has changed. You don’t need id on the SVG element itself unless there is a whole bunch of SVG elements on the same page. At the same time, of course, make sure that everything is still valid and still working. Don’t need <def> elements very often, unless (they are) defining filters. Do be careful about group transforms: you’ll very often find empty groups that don’t actually do anything, which can usually be removed. If they’re groups with id (attributes) or transforms on them, leave them the heck alone: you don’t want to play around with them, because removing them will change or spoil your work.

通常来说，从Inkscape，Illustrator或其他工具导出SVG会非常冗长：其中会有很多信息。 没错，但这也是不必要的，通常可以节省空间(通过删除空间)。 不需要的事情，除非您要对SVG文档进行某种深入的研究：您不需要XML序言(或)文档类型。 您确实需要名称空间信息，主要是因为没有它，SVG文件将是无效的，因此您最好将其保留为技术上不需要的version 。 width和height在大多数情况下是使人们有点费解的原因，因为他们认为(属性)是约束因素(SVG)，并将其与viewBox混淆，然后他们尝试将错误的东西拿出来。 现在，取出宽度和高度：请注意，什么都没有改变。 除非同一页面上有一堆SVG元素，否则不需要SVG元素本身的id。 当然，与此同时，请确保所有内容仍然有效并且仍然有效。 除非(他们)正在定义过滤器，否则不需要经常使用<def>元素。 请注意组变换：您经常会发现实际上没有任何作用的空组，通常可以将其删除。 如果它们是具有id (属性)或对其进行转换的组，则不要理会它们：您不想与他们一起玩耍，因为删除它们会改变或破坏您的工作。

I started off talking about the fact that SVG and CSS are really copasetic, so let me demonstrate a couple of ways in which that’s true. You can see that by default most tools will put lot of (SVG) styles inline. It doesn’t need to be inline, at all. You can do the same stuff you’ve always done by doing an embedded style tag inside the SVG, and that style tag can contain the vast majority of the CSS that you’re used to: it can contain @media queries, it can contain comments, it can contain most of the stuff you’re used to. Again, Sara did a very nice little screen of what (SVG) will take, what it can’t take, so there are some exceptions, but for the most part, the CSS you’re used to can be applied.

我从谈论SVG和CSS确实是酶的事实开始，所以让我演示几种实现方法。 您可以看到，默认情况下，大多数工具都会内嵌很多(SVG)样式。 根本不需要内联。 您可以通过在SVG内执行嵌入式样式标签来完成与以前相同的工作，并且该样式标签可以包含您习惯使用的绝大多数CSS：它可以包含@media queries ，它可以包含评论，它可以包含您习惯的大多数内容。 再次，Sara在屏幕上做了一个非常漂亮的小屏幕，显示了(SVG)的内容，不可以的内容，因此有一些例外，但是在大多数情况下，可以应用您惯用CSS。

Here’s where it gets interesting: our path has an id of path1; let’s just change that, let’s call it jedi. So our path has an id: if it has an id, it can be addressed like an id, or a class, or most anything else that you’re used to (in CSS). It’s a fragment – it’s a piece on the page, a part of the DOM. We don’t need even-odd, we don’t need stroke, in this case.

这就是有趣的地方：我们的路径的id为path1 ； 让我们改变一下，我们称之为jedi 。 因此，我们的路径具有一个id ：如果它具有id ，则可以像id ， class或大多数您习惯使用的其他任何东西(在CSS中)一样进行寻址。 这是一个片段–它是页面上的一部分，是DOM的一部分。 在这种情况下，我们不需要even-odd ，也不需要stroke 。

[Presenter removes even-odd and stroke attributes from SVG code]

[演示者从SVG代码中删除了even-odd和stroke属性]

We can take many – not all, but many - of the style attributes from SVG and apply them as styles in CSS. That starts to make things really neat: it means we can use any CSS – color, in this case – associated with that style.

我们可以从SVG中获取很多(不是全部，但是很多)样式属性，并将它们作为CSS中的样式应用。 这开始使事情变得真正整洁：这意味着我们可以使用与该样式关联的任何CSS(在这种情况下为颜色)。

[Presenter applies a hexadecimal color to the fill style for a path with the id of jedi in the embedded style sheet]

[演示者将十六进制颜色应用于嵌入样式表中id为jedi的路径的fill样式]

Students I teach get a little confused the first time I show them this, saying “Does that mean I can now go into my HTML page and (use a rule like) div { fill: red} ?” No, you can’t. It’s only applicable to SVG, but in that context it’s perfectly understood and perfectly reasonable.

我教给他们的学生在第一次给他们看时会有些困惑，说：“这是否意味着我现在可以进入我HTML页面并(使用类似的规则) div { fill: red} ？” 不，你不能。 它仅适用于SVG，但在这种情况下，它已被完全理解和完全合理。

(Almost) all the CSS you know can be applied: let’s say hsla.

(几乎)您可以使用所有已知CSS：假设hsla 。

[Presenter changes the fill value to an hsla color]

[演示者将fill值更改为hsla颜色 ]

Any hsl (value), any colors, and (CSS you want to apply, you can do, you don’t have to stick with hex(idecimal).

任何hsl (值)，任何颜色和(要应用CSS)都可以，您不必坚持使用十六进制(理想)。

SVG has opacity, (which) you can use in just the same way you can in CSS: you can do hover effects just as you would in CSS. Let’s say we hover over an element with a fade; of course, you can transition that as well.

SVG具有opacity ，您可以像在CSS中一样使用opacity ：您可以像在CSS中那样进行hover效果。 假设我们将鼠标悬停在带有渐变的元素上； 当然，您也可以转换它。

[Presenter adds a :hover pseudo-class to the SVG element, reducing its opacity to 0 over time with a CSS transition]

[Presenter向SVG元素添加了:hover伪类，通过CSS过渡将其opacity随时间降低为0 ]

There’s a few interesting things to note about this: SVG is defined by shapes, not the box model you’re used to. If this was a PNG, as soon as (the user) moves (their cursor) over the area of the thing – the rectangular box that contains it – then it’s going to activate. But in SVG, (the box) doesn’t count: I have to be over the shape in order to activate it. That means very precise pixel responses. We’ve all seen icons (of) circular shapes with the problem that (a) move outside the circular area turns or clicks (the UI element), and that’s a misregistration. One of the advantages of SVG is that there is no misregistration: if you make a shape and say “this shape is a link” or “this shape has a hover effect” the shape registers, which makes SVG really powerful and very good.

关于这一点，需要注意一些有趣的事情：SVG由形状定义，而不是您习惯的盒子模型。 如果这是PNG，则(用户)将光标移动到事物的区域(包含它的矩形框)上时，它将立即激活。 但是在SVG中，(方框)不算在内：我必须要超过形状才能激活它。 这意味着非常精确的像素响应。 我们都看过圆形的图标，但有一个问题：(a)移到圆形区域的外面转动或单击(UI元素)，这是一个未注册的问题。 SVG的优点之一是不会出现套准错误：如果您制作一个形状并说“此形状是一个链接”或“此形状具有悬停效果”， 则形状会注册，这使SVG真正强大且非常好。

One thing you have to be aware of is that CSS written inside the SVG will affect the appearance of the SVG but not its interactivity; in other words, you can’t write a hover rule inside an SVG and then take that SVG as an image and put it on the page. The appearance will work, but the interactivity won’t. If you want the interactivity you’ve got to place the SVG as an <object> or embedded inside the HTML.

您必须了解的一件事是，在SVG中编写CSS会影响SVG的外观，但不会影响其交互性。 换句话说，您不能在SVG内编写悬停规则，然后将该SVG用作图像并将其放在页面上。 外观将起作用，但交互性将无效。 如果需要交互性，则必须将SVG放置为<object>或嵌入HTML内。

A surprising number of people in the conference in the conference we’ve just been attending don’t know about SVG filters, or using filters in general: there was a quick little (show of) hands, and very few people were using them. That’s surprising to me, because one of the things that we’re talking about is… loading pages as quickly as possible, the interactivity to be as snappy as possible, and (reducing) our workflow.

在我们刚刚参加的会议中，有很多人不知道SVG过滤器，也不知道一般使用过滤器：动手很少(显示)，很少有人在使用它们。 这让我感到惊讶，因为我们正在谈论的事情之一是……尽快加载页面，交互尽可能灵活，以及(减少)我们的工作流程。

People (associate) filters with -webkit, and understandably so, because they’ve been in there for a couple of years now. While they went through a couple of changes in terms of the spec, you can absolutely do filters in that way. But not too many people know that the same filters were built into Internet Explorer until IE9, and very often (those filters were) very simple. Modern Safari and Chrome are covered with CSS (filters), but unfortunately other browsers haven’t integrated them yet (or at least not entirely), IE9 and earlier is also covered (with proprietary MS filters), but what about Firefox?

人们(关联)使用-webkit过滤，这是可以理解的，因为它们已经存在了几年了。 当他们在规格方面进行了几处更改时，您绝对可以通过这种方式进行过滤。 但是，没有多少人知道在IE9之前的Internet Explorer中都内置了相同的过滤器，而且很多时候(这些过滤器非常简单)。 现代Safari和Chrome都包含CSS(过滤器)，但是不幸的是，其他浏览器尚未集成(或至少不是完全集成)，IE9和更早版本也包含了CSS(过滤器)，但是Firefox呢？

Well, in Firefox, we can use an SVG file; the world’s simplest SVG, it’s tiny. In this case, it’s a color matrix. In this case you don’t need to understand it totally – it’s matrix math, no big deal – and pop it into a page, or as a separate file, (or an inline reference). What does it do? Very simply, it’s a bit of SVG that does the same job (as a CSS filter). In this case, the filter has an id of greyscale. So the nice part about this is, you now have the same effect, and it’s one of the very best examples of progressive enhancement: unless you or your client are real sticklers for “everything has to look exactly the same in the same way (across all browsers)”, generally speaking people aren’t going to be hugely upset if they are in IE10 and don’t know that the thing is meant to be in back-and-white and transitioning into color later, and they just see a color version because IE10 is between a rock and a hard place – it doesn’t yet support CSS filters or SVG filters, at least in this way, so it’s in a rocky place at the moment – but if they’re not aware of that, that’s fine.

好吧，在Firefox中，我们可以使用SVG文件。 世界上最简单的SVG，它很小。 在这种情况下，它是一个颜色矩阵。 在这种情况下，您不需要完全理解它-它是矩阵数学，没什么大不了-并将其弹出到页面中或作为单独的文件(或内联引用)显示。 它有什么作用？ 简而言之，就是SVG可以完成相同的工作(与CSS过滤器一样)。 在这种情况下，过滤器的id为greyscale 。 因此，这方面的好处是，您现在具有相同的效果，并且是渐进增强的最佳示例之一：除非您或您的客户是真正的坚持者，否则“一切都必须以相同的方式看起来完全相同(所有浏览器)”，通常来说，如果人们使用的是IE10，并且不会知道事情本来应该是黑白的，以后再转换为彩色，那么人们不会感到非常沮丧。彩色版本，因为IE10处在艰难险阻之间-至少还不支持CSS滤镜或SVG滤镜 ，至少目前是这样，因此目前处于多岩石的环境-但是如果他们不知道这一点， 没关系。

The advantage is, you can load one image once. You want to turn it into greyscale, that’s perfectly fine: you add a filter and it’s done. You don’t have to load multiple versions of the image, you don’t have to have multiple HTTP requests, you don’t need to do weird things with image sprites: it’s just done.

好处是，您可以一次加载一张图像。 您想要将其转换为灰度，这很好：添加过滤器即可完成。 您不必加载图像的多个版本，不必具有多个HTTP请求，也不需要对图像精灵进行奇怪的事情：这已经完成了。

You can do the same thing with blur; again, traditional Microsoft blur filters, which work in IE9, modern blur filters, in terms of –webkit, and blur in terms of SVG, (all of) which can be transitioned as well. Sepia toning, as well.

您可以模糊处理相同的事情。 同样，传统的Microsoft模糊过滤器(可在IE9中使用)，现代模糊过滤器(针对–webkit )和模糊(就SVG)(全部)都可以转换。 棕褐色调也是如此。

A couple of other areas in which people don’t necessarily understand that SVG can be used: imagemaps. Anybody who’s been around on the web for 10 years plus will remember imagemaps. They went the way of the dodo – they’re not responsive, they tended to use big, large images – but they still had their place. They were actually really good for touchscreens, especially for kids, because they could see them, they could touch the pictures, and navigate away from there. The problem was they’re not responsive, at all. SVG you can absolutely make responsive: you can put a bitmap image in the background,  and (make a) hotspot that will exactly scale with the picture as it moves up and down, which is really neat. Animated imagemaps: using clip areas, you can clip out bitmap photographs using paths in SVG. Because it’s pixel-perfect registration, you can then animate those areas as well as link them inside. (I) had an article in .net magazine a couple of months ago about the same technique if you want to read up on it.

人们不一定了解可以使用SVG的其他两个领域：图像映射。 任何在网络上呆了10年以上的人都会记住图像映射。 他们采用了渡渡鸟的方式-他们React迟钝，倾向于使用大而大的图像-但他们仍然占有一席之地。 它们实际上对于触摸屏特别是对于孩子特别有用，因为他们可以看到它们，可以触摸图片，然后离开那里。 问题是他们根本没有React。 SVG绝对可以使您响应：您可以在背景中放置一个位图图像，并(使)一个热点随着图像的上下移动而精确地缩放，这确实很整洁。 动画图像图：使用剪切区域，可以使用SVG中的路径剪切出位图照片。 由于它是完美的像素配准，因此您可以为这些区域设置动画并在内部链接它们。 (I)几个月前在.net杂志上发表过一篇文章，内容涉及相同的技术(如果您想阅读的话)。

Perhaps the most fun is adaptive illustrations, which are the idea that you that you can do @media queries inside of SVG. A lot of traditional use of SVG and responsive design is making things smaller – again, nothing wrong with making things smaller, rearranging them, placing them in different orders, that’s perfectly fine. What’s somewhat unexplored, I think, is the concept (that) we don’t just need to make things smaller; we could also do things like remove elements, because each fragment is definable inside that SVG, you can absolutely remove them with @media queries and simplify designs, not just say “this thing has to get smaller”, or “this thing has to switch to something else”, but literally simplifying diagrams on smaller screens: simplifying tree diagrams on smaller screens and you don’t want users to zoom in and out.

也许最有趣的是自适应插图 ，即您可以在SVG内进行@media查询的想法。 SVG和响应式设计的许多传统用法都使事情变得更小–同样，将事情变得更小，重新排列它们，以不同的顺序放置它们也没错，这很好。 我认为，我们并不需要探索的只是缩小尺寸的概念。 我们还可以执行删除元素之类的操作，因为每个片段都可以在SVG内部定义，因此您可以使用@media查询绝对删除它们并简化设计，而不仅仅是说“这个东西必须变小”或“这个东西必须切换” ”，但实际上是在较小的屏幕上简化了图表：在较小的屏幕上简化了树形图，并且您不希望用户放大和缩小。

Very finally: the CSS spec for gradients is meant to have animation: it’s meant to do it. Unfortunately it doesn’t: to my knowledge, no-one (except IE10+) supports it yet, which is really unfortunate. However, SVG has supported animated gradients for ages, for ever. So: you can start to do really interesting work by animating the actual gradients: you have to use <animate> tags inside of SVG, (which are) not too  dissimilar to the concept of transitions, so it takes a little bit of getting used to, but it’s not too dissimilar. So you can finally – this is a 24-hour sky animation – you can finally start to animate gradients, which is wonderful, and there’s a lot in there. Eventually, of course, this will be supported in CSS, but if you need it right now – if you want the animated gradient – do it in SVG.

最终：渐变CSS规范旨在具有动画效果：能够做到这一点。 不幸的是，事实并非如此：据我所知，目前还没有人(除了IE10 +)支持它，这确实很不幸。 但是，SVG永远支持动画渐变。 所以：您可以通过设置实际的渐变动画来开始做一些非常有趣的工作：您必须在SVG内部使用<animate>标签，(这些标签与过渡的概念并不太相似，因此需要一点时间来使用) ，但并不太相似。 因此，您最终可以-这是一个24小时的天空动画-您终于可以开始为渐变设置动画了，这很棒，而且里面有很多东西。 最终，当然，CSS会支持此功能，但是如果您现在需要-如果您想要动画渐变-可以在SVG中进行。

That’s all the time I have: I hope this was helpful. Again, if you have follow-up questions, by all means ask me on Twitter, follow up on the blog, and I hope to do a fuller and more complete A-track presentation in a future CSSConf.

我一直都在这：我希望这会有所帮助。 同样，如果您有后续问题， 请务必在Twitter上问我 ，在博客上进行后续讨论，我希望在以后CSSConf中做一个更完整，更完整的A轨演示。

翻译自: https://thenewcode.com/904/The-Circle-Is-Almost-Complete-SVG-Presentation-at-CSSConf

svg 圆