標簽： svg js uni-app
前情
uni-app是我很喜歡的跨平台框架，它能開發小程序，H5,APP(安卓/iOS),對前端開發很友好，自帶的IDE讓開發體驗也很棒，公司項目就是主推uni-app。
解決方案
最近在做一個需求，logo等png小圖片在部分設備下會變糊，又不想做大圖來縮放解決，於是考慮換成SVG，
uni-app目前不支持svg標簽，只能通過別的方式委婉的使用SVG。
- 通過image組件src引入一個svg文件
- svg轉換成base64再通過image組件src引入
- svg轉換成行間形式如："data:image/svg+xml;utf8,svg文件內容"，再通過image組件src引入
- 通過background-image設置svg文件，但是uni-app背景只支持遠程，需要把svg文件放到遠程服務器上
- svg轉base64再通過background-image設置來實現
- 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=" />