标签： svg js uni-app

前情

uni-app是我很喜欢的跨平台框架，它能开发小程序，H5,APP(安卓/iOS),对前端开发很友好，自带的IDE让开发体验也很棒，公司项目就是主推uni-app。

解决方案

最近在做一个需求，logo等png小图片在部分设备下会变糊，又不想做大图来缩放解决，于是考虑换成SVG，

uni-app目前不支持svg标签，只能通过别的方式委婉的使用SVG。

  1. 通过image组件src引入一个svg文件
  2. svg转换成base64再通过image组件src引入
  3. svg转换成行间形式如："data:image/svg+xml;utf8,svg文件内容"，再通过image组件src引入
  4. 通过background-image设置svg文件，但是uni-app背景只支持远程，需要把svg文件放到远程服务器上
  5. svg转base64再通过background-image设置来实现
  6. svg转换成行间形式如："data:image/svg+xml;utf8,svg文件内容"，再通过background-image设置来实现

    理想状态下以上方式都是可以实现，而且开发调试也都是OK的，但是在打包成ios后，发现第1种方式引入的SVG文件全部丢失。

    此处推荐用3和6方案，因为文件转base64体积会变大。

svg文件转行间svg/base64

网上有好多在线的转换工具。

推荐使用鑫大神制作的转换工具：svg在线在线压缩合并

界面如下：

关键代码

// 行间svg

<image src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 54'%3E%3Cpath d='M39.5 11.6l19.4 24.6c.2.2.2.6 0 .8l-9.7 12.4c-.2.3-.6.3-.9.1l-.1-.1L34 31.5 19.9 49.4c-.2.3-.6.3-.9.1l-.1-.1-4.8-6c-.2-.2-.2-.6 0-.9l24.3-30.9c.2-.3.6-.3.9-.1.1 0 .2.1.2.1zM9.1 36.2L33.5 5.3c.2-.3.6-.3.9-.1l.1.1 2.4 3c.2.2.2.6 0 .8L12.5 40c-.2.3-.6.3-.9.1 0 0-.1 0-.1-.1l-2.4-3c-.1-.2-.1-.6 0-.8z' fill-rule='evenodd' clip-rule='evenodd' fill='%230e8cf2'/%3E%3Ctext transform='translate(68 38)' font-size='30' font-family='MicrosoftYaHei' fill='%2325292c'%3E****%3C/text%3E%3Cpath fill='none' d='M0 0h200v54H0z'/%3E%3C/svg%3E" />

// svg转换成base64

<image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTQiPjxwYXRoIGQ9Ik0zOS41IDExLjZsMTkuNCAyNC42Yy4yLjIuMi42IDAgLjhsLTkuNyAxMi40Yy0uMi4zLS42LjMtLjkuMWwtLjEtLjFMMzQgMzEuNSAxOS45IDQ5LjRjLS4yLjMtLjYuMy0uOS4xbC0uMS0uMS00LjgtNmMtLjItLjItLjItLjYgMC0uOWwyNC4zLTMwLjljLjItLjMuNi0uMy45LS4xLjEgMCAuMi4xLjIuMXpNOS4xIDM2LjJMMzMuNSA1LjNjLjItLjMuNi0uMy45LS4xbC4xLjEgMi40IDNjLjIuMi4yLjYgMCAuOEwxMi41IDQwYy0uMi4zLS42LjMtLjkuMSAwIDAtLjEgMC0uMS0uMWwtMi40LTNjLS4xLS4yLS4xLS42IDAtLjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzBlOGNmMiIvPjx0ZXh0IHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4IDM4KSIgZm9udC1zaXplPSIzMCIgZm9udC1mYW1pbHk9Ik1pY3Jvc29mdFlhSGVpIiBmaWxsPSIjMjUyOTJjIj7ov5zlhYnlrrblm608L3RleHQ+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyMDB2NTRIMHoiLz48L3N2Zz4=" />

uni-app中使用svg的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  3. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  4. 一文详解如何在基于webpack5的react项目中使用svg

    本文主要讨论基于webpack5+TypeScript的React项目(cra.craco底层本质都是使用webpack,所以同理)在2023年的今天是如何在项目中使用svg资源的. 首先,假定您已经 ...

  5. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  6. 在iOS APP中使用H5显示百度地图时如何支持HTTPS？

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  7. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

  8. HTML5中使用SVG

    SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...

  9. 【iOS开发】在 App 中加入 AdMob 广告 - 入门介绍与编程技巧

    前言 虽然在App中加入广告来盈利是比较低级的商业化方式,但对于个人开发者或者小团队开发者来说,做出一个简单易用的免费小工具(举个栗子),在里面加入一些广告,如果用的人多,也是可以带来一些可观的收入的 ...

  10. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

随机推荐

  1. 28. 找出字符串中第一个匹配项的下标 Golang实现

    题目描述: 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从 0 开始).如果 needle 不是 hay ...

  2. iOS中修饰符常用小结

    1.copy,是复制引用对象地址的深拷贝 a:当修饰不可变类型的属性时,如NSArray.NSDictionary.NSString,用copy,用copy为关键字的话,调用setter方法后.是对赋 ...

  3. markdown.css 设置文章的样式

    返回的详情文章内容是标签加内容文字,使用 markdown,css 渲染样式 : .markdown-body .octicon { display: inline-block; fill: curr ...

  4. Promise.all、race和any方法都是什么意思？

    // // 执行多个并行任务 const promiseAll = [ thenFs.readFile('./files/1.txt','utf8'), thenFs.readFile('./file ...

  5. 云原生周刊：K8s v1.28 中的结构化身份验证配置

    开源项目推荐 KubeLinter KubeLinter 是一种静态分析工具,用于检查 Kubernetes YAML 文件和 Helm 图表,以确保其中表示的应用程序遵循最佳实践. DB Opera ...

  6. 基于 JuiceFS 的 KubeSphere DevOps 项目数据迁移方案

    方案背景和目的 KubeSphere 自发布以来已有 2 年之久,从 2.1.0 版本至目前最新版本 3.3.开发人员的编译构建都基于环境平台的 DevOps 功能(底层是 jenkins)实现,如果 ...

  7. 【小 w 的代数】（提供一种 n^2 log 的解法）

    前言: 卖点 记录 CTH 的发言 CTH:你这真是 n^3 的 CTH:我也不知道你线段树优化个啥,\(n^3 \log n\) CTH:你优化到哪了啊 CTH:······你从赛时打这个题到现在 ...

  8. Java高并发，ReadWriteLock（读写锁）

    并发读写的时候,很容易造成数据不一致的状态 上案例,代码如下: public class ReadWriteLockDemo { public static void main(String[] ar ...

  9. Python获取jenkins job信息

    pip install Python-jenkins  如果只是想获取到jenkins的全局变量(比如job url),使用jenkins全局变量就能做到. https://www.jb51.net/ ...

  10. Xor-FWT 的另一种理解方式

    Xor-FWT 的另一种理解方式 学习 \(\text{Fennec's Algorithm}\) 的额外收获,顺手记录一下. 假设我们要求两个长度为 \(n\) 的数组的异或卷积,为方便起见令 \( ...