微信小程序里使用SVG矢量图标方法

这篇具有很好参考价值的文章主要介绍了微信小程序里使用SVG矢量图标方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序里使用SVG矢量图标有2种引入方法:

一、SVG图标转换为BASE64编码

可以在百度搜索’svg在线转BASE64’(可能会有问题,如下)

BASE64编码时需要把开头的 data:image/svg; 修改成 data:image/svg+xml;
background-image:url("SVG图标BASE64编码")

如下方式

.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+2T3kLSMg8LC1QJzR/Dv3t/jrmSE9K/tTuKTbVJF1LQ93QcQG6L6nPEkWqECzSEhhiahTSNGLN0KKH4yG1CDLmhCN8EMskTdhAEXqaofsy9LWqNOCmeEgtgJRZZOF4EA0DlnSoC642kfxdQ+o+S1IOeURyXlRtSxVlJN3Ykve1Eaqwyvs2WuhQYC8Sq7nVDhYb6QhzJlL9rxkltKKokZKLdEhHB8l8OdRUNG6qsQ9sclBHkZ6k7Ojc0jJaSfLqYCG+g3h1E99dDnm+P2oJetK2VLClE7LNtigHIBZI8mpOiGb0EebGhojVQl1xj5FXRSITP8YpRBpYFhiOKJlgJq9oKs3xhA+kB5UvppaOxhxJ0zGxMxDMkDSTZkiaIWkmRUn6fwEGAE2xLmu6HJtTAAAAAElFTkSuQmCC");
width:100rpx;
height:100rpx;
background-size: contain
}

同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放

二、使用运程地址引入SVG图标

把SVG图标上传到网站服务器上,在浏览器中输入SVG图标地址测试是否能正常打开,就是把上面的代码编程一个图片地址

当然。。都不咋地。我是都不喜欢。但是能用。

还是建议第二种,珍惜小程序的每一行代码。文章来源地址https://www.toymoban.com/news/detail-745618.html

到了这里,关于微信小程序里使用SVG矢量图标方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 初学前端-记使用阿里图库SVG图标不显示的解决方法

    初学前端-记使用阿里图库SVG图标不显示的解决方法

    使用VUE3+Element-Plus做来制作前端界面,做到左侧菜单栏时遇到了一个困难,添加的SVG图标始终不显示,位置存在,图标的信息也没有问题,但是就是一直显示不出来。  后经多方搜索, 经vue前端项目引入iconfont阿里图标的四种方式_飞歌Fly的博客-CSDN博客的提示在Main.js中导入了

    2024年01月25日
    浏览(7)
  • 微信小程序不支持svg图片

    如果想使用svg也要转换成base64或者网络图片 否则在开发者工具中是显示图片的 而在手机微信预览中就无法显示图片 让人疑惑 require()是nodejs的写法 用于导入模块、JSON 和本地文件 可以使用相对路径 该路径可以使用路径别名命名的目录或当前工作目录进行解析。 在vue中使用

    2024年02月09日
    浏览(6)
  • Android使用svg矢量图

    Android使用svg矢量图

    可缩放矢量图形,SVG不会像位图一样因为缩放而让图片质量下降。 优点:节约空间与内存,常用于简单小图标 首先我们需要弄一直svg图片。咱可以去iconfont网站里面去下载一个 比如说我找了一张飞机的svg图片 然后我们在AndroidStudio中新建一个vector Asset 然后就会在drawable文件夹

    2023年04月08日
    浏览(7)
  • 微信小程序引入外部矢量图标(阿里巴巴矢量图标)

    微信小程序引入外部矢量图标(阿里巴巴矢量图标)

      进入阿里巴巴矢量图标库 搜索想要的矢量图标并加入购物车,点击右上角购物车 将图标添加至项目 更改项目设置 将字体格式设置为TTF Base64   点击下载至本地  在微信小程序中新建文件夹  将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中  更改后缀名

    2024年02月16日
    浏览(35)
  • WPF使用SharpVectors显示SVG图标

    WPF使用SharpVectors显示SVG图标

    W3C SVG Working Group SVG它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。 矢量图形,不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好,无论屏幕分辨率如何,适合WPF使用。 iconfont-阿里巴巴矢量图标库提供了大量的SVG图标。 但是WPF本身不支持

    2024年02月13日
    浏览(9)
  • Vue3中使用svg图标

    因为项目很多模块需要使用图标,因此把它封装为全局组件!!! 在src/components目录下创建一个SvgIcon组件:代表如下 在src文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!! 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

    2024年02月05日
    浏览(7)
  • 【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

    使用vite-plugin-svg-icons插件显示本地svg图标 1.安装vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在项目根目录查找vite.config.js,进行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致 项目中使用示例: //menu.icon是路径里面

    2024年02月12日
    浏览(20)
  • SVG图标,SVG symbols,SVG use标签

    项目中图标的使用,趋势是使用svg作图标的,优点如下 兼容现有图片能力前提还支持矢量 可读性好,有利于SEO与无障碍 在性能和维护性方面也比iconfont要强很多 怎么在项目中优雅的使用svg图标,下面我们将采用类似雪碧图的做法 1、普通的使用 普通的使用遇到以下的问题:

    2024年02月15日
    浏览(10)
  • html5学习笔记15-内联SVG 可缩放矢量图形

    https://www.runoob.com/html/html5-svg.html SVG 图形的容器。SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万

    2024年02月11日
    浏览(8)
  • vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标

    vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标

    第一步 首先下载svg插件和fs模块; 后续需要用到 第二步新建文件夹和文件 将下载好的svg文件放入新建好的svg文件夹中 index.vue 代码 这里是创建一个 svg-icon / 组件 index.ts 代码 第三步 打开main.ts 将创建好的 svg-icon / 组件注入到全局组件 第四步 在根目录打开vite.config.ts ** 如果引

    2024年02月15日
    浏览(6)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包