不规则icon 举例：图中音符高28px宽27px，圆角不定，主线条2px，辅助线条1px 以上只是拿一套图标中的几个做个范例，最终目的要做到利用这些核心形状做为向导，使整个相关产品的图标保持一致的视觉比例...关键点 ● 主线条2px，辅助线条1px，不要修改它 ● 一致的圆角半径（1px）是统一全系列系统图标的关键，不要修改它 ● 图标内部的角应为直角，不要修改它 ● 在部分只由线段组成的图形中（比如...为什么要制作字体图标 ● 字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。...然后导出为svg文件。 最后打开iconfont页面，上传svg文件并选择去除颜色并提交。...这样我们就会在我的图标内看到刚刚上传的图标，字体图标就上传成功了 如何把字体图标给到开发 通常开发要用字体图标，会找到设计师。
上图的表格有两个特点，首先，每个季度的数据背景色标注了增长下降；其次，黄色线条框选了最新一个季度的数据。...我们可以借助条件格式图标实现大致模拟： 上图两条黄色虚线把最大日期单独划分出来。这里线条使用SVG绘制，借助我分享的Power BI SVG在线工具，读者并不需要了解SVG代码知识也可以实现。...将上方的SVG度量值施加到矩阵指标的条件格式图标，得到： 这并不是需要的结果，我们只想对最新的日期添加竖线。对以上SVG添加条件： 这里条件的含义是：当日期为最大值和第二大值时显示竖线，否则不显示。...为什么要在第二大值也显示呢？ 因为条件格式图标只能单侧显示，借助最大值左侧（也就是第二大）的空间，可以形成双线包裹的效果。...再次打开我分享的Power BI SVG在线工具，选择图标查询系统： 中文或英文搜索箭头，有上百种样式： 在线调整颜色、线条等样式后，复制右侧表格【Power BI用户复制】列的SVG代码。
Power BI的条件格式有五种模式，背景色、字体颜色、数据条、图标和Web URL。在这五种模式中，只有图标可以有无限的扩展性，其它四种功能比较单一。条件格式图标可以怎么玩？...SVG图标可以参考《Power BI 图标查询系统 3.0，上万图标自由选择》，我分享了一个内置10000+样式的图标库，可以应用于条件格式，图标的线条粗细和颜色都可以调整。...另外PPT也有丰富的SVG图标，参考《Power BI 调用PPT图标资源》进行调用。 地图是一种特殊形态的SVG图片，也可以放入条件格式。...第三重：字段图标融合 前面两重可以看到条件格式图标与字段值（比如产品图片和产品ID）是独立存在的，二者也可以融合为一体，产生一些实用的效果。...除了排名，其它简单的指标图表也可放在条件格式，比如百分比： 第五重：串联图标 以上四种模式，上面一行图标和下面一行没有关联，通过一些手段，可以突破表格行限制，将它们串联起来，形成上下联通的图表。
这种类型的动画可能非常适合页面加载器。 这套演示使用three.js和easing探索三维粒子动画。 这些演示中的所有粒子和形状都是由三个基本的几何体/材质/网格组成，如球体，线条和盒子。...我希望这能激发你制作你自己的3D粒子动画！ three.js 和 3D 环境的优势 这些动画大部分可以与SVG或2D Canvas等大致相当。...我的目标是显示一组基本的粒子运动能达到什么效果，而最小的是three.js的弯曲。 调试模式：网格，相机和时间刻度 要进入调试模式，请单击右上角的调试图标。...这对于处理动画的时间和位置非常有用。 1: 旋转和缩放环 这个演示展示了一系列缩放和旋转的小环。 粒子也在z轴上来回移动。 2: 单纯的噪音线 这个演示显示了一系列形成两种不同颜色线条的粒子。...粒子位置由单纯的噪声设置，在两个边缘附近逐渐变小。 随着时间的推移，线条在z轴上旋转并前后移动。 3: 圆分离 这个演示将一些简单的物理应用于每个粒子。
在网易数读看到一个咖啡相关的报道，显示百分比使用咖啡杯的形状。Power BI或者Excel使用内置功能也可以类似的改造柱形图。...---- 在字节的图标库（http://iconpark.oceanengine.com/official）可以搜索，下载咖啡杯，下图箭头所指方向的杯子看着和网易的差不多。...注意下载SVG格式，而不是PNG，因为后期要对线条调整，PNG无法直接修改。 2....修改咖啡杯 ---- 将咖啡杯图片导入PPT，如下图所示： 修改一下线条粗细，并将SVG图片转换为形状： 拖动下方的梯形，将杯盖杯身分离： 将杯身盖一个矩形，为什么要盖个矩形，参考异形饼图的文章...选中矩形和杯身，拆分： 三个部分分别涂上不同的颜色，仅杯身为无色，为后期在Power BI显示叠图的柱形图。 将修改后的咖啡杯导出为便携式网络图形。 3.
为什么 iOS 是 4 的倍数？因为 2 倍图适配 3 倍图时要乘以 1.5, 适配 1 倍图时要除以 2, 并且保证 1 倍/ 2 倍/ 3 倍图尺寸值都是偶数,能满足要求的最小数是 4； ?...为什么安卓 Android 是 8 的倍数？安卓开发中最小的单位是1dp（1dp=2px）同时也要满足 2 倍图适配 1 倍图和 3 倍图时都是整数, 所以安卓要是 8 的倍数。...图标的线条一定要紧贴像素网格，不然边缘会虚化模糊。 ? 形状描边对齐方式通常用内部对齐方式（不会改变图形尺寸），居中对齐会出现模糊，外部对齐会改变图标大小。...网址：www.iconfinder.com 03 最大的免费图标库-Flaticon 最大的免费图标库，提供 PNG、SVG、EPS、PSD 和 BASE 64 格式供选择下载。...、中文两种操作模式，只需要输入关键词之后点击左侧的 Tags 即可快速找到自己需要的图标，网站也提供最近更新、热门图标以及 LOGO 下载等项目。
大家好，我是东哥。...3、可调节的箭头和线条 如果想创建一个自由方向的线条和箭头，那么只需要一步步单击你要的落点位置即可，最后再微调角度。 ?...7、实时协作 Excalidraw 也提供了协同工作的功能，也就是一个人做图的同时，另一个人可以实时看到。启用实时协作，单击左上角的 2 人图标即可。 ?...8、形状库 如果想创建更复杂的形状，Excalidraw 的库提供了多种形状供选择。 ? 如果要从库中选择新形状，单击顶部工具栏上的方形图标，然后选择要添加的图标。...9、保存形状 可以将形状保存到个人库中以备将来使用，还可以到出PNG和SVG格式的图片，另外也支持生成一个只有查看权限的web链接。 导出PNG和SVG ? 支持黑夜模式 ?
在上一篇文章中，我们初步实现了一些利用基本图形就能完成的线条动画： 【Web动画】SVG 线条动画入门 当然，事物都是朝着熵增焓减的方向发展的，复杂线条也肯定比有序线条要多。...好，这个时候，路径算是建立完成了，可以把图层的透明度设置为 0 ，就能清晰的看到路径长啥样： ? 港真，长得挺帅的。 ?...身为前端居然连 AI 也没装(￣△￣；) 额，其实我也是因为 SVG 才上手的，赶紧下一个吧，我的版本是 Adobe illustrator CC 2014。...好，其实 AI 也没做什么，路径是使用 PS 生成的，为什么不直接用 PS 生成 *.svg 文件呢？因为我用的版本 PS 还没支持直接存储为 SVG 格式。...我在我的 Github 上，使用 SVG 实现了一些图形 -- SVG奇思妙想，Demo可以戳这里。
近日豆瓣发布了2022书影音报告，以下是我的豆瓣页面，不规则的圆圈和波浪线使得报告突破了方方正正、规规矩矩的死板套路，显得非常人性化。...首先，搜索引擎搜索SVG在线编辑器，随便进入一个，使用铅笔工具按需画个不规则的圈或者下划线，画圈尽量沿着画布的四周，为给数据留下中部的空间；画下划线尽量靠下，为避免下划线与数据重合。...画好后，点击文件-保存图片，图片被保存为SVG类型。 记事本打开图片，可以看到下面的代码，中间的path就是你画的不规则线条，查找替换把文件中的双引号都替换为单引号。...打开Power BI，新建如下度量值： 度量值分为三个部分，起始为SVG标准语法，注意里面的width、height值与你在线画图的画布的值保持一致，此处都是100个像素；中间的path是复制的SVG...除了在表格直接显示，也可以用到条件格式图标，比如前期讲过条件格式排名，外框比较方方正正。 现在可以涂鸦式： ----
SVG滤镜绝对称得上是他最强大的功能之一，在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人给他的定义就是，把PS装到了网页上。...举个例子，我们用腾讯云的CVM图标来做一个最简单，最常见的滤镜效果——投影。 首先我把图标画出来， demo1 然后放到一个defs里，没有被引用之前你肯定是什么都看不到的。...（另外当我们在浏览器里查看的时候，可以明显的看到滤镜对象的边界明显不同于原始对象的边界，他的默认值为 X等于-10%，Y等于-10%，宽 120%，高120%。...这样其实是为滤镜提供了额外的空间，产生的输出大于输入区域。）...SVG图像进行瘦身和加厚，效果如下 demo8 不过效果里可以清晰的看出，对线条进行瘦身效果会造成严重破坏。
扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。 提到SVG，我想大多数人的第一印象是矢量缩放。...是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。同时，和传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至复杂的过滤器来处理文字。 ?...这样做的好处是，我们只需要发送一次 HTTP请求即可下载我们所需要的所有图标，减少浏览器请求并发数的压力，提高网页加载速度，增强用户体验。...在使用之前，我们先创建一个很简单的SVG，包含三个独立图标：一个绿色的圆形、一个红色的方形和一个蓝色的三角形。 IE9和Chrome中看到的效果如下
本文作者：ivweb villainthr 接SVG 动画精髓（上） 线条动画 SVG 中的线条动画常常用作过渡屏（splash screen）中。...例如： 或者，一些比较炫酷的 LOGO 中，比如 AllowTeam 的： 看到这些炫酷的效果，大家有没有动心想学一学，看看自己到底能否做的这么好呢？ OK，我们现在来正式介绍一下线条动画。...在 SVG 中，最长用到的线条标签就是 Path。这里我前面一篇文章已经做了介绍，我这里就不赘述了。 而在具体变化当中用到的是关于stroke的相关属性：（下面的属性都可以直接用在 CSS 当中！）...百分数是相对于 SVG 的 viewport。通常结合 dasharray 可以实现线条的运动。 stroke-linecap: 线条的端点样式。...此时，这 3 个 text 的起始点重合。我现在既要他们在运行时不完全重合，又要他们的线条能进行滚动。
这是布兰的第 14 篇原创 要是问你，你知道当下都有哪些图像格式嘛？我猜你肯定说不全，因为现在图像格式真的太多了，但是应该能说出这几个常用的格式：jpg、gif、png和svg。...然后我再问你，知不知道这几个格式有什么区别？各自的适用场景又是什么呢？logo应该是选择 svg 还是 png ？而截图是选 jpg 还是 png 好？在不生成过大文件的前提下，文件的最优质量是多少？...比如下面这个这个图对比，右边的是矢量图，左边的是其他格式图片： ? svg SVG用途 SVG 在线条艺术，LOGO，图标，插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。...在一些情况下，SVG 和 PNG 都能很好地达到同一个目的。对于线条艺术，SVG 通常能生成较小的文件。但是这不是必然的，实际情况会根据矢量图像究竟有多少个锚点，它甚至可能会生成比PNG更大的文件。...SVG 真正出色的地方是数据可视化。由于可以使用JavaScript 来操纵和创建矢量动画，诸如 D3 之类的库提供了无限的可能性。LOGO, 图标和数据可视化是 SVG 使用的优秀范例。 ?
SVG滤镜绝对称得上是他最强大的功能之一，在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人给他的定义就是，把PS装到了网页上。...举个例子，我们用腾讯云的CVM图标来做一个最简单，最常见的滤镜效果——投影。 首先我把图标画出来， demo1 然后放到一个defs里，没有被引用之前你肯定是什么都看不到的。...（另外当我们在浏览器里查看的时候，可以明显的看到滤镜对象的边界明显不同于原始对象的边界，他的默认值为 X等于-10%，Y等于-10%，宽 120%，高120%。...这样其实是为滤镜提供了额外的空间，产生的输出大于输入区域。）...SVG图像进行瘦身和加厚，效果如下 demo8 a 不过效果里可以清晰的看出，对线条进行瘦身效果会造成严重破坏。
图标、图表工具 30、Orion Icon Library https://orioniconlibrary.com/ image.png 多达6000专业免费的SVG矢量图标，还支持深度的定制，比如更换配色...，更改线条粗细，变换图标风格(细线条、粗线条、扁平)，一键生成相关代码。...一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板，因此您可以准确地看到应用程序生成的代码。SVGator导出干净，格式良好的代码。...那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看： 小，就4kb,压缩后比react-router...小节 终于把50款工具整理完了，在新的一年里，希望这些工具对大家有所帮助和启发，再次感谢大家对我文章的关注，让我新的一年收获满满，感谢掘金小编的推荐，祝各位在新的一年里前端技术棒棒的，薪资翻翻，一起在国内推动大前端的未来
四、图标、图表工具 30 Orion Icon Library https://orioniconlibrary.com/ 多达6000专业免费的SVG矢量图标，还支持深度的定制，比如更换配色，更改线条粗细...，变换图标风格(细线条、粗线条、扁平)，一键生成相关代码（高级功可能需要付费）。...一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板，因此您可以准确地看到应用程序生成的代码。SVGator导出干净，格式良好的代码。...那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看： 小，就4kb,压缩后比react-router...结束语 终于把50款工具整理完了，在新的一年里，希望这些工具对大家有所帮助和启发，再次感谢大家对我文章的关注，让我新的一年收获满满，祝各位在新的一年里前端技术棒棒的，薪资翻翻，一起在国内推动大前端的未来
SVG滤镜绝对称得上是他最强大的功能之一，在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人给他的定义就是，把PS装到了网页上。...举个例子，我们用腾讯云的CVM图标来做一个最简单，最常见的滤镜效果——投影。 首先我把图标画出来， demo1 然后放到一个defs里，没有被引用之前你肯定是什么都看不到的。...（另外当我们在浏览器里查看的时候，可以明显的看到滤镜对象的边界明显不同于原始对象的边界，他的默认值为 X等于-10%，Y等于-10%，宽 120%，高120%。...这样其实是为滤镜提供了额外的空间，产生的输出大于输入区域。） ?...现在，你就可以在任何图形上调用这个投影的滤镜了. 二 创建另一个滤镜 上面我通过一个黑色投影的例子简单的说了一下SVG滤镜的原理，但是那个黑色的投影实在太单调了啊。能不能再给投影来点颜色？
例如，我经常希望向页面添加额外的 HTML，或者嵌入 SVG 文件的内容，以便我们可以为其设置动画和样式。...然后我想，假设浏览器允许我在父文档中检索 iframe 的内容，也许一个旧的 iframe 可能是一个很不错的模式。事实证明，它肯定会的！...).children[0]);this.remove()"> 尽管此标记以 iframe 开头，但如果你使用开发人员工具检查上面的图形，将会看到 SVG 的图标标记，就内嵌在 HTML...它适用于 HTML 或 SVG。我不确定你想要包含什么东西，但这至少满足了我自己的需求。 这是异步的！内容加载不会阻止页面渲染，这是 iframe 的性质。 它是缓存友好的。...例如对页面上所有图标使用可能会过重，但是对于需要进行动画和样式化的特定图标来说，它可能会很好用。不过现在我只能做更多的测试。
让webpack在打包的时候输出.gz后缀的压缩文件 ?...使用svg图标 相对于用一张图片来表示图标，svg拥有更好的图片质量，体积更小，并且不需要开启额外的http请求，svg是一个未来的趋势，阿里的图标库iconfont支持导出svg格式的图标，但是在项目中需要封装一个支持...vuex的模块自动导入 svg图标的自动导入 全局组件的自动导入 vuex： ?...这样在创建一个新的模块时,不需要在index.js中用import引入,在modules中再声明一遍了 全局组件和svg图标： ?...避免了每创建一个全局组件都需要引入,在调用一次Vue.component的过程,而当加载到Svg组件会自动扫描icons文件夹,将所有svg图标导入进来 有兴趣的朋友可以看看我另一篇介绍这个api的博客
自定义图标 element-plus内置的图标有时候并不能完全满足我们的需求，我们还需要一些额外的自定义图标。...这个项目因为考虑过要开源，所以图标的可扩展性一定要搞好，于是就想到了使用svg图标，但是一个个引入又比较麻烦，就想看看有没有什么更好的解决方法，于是乎想起了花裤衩大佬的手摸手系列，在手摸手，带你优雅的使用...首先我们创建文件夹assets/icons/svg，用来存放我们下载的svg 之后再创建一个assets/icons/.ts，用来返回所有图标的名字，我们在菜单管理里选择图标时需要用到。...，因为我从iconfont下载的svg图标就算不选择颜色，也会自带默认颜色，而有默认颜色的svg图标无法设置颜色。...: 30px; color: #f66; } 本章就到这里，下一章我们来学习scss的使用，以及全局的暗黑模式和自定义主题
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
