icon font VS svg font

mutongwu

浏览: 449816 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript
CSS
mobile

font icon 字体图标 svg cros

关于字体图标和SVG图标，CSS TRICK网站有较好的说明。

https://css-tricks.com/icon-fonts-vs-svg/
总的来讲：

1. 字体图标浏览器支持多一点。(IE6+)
2. SVG显示效果好一些，更多的CSS控制（例如：支持图标颜色渐变），制作相对简单些。(IE9+)

需要补充的是，SVG有以下缺点：
1. 对于IE浏览器，SVG文件需要 inline到HTML页面。
2. 对于外联的SVG文件，测试中发现，不支持跨域使用，即便 svg文件做了CROS头部设置。

针对以上2个问题，解决的方式，就是额外加载外联svg文件，并把它插入到HTML页面里面。

测试页面 test.html，假设地址为 http://shawn.b.com:5678/test.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content="telephone=no" name="format-detection" />  
<!-- script src="svg4everybody.js"></script -->
<title>SVG sprite</title>
<!-- link type="text/css" href="svg-symbols.css" rel="stylesheet"/ -->
<style>
	.icon{width:32px;height:32px;}
</style>
</head>
<body>
	<div id="layout-wrapper">
		<svg class="icon">
			<use xlink:href="http://shawn.a.com:1234/svgdefs.svg#icon-bin"></use> <!-- 跨域情况下，图标是不能正确显示的 -->
		</svg>
	</div>
	
	<input type="button" value="ajax加载" onclick="loadExternal()"/>
	<script>
	function loadExternal(){
		var xhr = new XMLHttpRequest();
		try{
			//跨域了。
			xhr.open('GET', "http://shawn.a.com:1234/svgdefs.svg");
		}catch(e){
			xhr = new XDomainRequest(); //IE9
			xhr.open('GET', "http://shawn.a.com:1234/svgdefs.svg");
		}
		
		
		xhr.onload = function(){
			var div = document.createElement("div");
			div.innerHTML = xhr.responseText;
			document.body.appendChild(div);
			
			var uses = document.getElementsByTagName("use");
			
			for(var i=0,len = uses.length; i < len; i++){
				var url = uses[i].getAttribute('xlink:href').split('#');
				var url_root = url[0];
				var url_hash = url[1];
				uses[i].setAttribute('xlink:href','#' + url_hash);
			}
		};

		xhr.send();
	}
	
	</script>
</body>
</html>

https://css-tricks.com/svg-use-external-source/
https://css-tricks.com/svg-sprites-use-better-icon-fonts/

svg.zip (13.1 KB)
下载次数: 0

分享到：

四个方向鼠标滑入的css动画 | gulp下静态资源的合并、压缩、MD5后缀

2015-05-14 15:21
浏览 1216
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论