关于字体图标和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/
分享到:
相关推荐
Glyphs2Font是一个小型命令行实用程序,用于将一个或多个基于SVG的图标转换为Web字体的字形。 生成的 Web 字体以 TTF、EOF、WOFF 和 SVG 格式提供,并生成相应的用于直接嵌入的 CSS 文件。 安装 $ npm install -g ...
svgicons2svgfont 阅读一组SVG图标并输出SVG字体 svgicons2svgfont是将多个图标合并为SVG字体的简单工具。 “矩形”,“直线”,“圆形”,“省略号”,“折线”和“多边形”形状将转换为路径。 多个路径将被合并。 ...
react-font-svg 您可以使用此工具将字体转换为react / react-native Icon组件。 支持字体格式: ttf woff / woff2 OTF ot 用法 npm install - g react - font - svg react - font - svg . / src / icons / ...
前端开源库-gulp-svgicons2svgfontgulp-svgicons2svgfont,从几个svg图标创建一个svg字体
前端开源库-icon-font-loader图标字体加载器,一个Webpack加载器,用于将SVG转换为CSS中的字体图标。
svg-camera-icon 相机图标作为模块,导出SVG 数据。 这对于使用 , 和其他各种模块的快速测试很有用。 安装 npm install svg-camera-icon --save 例子 默认导出为SVG路径字符串。 可以将其输入和。 var svgMesh3d...
npm install svg-icon --save 自定义元素 文件: dist/ ├── svg-icon-element.js └── svg-icon-element.css 用法: <svg-icon url=...
RSUITE图标Svg RSUITE所有图标源文件。 开始 npm install 重建 您可以删除src/svg目录中无用的图标svg文件。然后运行此命令进行重建。 npm run build 变更日志 2018-08-29 更新的图标: more , reload , tag ,...
Flutter Icon字体生成器 将所有* .svg图标从dir转换为icon-font(.ttf),并生成与flutter兼容的dart类。 NodeJs包的抽象层icon-font-generator要求Node.JS v11 +安装: $ pub global activate icon_font_generator...
gulp-font-icon gulp-font-icon是一个gulp插件,可从SVG文件生成图标字体。用法首先,安装gulp-font-icon作为开发依赖项: npm install --save-dev gulp-font-icon然后,将其添加到您的gulpfile.js: var fontIcon =...
Django的CMS图标是一个插件 ,允许你插入一个图标(字体或SVG)到项目中。 此插件与兼容,并且在上也可用,以方便安装。 贡献 这是一个开源项目。 我们很高兴以问题和请求的形式收到您的反馈。 在提交您的请求请求...
flutter_icon_font_package_template 该软件包提供了一个模板,用于从SVG源代码为Flutter创建字体图标包。 入门 点击“使用此模板” 更改的软件包详细信息:名称,作者,描述,主页 用您自己的SVG字体替换 MyFont....
一个Vue.js图标选择器组件,可以轻松选择并使用FontAwesome 5 Icon。 目录 安装 使用npm安装 npm install --save @rightbraintechbd/vue-awesome-icon-picker 或通过cdn使用它 < script src =" ...
bin openjdk-11-jre graphviz建造mkdir .tmp -pcd .tmpgit clone git@github.com:tupadr3/plantuml-icon-font-sprites.git githubcd githubgit checkout mastercd ../..yarn build --github去做代码清理自述文件
Icon-Font生成器在Nuxt模块上可用。信息 :bell: 该软件包已从nuxt-iconfont-generator重命名为nuxt-fontagon 特征√在构建时自动将svg转换为字体文件√根据svg文件名,根据需要创建CSS和Stylus , SASS和LESS文件 :...
[WIP] svg2webfonts 在Desktop app(Electron)上将SVG图标文件转换为webfonts,并生成示例HTML / CSS文件。 注意: 格式:SVG / TTF / EOT / WOFF / WOFF2 此应用程序使用 iconfont在背景上转换webfonts。 对于...
SVG固定器 尝试通过将svg转换为填充/单一路径(并使其与字体兼容作为奖励)来修复它。...例SVG Icon ->我们将在此示例中使用 Code ->图标< svgxmlns= " http://www.w3.org/2000/svg "width= " 2