响应式SVG的10条黄金法则

null

SVG的许多优点 - 包括无限可缩放的矢量图像,小文件大小以及与DOM的直接集成 - 使其非常适合响应式网页设计。尽管SVG规范已有十年之久,但它在许多浏览器和工具中的相对较新的支持意味着仍然存在许多技巧,漏洞和陷阱甚至经验丰富的网页设计师和开发人员。

在这里,我总结了其中最重要的10条黄金法则。

01.正确设置工具

就像工匠在开始工作之前磨练他的工具一样,任何使用SVG的人都必须设置他们的应用程序,以最有效和最优化的方法提供矢量格式。有许多设置要实现。

首先,除非有令人信服的理由,否则请在矢量工具中将测量值设置为“像素”。虽然它与SVG无关紧要(SVG将衡量视框几乎在任何测量系统中都很幸运地使用它们。使用常见的CSS单元开发SVG绘图是有意义的,而不是打印默认的英寸;它也使得添加更容易@媒体查询和其他干预措施。

不要使画布区域大于它需要的大小。与位图图像一样,SVG中的任何“空白空间”都不会被使用,最好用CSS边距替换。请注意,许多矢量工具(如Sketch)会自动将裁剪区域“裁剪”为选定元素。

同时,不要将画布区域裁剪到元素的确切边缘。抗锯齿仍将应用于SVG,并且将其切得太近也可能会产生抗锯齿。相反,在画布边缘靠近元素的地方至少保持2px清晰度。

响应性和性能密切相关,因此将小数精度设置为不超过两个点。 SVG不考虑整数,因此矢量点的值可以为1.45882721px。这种极端精度完全没有必要,只会增加代码膨胀和文件大小,因此最好在此时截断它。

同样,使用尽可能少的点绘制矢量形状。许多新设计师认为更多的点更好,反之则实际上是正确的:放置好的几个点可以更好地控制元素,同时还可以减小文件大小。

如果您的矢量文件不符合此规则,请不要担心 - 大多数情况矢量艺术应用程序有一个“简化”选项,您可以使用它来减少元素中的点数而不改变其形状。或者,对于详细的工作,我建议使用像Astute Graphics的VectorScribe这样的插件。

02.删除高度和宽度属性

大多数应用程序在其SVG导出中添加了许多专有的,不必要的代码。大多数SVG文件开头唯一需要的代码如下:

  

就我们的目的而言,最重要的方面是删除宽度高度大多数应用程序自动包含的属性这使得SVG在现代浏览器中完全响应。

如果您正在处理大量SVG,或者处于匆忙中,则无需手动完成此步骤。相反,你可以遵循第三条黄金法则中提出的建议......

03.优化和缩小SVG输出

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

智能手动编辑和后期制作优化的组合可显着降低SVG文件大小

无论您使用什么工具来创建SVG内容,还是值得通过类似的工具处理其输出SVGOMG,这将明显削减代码。通常,您可以节省大约20%到80%的文件大小。可以在本地集成相同的代码作为一个gulp或Grunt任务

04.修改IE的代码

规则2提到正确优化的SVG在现代浏览器中完全响应。如果我们将Microsoft Edge视为现代浏览器,那就是如此。对于IE 9-11,我们有一些问题需要解决。如果我们使用SVG作为图像:

我们可以强制IE9-11使用CSS属性选择器正确显示图像:

img [src $ =“。svg”] {width:100%;}

SVG图像在一般制作中运行良好,但交互性有限:大多数浏览器会忽略放置在页面上的SVG内的交互性和动画。此外,SVG图像是浏览器的额外HTTP请求。

由于这些和其他原因,SVG越来越多地用于内联。在这种情况下,SVG代码需要对IE进行更多处理:

 ... 

除了PreserveAspectRatio属性,IE需要更多的指导来保持图像的正确缩放:取SVG的宽度(365在这种情况下),除以高度(525并将结果乘以100%。这将成为填充底SVG的值,'支撑'它在IE中足够开放,以正确的宽高比显示SVG:

 ... 

请注意,为了使事情简洁明了,本文其余部分中的代码示例不包含这些更改。 Amelia Bellamy-Royds写了一篇文章关于扩展SVG的优秀文章

05.考虑SVG的英雄文本

Using SVG for hero text means it will automatically scale in line with its container

将SVG用于英雄文本意味着它将根据其容器自动缩放

目前还没有CSS标准来调整文本到容器的大小。可以使用vw单位缩放文本,但这几乎总是需要至少两个媒体查询干预来在某些视口限制下“钳制”文本。但是,SVG文本将自动调整为容器:

考艾岛

CSS:

header svg text {font-weight:900; font-size:90px;填充:蓝色; }

保持SVG内联保留可访问性和SEO值,并允许使用已嵌入页面中的任何字体来设置文本样式。看到这里欲获得更多信息。

06.为渐进式图标留出宽度和高度

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

非缩放笔划线已应用于此对话框,因此在调整视口大小时宽度不会改变

规则2的一个例外是图标和小徽标,它们应该保留它们宽度高度属性,如果您希望逐步增强它们:

 Codepen  ... 

您可以看到这种技术的实例这里

如果我们只使用CSS调整SVG图标的大小,并且网站的样式表未加载,则图标将以替换元素的默认大小显示:300px x 150px。通过将高度和宽度保持为属性,我们可以默认将它们调整为最接近的合理触摸大小,并使用我们的CSS来增强它们的呈现方式。

07.使用矢量效果来减少细线

默认情况下,SVG使用视口缩放所有内容,包括笔触粗细。通常情况下这很好,但在某些情况下 - 图表和笔画特别应用于文本外部的效果 - 无论图形的大小如何,您都可能希望保持笔划的厚度相同。这是鲜为人知的领域矢量效应Property,可以作为表示属性应用或在CSS中应用:

路径{fill:#fff;中风:#111;笔画宽度:2;矢量效应:非缩放中风; }

看一眼这个技术的完整例子

08.记住位图

许多开发人员认为SVG只能使用矢量,但JPEG和PNG也可以应用于SVG绘图。只要您遵循我的规则到目前为止,当您通过添加位图时,这些图像将会响应标签:

09.考虑适应性解决方案

The classic Coca-Cola logo rendered at different adaptive sizes

经典的可口可乐徽标以不同的自适应尺寸呈现

让事情变得“挤压”只是响应式设计的一部分。从更大的自适应设计意义上讲,RWD所涉及的是在所有视口大小中呈现适当的内容。

这可以通过多种方式实现。 responsivelogos.co.uk提供了一系列使用SVG sprites的示例,但我更喜欢将媒体查询集成到SVG中以创建我称之为“品牌模块”的内容。这种方法使我能够添加,删除和修改组件的可见性。阅读有关自适应品牌模块的更多信息在我的文章中

这种技术可用于图表,插图,地图等。在最简单的模块中,CSS本身可以在SVG内部编写,使其可以在任何地方使用,如前面的规则所述。

10.将媒体查询集成到SVG中

很多人不知道CSS媒体查询可以在SVG内部编写:

     调整viewBox的大小和按比例放大元素进行补偿

结论

SVG的无限可扩展性是它最大的资产,但是浏览器和矢量图形编辑器仍然缺乏某种功能。通过将这些指南集成到您的生产工作流程中并将其传达给团队中的其他人,您可以为Web创建流畅的响应式SVG,使其成为您每天在开发中使用的资产的一部分。

这篇文章最初出现在网络杂志问题283;在这里买

相关文章:



翻译字数超限