与传统的图片相比，用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. IEC_62304_CheckList

    IEC 62304 Reference Software Lifecycle Process Applicable for Class A Class B Class C PRIMARY LIFECY ...

  2. gitlab一次代码回滚引起的bug...

    问题描述:线上问题有一个bug,挺严重的.在线下排查后发现是一个之前的同事添加的代码影响的,为了不影响之前的业务,代码回滚了. 但是 过了几天,测人人员测试之后说这个问题又复现了,然后再次看,发现还是 ...

  3. Java 设计模式(三)-单例模式(Singleton Pattern)

    1     概念定义 1.1   定义 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 1.2   类型 创建类模式 1.3   难点 1)多个虚拟机 当系统中的单例类被拷贝运行在多 ...

  4. nginx部署及简单优化

    研究nginx优化时反复安装清理nginx,为方便做了一个简单部署脚本,用的最新稳定版1.14.0,默认路径,加入systemd系统进程管理中,可以通过systemd管理nginx的启动.终止.重载. ...

  5. LeetCode33 搜索旋转排序数组

    搜索旋转排序数组 题目描述: 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标 ...

  6. NexusFile(文件管理器)

    NexusFile是一款来自于韩国的文件管理器,类似于TotalCommander,拥有两个并排的文件夹窗口. NexusFile软件的特性如下: 基本功能:复制/移动, 复制/剪切/粘贴, 删除/擦 ...

  7. winform中webBrowser模拟网页操作中遇到的问题

    我们通过网页上传一些特殊数据的时候,由于必填项众多,数量量大的时候,会发现工作相当繁琐,前段时间做了一个winform内嵌webBrowser模拟网页上传文档的小工具,发现了许多问题,总结一下: 先说 ...

  8. HTTP协议图--HTTP 报文实体

    1. HTTP 报文实体概述   HTTP 报文结构 大家请仔细看看上面示例中,各个组成部分对应的内容. 接着,我们来看看报文和实体的概念.如果把 HTTP 报文想象成因特网货运系统中的箱子,那么 H ...

  9. SAP ABAP里数据库表的Storage Parameters从哪里来的

    如何查看ABAP数据库表的storage parameter? 事务码SE11,utilities->Database Object->Database Utility: 点这个Stora ...

  10. 查看SQL运行时间

    set @d=now(); select * from table; select timestampdiff(second,@d,now());