html5 – SVG图标与PNG图标在现代的网站

我想知道为什么这么少的现代网站仍然只使用PNG的图标(但这个假设只是基于我的观察)。到目前为止我知道,使用PNGs SVGs的主要原因是IE8和SVG使用更多的cpu功率(但我不相信这是任何问题,简单的1K图标)。我可以看到(和我们目前使用)在使用SVGs的许多优势,无论是当它用作精灵,图像或作为内联SVG。

(问题Looking for a research: PNG Sprite vs SVG sprite vs Icon fonts侧重于性能,没有相关的答案,Icon Font vs. SVG caching and network concern侧重于网络流量,但它很容易解决,例如模板。)

如果新网站只支持现代浏览器,是否有任何理由不使用SVG(或者 – 是否有任何理由使用PNG的图标)?如果我们不关心IE8和SVG的使用通过模板和/或缓存备份,有没有任何catch只依赖于SVG?

解决方法

原因SVG可能是一个不错的选择:

>它无缝支持任何大小的浏览器,特别是css的背景大小
>你可以缩放它们上/下,如到一个hover effect
>您可以嵌入SVG并使用JavaScript和DOM对其进行实时修改
>您可以使用CSS(更改颜色,轮廓等)为SVG和SVG的部分设置样式
>您可以在客户端或服务器上动态生成SVG。由于它们基于文本的特性,您不需要低级库或强大的服务器来创建它们。

原因PNG可能是一个不错的选择:

>浏览器支持
>用于创建PNG sprites的现有工具
>大多数人在他们的电脑上有一个PNG兼容的编辑器
>你的图形是照片或其他难以矢量化图像

其他问题:

>一些SVG编辑器可能会在您的SVG中存储元数据,增加文件大小,并可能无意中暴露数据

>例如当您在Inkscape中导出PNG时,保存时在SVG中保存/保存了此目录的绝对路径> SVG压缩器可以删除这个,但我没有测试它(随时可以编辑,如果你有)

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码