首页 > 教程 > 关键词 > SVG最新资讯 > 正文

为网页添加高清SVG ICON解决方案(上)

2015-11-11 11:11 · 稿源:腾讯ISUX

随着硬件快速的发展,Retina技术发展至今,目前Google Nexus6的devicePixelRatio已经到了3.5,虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主,但是为了更好的用户体验,前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。

1.多倍图片

目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍,devicePixelRatio= 3就做三倍,有些人可能会直接做3倍的图片,这样就可以同时兼容devicePixelRatio = 2 ,但是这样其实对于devicePixelRatio = 1和devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片,所以为了提升用户体验,一般我们会分开做几套图片,根据用用户的devicePixelRatio判断让他们加载对应的图片。

2.Iconfont字体图标

在很多国外的响应式站点里一般会采用iconfont,因为可以直接通过font-size和color属性来控制icon的大小和颜色,非常方便,而且由于iconfont本身就是字体文件,会矢量适配各种不同devicePixelRatio,但是在PC上当图标小于等于16px时,或者复杂度高的图标会出现比较严重锯齿,图标无法展示清晰,特别在chrome下的表现尤为严重。正因为如此这个技术在推进过程中遇到许多困难,因为在很多场景下图标确实会较小甚至小于16px,而且有些16px的图标如果复杂度较高,iconfont实现出来的icon会经常出现看不清的情况,而且国内PC用户是占最多的,所以iconfont的这种表现效果很多用户和设计师无法接受。

为什么Iconfont会出现锯齿?

这个问题其实并不是iconfont的错,但很多人都觉得是它的问题,关于锯齿问题,我们先来了解下浏览器的字体渲染机制,阿里有篇文章《字体图标制作详解》里有一部分关于早期字体渲染机制的说明,内容如下:

(从左到右依次)理想的渲染状态、黑白渲染、灰度渲染、次像素渲染

上图左侧第一张是我们认为一种比较理想的渲染效果,但是通过刚才我们介绍栅格我们可以了解到这种状态是不可能的,因为第一代黑白渲染和第二代灰度渲染是不可能做到显示半格像素或一个像素中显示弧度的。

黑白渲染和灰度渲染在渲染图形遇到半格像素或则弧度的时候,他们会有各自不同的处理方式;

举个例子:

如上图红点处像素,我们理解他是有弧度的,且不占满一个像素;各个渲染方式的处理办法如下:

黑白渲染

黑白渲染相对来说比较粗暴,直接通过四舍五入的形式把这里要描绘的图形不显示了;(黑白渲染的形式主要应用于打印机渲染,但是打印机本身的精度非常高,所以打印出来的图形还是很细腻的)

灰度渲染

灰度渲染显得就智能一些了,他通过灰度降级的方式来表达,如果占不到一个像素那就根据他占的面积来降低这个像素的灰度;占的面积越小灰度就越低;

次像素渲染

次像素渲染是第三代渲染方式,相对来说比较高级,他从从左至右将一个像素分成三份;用不同的色彩值来显示图形,这样图形看起来就更加细腻;

现代浏览器字体渲染技术

目前mac系统采用的就是次像素渲染技术,但是现代的window下的高级浏览器例如:IE9+ 、chrome、FF等浏览器采用的是 DirectWrite 或 GDI 这种更高级的字体渲染技术,这里我简单介绍下这两种新的字体渲染技术:

上图从左至右分别用的是:灰度渲染、次像素渲染和 DirectWrite 或 GDI 实现的效果,在FF官方博客中有一篇文章对这两个新的渲染技术做了简单的一个解释,他们两个都是采用的LCD的像素红色、绿色、蓝色来进行像素填充,右侧的文字被放大后我们看到了字体栅格被不同色块填充,其实人眼对于亮度差异非常的敏感,当这些颜色用在像素级别里面我们的眼睛往往认为字形比单纯灰度消除锯齿的效果更好。

在Windows下的Firefox 4中采用的就是GDI这个技术进行字体渲染的,但是到了Firefox 4+之后的版本开始使用了DirectWrite这个技术,官方解释是说DirectWrite支持硬件加速,而且API也更加现代,而GDI API存在许多缺陷和问题。

关于DirectWrite和GDI他们之前的差异这里不作太多描述,在文章最后有相关文章链接,有兴趣的同学可以查看下。上面讲了字体渲染的历史,我们现在来看看目前Windows系统下的浏览器各自都是采用的都是什么字体渲染机制:

Chrome目前依旧是使用GDI,而FF和IE9+已经是采用了DirectWrite,这就是为什么iconfont在Chrome下锯齿会比其他浏览器严重的原因,可能GDI确实像FF官方说的存在许多缺陷,不知为何Chrome至今还在继续使用这个技术。

上面说了这么多关于字体渲染机制原理,在这里能得出一个结论: 不管目前使用什么字体渲染技术,字体显示效果始终是会出现锯齿的。在Retina屏幕上,一个像素被拆成了4个像素,由于它的密度非常高,肉眼根本是看不出锯齿的,所以现在MAC系统下的FF和Chrome都还是用的次像素渲染这项技术。既然iconfont他是一个字体,就难逃出现锯齿的命运,特别在Chrome下就是更加的糟糕了,目前确实通过前端代码也是无法改变这个缺陷。

iconfont由于这个严重的锯齿缺陷导致一些大型的站点很多时候并不会考虑大规模使用它,例如QQ空间,腾讯云这些站点早期也都尝试过iconfont方案,但最后都放弃了,为了能给用户更好的感官体验。像淘宝虽然目前有许多地方都用了iconfont但也只是局部使用,并非全站使用。

SVG技术

什么是SVG? SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。简单的说他就是一个可伸缩矢量图形 (Scalable Vector Graphics),在浏览器中采用绘图技术。

接下来我们来看看使用iconfont和使用SVG做出来的图标有什么差异:

Chrome下效果

FF下效果

IE9下效果

上面的demo分别在不同浏览器下的效果,第一行用的是iconfont实现,下面三行都是用的SVG实现的图标,只是调用SVG时的方法不同:第一行是用inline SVG,将SVG直接写在html中来使用,第二行是用的img标签去调用SVG,第三行用样式的background来调用SVG文件。从Chrome和FF下的显示效果,我们看到SVG画的ICON的质量确实是比iconfont要好,iconfont做的图标,我截图后放大后看到线的边缘发虚了,这是因为字体渲染的原因导致,在FF下也是发虚,只是不那么明显。在IE9+下的效果上我们看到IE对SVG的支持性着实差的令人无法直视,IE10,IE11效果和IE9几乎一样(真的是坑爹)。

如何绘制高质量ICON

在上面的demo中眼尖的同学应该可以看出在FF下,inline SVG图标有一个出问题了,然而Chrome却是正常的:

但左边那个图标却是正常的,相当不科学,如果是渲染问题理应左边的也发虚才对,但是却只有右边的出问题了,定位了很久问题出在哪里,最后发现是画AI文件时出问题了,AI本身不像PS那样,有网格辅助视觉画图,所以iconfont.cn出了一个AI模板,其实这套模板就是给AI画了一套辅助线,帮助设计师按照栅格画ICON,我前面的案例就是用的他们提供的模板画的图标,第一个没问题,但是第二个出问题了。他们这套AI模板实际导出后的画布大小是1002px1002px,然后分成1616个格子,也就是每个格子实际分得62.625px*62.625px,其实在很多时候貌似不会出问题的,但是我的demo中却出问题了,于是猜测:

是否是绘制图标出问题了,没有按照某种规范画法? 是否是因为他的网格不能被整除导致的?

1、由于绘制这个锁型的图标时我们留下了一个单数列,会不会因为这样导致了他出现锯齿,如果是,那问题就来了,如果一定要左右对称或者每次画图都要铺满所有格子,这种做法不太现实,因为很多图标是不一定都全部能铺满16*16的格子。

2、发现iconfont这套模板的网格有些问题,画布网格竟然有1px像素是留空的,也是说16格子其实是1001/16=62.5625px,虽说画布是1002px,不知道这是否是人工失误。

决心和视觉自己做一套AI模板,AI模板也是1616的网格,但是每个网格将他们的实际导出像素设置成1px,也就是整个画布是16px16px,这样的就不怕不会被整除了。然后用新AI模板重新做了三个图标,进行测试,左右上下对称的做了一个,不能左右对称的做了一个,左右上下不能对称的也做了一份。,然后导出效果查看:

按照这套模板做了图标后,FF下面三个图标都是完美的,没有出现虚边,并且Chrome也同样是完好的,这是我们希望看的的。也证实了上面的两个问题猜测是正确的。所以这套AI模板是完全可以满足不同场景图标绘制。

小结:

本文介绍了字体渲染机制,并分析iconfont出现锯齿的底层原因,再到如何绘制高质量SVG ICON的步骤和输出了一套严谨的AI绘制图标模板。

网友热搜:

  • 相关推荐
  • 大家在看
  • 苹果宣布其设备将全面转向“Apple Silicon”计算体系

    在 "历史性的一天",苹果公司CEO蒂姆-库克宣布其计算平台将全面转向自建体系“Apple Silicon”。库克现场讨论了Mac发展史上的三大转变,回顾了Power PC和英特尔。并表示,Mac在定制芯片上的历程已经超过 10 年其从iPhone开始的芯片架构提供了最佳的每瓦特性能,新系统的设计力求带来功率和性能的最佳平衡点。

  • 华为HMS Core自有COVID-19联系人追踪API曝光

    ​谷歌和苹果已经发布了 COVID-19 联系人追踪 API,但依然有数百万不使用 Google Play Services 的用户无法参与该计划,其中就包括国内手机厂商华为。援引外媒 XDA-Developers 报道,华为在对 HMS Core 的更新中引入了自家的联系人追踪 API。

  • Filecoin投资,哪种方式最靠谱?

    2019 年我们预测 2020 年的机会时,列举了很多关键词,包含有矿币减半、Eth2. 0 上线、波卡主网上线、Filecoin挖矿、Defi、产业联盟链等等,但实际结果表明,很多都在市场考验中受挫。 但Filecoin却越来越受欢迎,市场给与了很高的期待值,随着主网上线临近,有关Filecoin的话题热度持续攀高,参与生态的节点每年以10x速度增长,目前已经达到400k+节点。 根据以往的投资经验,如果项目预期与项目实际应用价值不匹配,它注定成为资

  • macOS Big Sur新功能有哪些 macOS新系统功能汇总

    苹果2020WWDC开发者发布会一直以来都是新系统发布的重要时间,今年也不例外,在6月23日凌晨的发布会上苹果就公布了macOS Big Sur新系统,这次发布的系统更新增加了哪些新功能呢,我们来一起了解下。

  • 美看Mcomb电动牙刷,“刷出来的真香”!

    科技改变生活,生活逐渐智能化、电动化。电动牙刷,早已不是什么新鲜事物,几年前,它还是高科技的代表,价格一直高高在上。而如今,网上也出现了不少物美价廉的国产品牌,不仅颜值高、价格可、口碑也很在线。比如,今天要介绍的这个网红品牌——美看Mcomb,这款不到300元的电动牙刷,到底香不香呢?1、外在有颜:粉色机身尽显时尚美看M2是一款颜值很高的声波电动牙刷,有专情灰和恋爱粉两种配色,这组CP真的是高级感十足。机身上?

  • HashiCorp推出用于托管服务的云平台

    [TechWeb]HashiCorp昨日在其在线HashiConf Digital活动上推出了HashiCorp云平台(HCP),通过该平台,它打算将其所有软件作为完全托管的服务提供。同时,HashiCorp宣布了对HashiCorp Terraform的更新的公开Beta版,HashiCorp Terraform是一个用于配置IT基础结构的开源工具的精选实例,该工具可添加其他工作流程功能。最后,对Nomad(容器化应用程序环境的集群管理器和调度程序)的更新,增加了对多个集群的支持以及由Cloud Native

  • Decoverf皇家帝孚:涂鸦艺术,我想玩的更潮流!

    当家居失去了光鲜亮丽与涂鸦艺术相遇,多点想象力生活变重新恢复了生命力涂鸦作为一种具有大众性、交叉型的流行艺术,其感染力来自于字体的强烈变化和色彩的对比,以个性张扬的态度,颠覆传统的艺术观念及形式,不受诸多条条框框的限制,注重表达内心纯粹的需求。它的青春活力、自由奔放的笔触,不仅仅是一种炫酷的艺术,其本质更是在表达一种释放真我的精神。涂鸦艺术注重作品的视觉传达效果,在设计领域中,涂鸦中的图形流动感和

  • COMPUTEX 2020线下展览取消

    DoNews 6月12日消息(记者 刘文轩)台北国际电脑展COMPUTEX & InnoVEX 2020特展原本打算缩减规模并延期到今年9月举行。不过遗憾的是,主办方今天正式宣布完全取消今年的展览活动,并预告明年6月1日到6月5日再见。虽然通过线上举行的分享活动在过去一星期顺利举办,然而全球依然笼罩在新馆肺炎疫情的阴影下,各国采取相应的防疫措施和出入境限制,这些措施也导致一些参展商难以顺利抵达台湾参展,这也导致原本打算9月举办的特展不得

  • Mozilla Firefox 78 将取消对多个老旧macOS版本的支持

    Mozilla Firefox77 正式版现在已经提供给所有受支持的操作系统,随后我们需要关注的是Firefox 78,它已经处于Beta测试版阶段,Windows、Linux和macOS上的用户已经可以提前试用。这个版本最大的变化就是对支持的操作系统版本正在改变,而且变化还不小。

  • FFALCON雷鸟"新极客智屏",新极客,新选择

    随着5G网络的全面推广,意味着更高的数据传输速率、更低的网络延迟,更大的网络连接规模与更可靠的网络质量,为万物互联时代的开启提供了钥匙,伴随AIoT的兴起,电视这一传统行业智慧赋能的构建也拉开序幕,一个更广阔的市场正在出现。 年轻人作为5G时代的原住民,接受资讯和内容越来越多样化,不管是手机平板还是电脑,他们的生活中最不缺的就是各种"屏",随之而来的,是对产品的优秀体验和更懂自己的要求,那么,电视作为传统行

  • Decoverf皇家帝孚Workshop学术研讨会

    Decoverf皇家帝孚一年一度的Workshop学术研讨会正式开启。现场群英荟萃,行业内专业学者纷纷前来相互探讨学习。Workshop是由Decoverf皇家帝孚组织开办的专业学术研讨会,每年都会邀请一些在欧洲行业内知名的学者、设计师、从业人士等相关人员到场,并会对外开放少量参观名额,邀请感兴趣的消费者免费到研讨会体验、了解皇家帝孚的产品以及文化。Decoverf皇家帝孚开办学术研讨会的宗旨,是为了在行业内搭建一个互相学习、加强沟通、

  • 币安赵长鹏针对币安收购CoinMarketCap发表独特见解

    近期,全球领先区块链生态系统币安(Binance)宣布收购全球被引用最多的加密货币行情数据网站——CoinMarketCap(CMC)。此后,币安将携手CoinMarketCap追寻共同愿景,让加密资产惠及全球每一个人。以下为币安赵长鹏就此次收购发表的具体见解。赵长鹏如何看待币安收购CoinMarketCap?* CoinMarketCap是一个极具价值的平台。因为它的用户数量最多,是业内访问量最高的网站。*赵长鹏的观点是,不是为了引流到Binance.com而收购CoinMa

  • 苹果全新macOS界面大变 更像iOS生态融合趋势明显

    北京时间6月23日凌晨,苹果首次在线上举办全球开发者大会WWDC20。在本次大会上,苹果会照例对iOS、iPadOS、macOS、watchOS、tvOS进行更新,从每年WWDC的软件蓝图中,开发者和用户都能大致看到苹果未来产品的走向与大致定位,从今年的新iPad Pro定位直指电脑不难发现,苹果也势必会将旗下诸多OS做进一步融合。移动端设备介绍完之后,带来了macOS Big Sur全新电脑系统。这次更新非常巨大,将Mac原来的直觉?

  • 华为正式发布HMS Core 5.0:新增六大服务

    今天,华为悄然推送了HMS Core 5.0服务框架,新增六大服务能力,同时强化了定位服务、推送服务。详细更新内容:- 新增音频、视频、图像、图形引擎、计算机图形、增强现实引擎等服务能力;

  • 设计师的福音,超高颜值的ConceptD 3设计本

    对于众多设计师而言,一款专业的笔记本必不可少,但在笔记本市场上符合设计师需求,轻薄、性能、色彩与颜值都满足设计师群体的笔记本少之又少,如何选择选择一款适合创作的笔记本成了众多设计师们的难题。2019年,宏碁针对设计师群体推出了ConceptD系列设计本,在保持轻薄的同时拥有高性能,并为设计师们带来精准的屏幕色彩,提高创作效率,成为众多设计师的不二之选。并在今年618京东购物节之际,宏碁开启限时优惠,618期间购买Co

  • 易点租COO张斌:后疫情时代,企业如何实现高效增长

    6 月 23 日, 36 氪举办了WISE2020 商业新生态线上暨企服金榜发布峰会。本次峰会正式发布了「WISE2020 企服金榜」,评选出多个企服赛道上的优质代表,旨在帮助企业服务领域的供需双方缩短企服决策周期、降低试错成本、提高应用效率。与此同时,本次峰会邀请了一批非常有代表性的企业金榜企业,和企业服务领域的资深投资人,为关注解读最新的企服动向,分享企业服务行业发展机会、优秀营销案例以及高效获客的建议。 后疫情时代,企

  • 华为正式发布HMS Core 5.0:新增六项服务

    DoNews6月23日消息(记者 吴丽)6月22日,华为HMS Core 5.0框架更新,新增音频、视频、图像、图形引擎、计算机图形、增强现实引擎等6项服务能力;定位服务,支持网络定位众包及围栏管理能力;推送服务,支持LBS、情景化推送;优化部分服务体验。HMS Core(华为移动核心服务)是华为移动服务(HMS,HUAWEI Mobile Services)提供的端、云开放能力的合集,助力开发者高效构建精品应用,是华为为其设备生态系统提供的一套应用程序和服

  • AWS推出Snowcone,实现轻量级坚固边缘计算

    [TechWeb]亚马逊网络服务(AWS)宣布推出AWS Snowcone,这是一款专为安全边缘计算和数据传输而设计的坚固设备。该设备作为AWS Snow系列的一部分提供,旨在从外部环境(例如工业IoT用例或医疗保健)收集数据,然后可由AWS在线或离线对其进行处理。顾名思义,Snowcone是该系列中最小的数据传输设备,重量仅为2.1kg,其演变是Snowball和Snowmobile。后者是在re:Invent 2016上引入的,是由卡车拉动的运输容器,旨在一次传输多达100 P

  • 微软准备Windows Core OS:全力优化Chromium使用体验

    微软正在全力准备新的Windows系统Core OS,作为Windows 10的模块化版本,该软件旨在容纳多种不同外形尺寸的设备。除了类似Chromebook的廉价上网本,Core OS还可在双屏/折叠设备、以及HoloLens 2

  • 降噪与音质全都不妥协!OPPO Enco W51评测

    伴随着各大手机厂商逐渐取消3.5mm耳机孔,TWS真无线蓝牙耳机已经成为普通消费者必备的产品。OPPO在今年4月发布了售价仅299元的OPPO Enco W31真无线耳机,内置双蓝牙5.0芯片,94ms的延时体验,真爱粉的配色,瞬间点燃消费者的热情,成为观看视频和游戏开黑的极品选择。然而,不满足于此的OPPO继续发力,在近日OPPO Reno4发布会上,再度推出旗下首款主动降噪真无线耳机产品OPPO Enco W51,主打“音乐通话都清晰”的OPPO降

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议