“SVG做好了,怎么发布到客户端APP?”-夜雨聆风

“SVG做好了,怎么发布到客户端APP?”

两会期间，不少融媒体中心创作了形式多样，内容精致的 SVG 交互式长图。而众所周知——除了应用于公众号，SVG 基于其强大的通用性还可以在微博文章、APP、小程序等场景加载。

而对于广泛拥有 APP 客户端的政务机关来说，将 SVG 部署到 APP 正在逐步流行，它一方面省去了信息科同志复杂的 H5 特效开发工作，另一方面 SVG 内联文档无可比拟的稳定性和安全性高度符合政务融媒体场景要求。

接下来，计育韬老师简要为大家介绍下一个基本的部署工作流。

首先看看最终形式，以河北日报《大道2025》为例，这个页面可以直接在河北日报客户端 APP 浏览，并支持分享到微信等场景并保持其中 perspective 3D 与 SVG 渲染的高度稳定：

接下来讲解部署流程。

先看一下自己手头的 SVG 成品——比如你是使用 E2 编辑器（www.e2.cool）制作的，那么此时在编辑器里应该已经可以预览完整的效果：

怎么把这个作品下载为一个代码文件呢？很简单，点击代码按钮全选复制，随后打开一个记事本文档或专业的代码编辑工具（如 Sublime Text）等黏贴入其中：

无需任何调整，另存为一个 .html 文档到本地，现在你就获得了一个可直接执行的 SVG 网页文件。

但是如果这个文件直接部署去 APP，其中的图片是无法加载的，因此你需要把所有图片上传到：

单位内网图片服务器
或单位公网 OSS/CDN
或内网静态资源目录

也就是说，要让图片能通过 HTTPS 直接在你单位的 APP 上访问，不需要登录。示例：

https://app.单位.com/static/images/xxx.png

接下来替换 SVG 里的图片路径。一般来说需要打开你的 `index.html`，找到所有原图地址。如 E2 编辑器（www.e2.cool）内通常显示为：

https://oss.e2.cool/node0/XXX.png

如果你觉得逐个更换比较慢，甚至找起来就困难，那么这里计育韬老师推荐我发现的一个地址替换器，等待加载片刻即可使用：

https://image-tool-sqop.onrender.com/link-replacer

把已经全部上传到单位 APP 图床的地址一一更换：

替换完成后，就意味着当前 HTML 新文档可以直接部署了。请信息科同志新建一个页面，用 WebView 直接打开这个 HTML 链接即可，不需要任何额外配置：

不用 JS
不用接口
不用适配
不用原生交互

而具体的 index.html 大体如下：

<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><style>  html, body {    margin:0; padding:0; background:#fff;    width:100%; height:100%;    overflow-x:hidden;  }  svg {    width:100%;    height:auto;    display:block;  }</style></head><body><!-- 把你整个 SVG 粘贴到这里 --><svgviewBox="0 0 750 1200">  <imagehref="https://你的图床/图片.png"width="750"height="1200"/>  <!-- 你的纯SVG内容 --></svg></body></html>

至于前面额外添加的，都只是 HTML 文档的基础结构。

完成后，检查页面的运行效果，预留好高并发情况，再根据具体需要决定是否 APP 额外 PUSH 即可。

以上是计育韬老师为大家提供的关于“SVG做好了，怎么发布到客户端APP？”的参考解答。如果你的单位有进一步的 SVG 培训深造需求，希望得到更专业的技术指导并了解行业一线作品工作流，可以通过添加助教微信 Zhuoya_Work 进一步与我们取得联系。

红色新媒体运营宝典

来了？坐，有什么困难跟组织说。

“SVG做好了,怎么发布到客户端APP?”

接下来替换 SVG 里的图片路径。一般来说需要打开你的 `index.html`，找到所有原图地址。如 E2 编辑器（www.e2.cool）内通常显示为：

wang

猜你喜欢

评论抢沙发

接下来替换 SVG 里的图片路径。一般来说需要打开你的 index.html，找到所有原图地址。如 E2 编辑器（www.e2.cool）内通常显示为：

wang

猜你喜欢

评论 抢沙发

接下来替换 SVG 里的图片路径。一般来说需要打开你的 `index.html`，找到所有原图地址。如 E2 编辑器（www.e2.cool）内通常显示为：

评论抢沙发