与传统的图片相比，用svg实现的图标要更好控制。

比如。若要改变图标的颜色，如果用图片的话，就需要UI设计人员调整图片，而如果用svg的话，就不用那么麻烦，开发人员改样式就行了。

附一个svg实现的QQ图标：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

    <path d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z"></path

</svg>

svg图标（svg实现的QQ图标）的更多相关文章

  1. Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_143 每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人 ...

  2. 微信、微博、qq图标服务实现

    实现原理:变化前的图标和变化后的图标在一张图片上,用这张图片作为背景,通过定义背景的位置来实现显示哪个图标,其中还带着滑动的动画效果. <!DOCTYPE html> <html l ...

  3. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  4. 阿里UX矢量图标库–最强大的矢量图标库（Icon font制作力荐工具）

    继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...

  5. UI图标不用愁:矢量字体图标Font-Awesome

    Font-Awesome,这个项目主要是css3的一个应用,准确的说是一段css,这里的把很多图标的东西做到了font文件里面,然后通过引用外部font文件的方式,来展现图标. Font Awesom ...

  6. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  8. MFC修改任务栏图标及程序运行exe图标

    修改左上角的图标和任务栏里图标 在对话框构造函数中 1 CTestDlg::CTestDlg(CWnd* pParent )2 : CDialog(CTestDlg::IDD, pParent)3 { ...

  9. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

随机推荐

  1. UC 优视发布“UC+”开放平台

    7月5日消息,以浏览器起家的UC优视今天在2013移动互联网创新大会上正式发布“UC+”开放平台战略. UC优视公司总裁何小鹏同时表示:通过“UC+”开放平台,UC将UC浏览器全球四亿用户与移动端巨大 ...

  2. AutoMapper6扩展

    简介 很多时候我们使用AutoMapper的时候,都需要进行一个配置才可以使用Mapper.Map<Source,Target>(entity);.如果不进行配置则会报错. 如果实体过多, ...

  3. 尝试Office 2003 VSTO的开发、部署

    转载:http://www.cnblogs.com/oneivan/p/4243574.html 背景:一年前,某项目需要使用到Excel进行数据录入,考虑到很多用户还是使用XP+Office 200 ...

  4. August 27th 2017 Week 35th Sunday

    You can't be brave if you've only had wonderful things happen to you. 人生若只是有美好的境遇,那你也没办法学会勇敢. Wherea ...

  5. git修改远程仓库

    三种方式都可以. 1. 修改命令 git remte origin set-url URL 2.先删后加 git remote rm origin git remote add origin git@ ...

  6. 可以在命令行直接使用密码来进行远程连接和远程拉取文件的命令：sshpass

      应用范围:可以在命令行直接使用密码来进行远程连接和远程拉取文件. 使用前提:对于未连接过的主机.而又不输入yes进行确认,需要进行sshd服务的优化: # vim /etc/ssh/ssh_con ...

  7. java多线程--实现Runnable接口方式

    因为java类只能继承一个类可以实现多个接口的特性,所以一般情况下不推荐使用继承Thread类实现多线程,下面是实现Runnable接口方式的简单多线程代码 package text; /** * 多 ...

  8. CF712D Memory and Scores

    题目分析 实际上两个人轮流取十分鸡肋,可以看作一个人取2t次. 考虑生成函数. 为了方便,我们对取的数向右偏移k位. 取2t次的生成函数为: \[ F(x)=(\sum_{i=0}^{2k}x_i)^ ...

  9. 问题：alias设置与删除

    新建alias条目 临时 alias  monitor='gnome-system-monitor' 永久 可以在家目录下,新建    .bash_aliases 文件,然后在其中加上你想要的替换的比 ...

  10. 2018-2019-2 网络对抗技术 20165322 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165322 Exp2 后门原理与实践 目录 实验准备 后门概念 常用后门工具 实验内容与步骤 使用netcat获取主机操作Shell,cron启动 使用so ...