第32页
用La Te X快速生成数学公式
你可能暂时还不会用LaTeX语法写数学公式，那不妨通过一些在线快捷工具平台进行导出（如图3-24所示）。
图3-24 用在线快捷工具导出
只需要使用上方的按钮，就可以快速书写表达式并选择你需要的格式导出。我们以三角表达为例（如图3-25所示）。
图3-25 快速书写表达式
输入完毕后，选择“SVG格式导出下载”，在本地你就得到了基于LaTeX语法排版产生的SVG格式数学公式。
将数学公式载入图文
进入微信公众平台的图文编辑后台，在Chrome浏览器内按快捷键ctrl+shift+c（Mac用户按快捷键command+shift+c）打开开发者工具。
对于本地的SVG格式数学公式，请使用软件AI打开并以适合图文发布的参数另存为。注意另存为时将CSS属性设置为“演示文稿属性”（如图3-26所示）。
图3-26 设置CSS属性
点击“SVG代码查看”，你会看到它的HTML5代码（如图3-27所示）。
图3-27 查看它的HTML代码
复制全部代码，在Chrome的开发者模式中锁定图文内需要插入的位置（如图3-28所示）。
图3-28 锁定需插入的位置
右键选择Edit as HTML，你就可以把复制的代码粘贴过来，随后点击任意空白位置完成载入，效果如下（如图3-29所示）。
图3-29 载入后的数学公式
上方这个公式既不是文本也不是普通图片，但可以在微信图文中优雅地实现科学表达且绝对清晰，相信对理工类、科普类新媒体都有重大意义。
常用LaTeX数学书写规则
可以用^和_后加相应字符来实现指数和下标（如图3-30所示）。
图3-30 指数和下标的表达
平方根（Square Root）的输入命令为\sqrt，n次方根为\sqrt[n]。方根符号的大小由LATEX自动调整。也可用\surd仅给出符号（如图3-31所示）。
图3-31 方根的表达
命令\overline和\underline在表达式的上、下方画出水平线（如图3-32所示）。
图3-32 水平线的表达
命令\overbrace和\underbrace在表达式的上、下方给出大括号（如图3-33所示）。
图3-33 大括号的表达
向量（Vectors）通常用上方有小箭头（Arrow Symbols）的变量表示。这可由\vec实现。另两个命令\overrightarrow和\overleftarrow在定义从A到B的向量时非常有用（如图3-34所示）。
图3-34 箭头的表达
分数（Fraction）使用\frac{...}{...}排版。一般来说，1/2 这种形式更受欢迎，因为对于少量的分式，它看起来更好些（如图3-35所示）。
图3-35 分数的表达
积分运算符（Integral Operator）用\int生成。求和运算符（Sum Operator）由\sum生成。乘积运算符（Product Operator）由\prod生成。上限和下限用^和_生成，类似于上标和下标（如图3-36所示）。
图3-36 各运算符的表达
在图文中载入复杂表格
在微信图文中展示复杂表格时，如果以JPG或PNG格式呈现，那么往往因为图文内图片大小受限，经过压缩以后，效果非常模糊。而用SVG格式载入，不仅显示清晰，而且加载速度很快。接下来示范使用SVG在微信图文中排版复杂表格的方法。
工具准备
主要用到的工具有Adobe Illustrator和在线图像转换工具，如convertio。
生成SVG格式的表格
方法一：使用AI转换格式
用AI打开我们需要转换的PDF表格文档（如图3-37所示）。
图3-37 打开PDF表格
点击“文件→存储为”，或按快捷键ctrl+shift+s（Mac用户按command+shift+s），将保存类型选定为SVG。
在出现的如图3-38所示的窗口中，将“CSS属性”这一项选定为“演示文稿属性”，然后点击“SVG代码”，获取其代码。
但是用AI直接打开PDF有时会因为文字编码的问题，在AI软件中出现乱码，那么就要使用方法二避免这种情况。
图3-38 设定CSS属性
方法二：使用在线工具转换格式
打开网站后，从电脑中选取需要转换的表格文档，注意将目标格式选定为SVG（如图3-39中的红框内所示），点击“转换”，即可生成SVG格式的图片。再将生成的文件下载。
图3-39 选定目标格式
由此生成的SVG文档可以用任意代码编辑器打开以获取其SVG代码。图3-40用的是将Sublime Text复制所得的SVG代码。
图3-40 获取SVG代码
将表格载入图文
进入微信公众平台的图文编辑后台，在Chrome浏览器内按快捷键ctrl+shift+c （Mac用户按command+shift+c），打开开发者工具（如图3-41所示）。
图3-41 打开开发者工具
找到需要插入表格的位置，把之前复制的代码粘贴过来，随后点击任意空白位置完成载入，效果如图3-42所示。
图3-42 完成载入后的效果
注意事项
· 使用在线转换工具时需要注意，在进行转换时，它只能转换第一页的表格。如果你的PDF表格超过一页，那么需要将其合成只有一页的文件。
· 如果你不希望表格内的文字被随意复制，就可以在AI中将其轮廓化后再复制SVG代码。
轮廓化方法如下。
1.选中文字，点击菜单栏“文字→创建轮廓”，或快捷键ctrl+shift+o（Mac用户按command+shift+o）。
2.或者在SVG选项窗口中，将“文字”这一项选定为“转换为轮廓”，再进行导出即可（如图3-43所示）。
图3-43 在SVG窗口中导出
一手品牌商业案例解析
现在，我们进一步学习已经在业内发布并形成不错反响的一手商业SVG交互图文。你可以看到各行各业的龙头企业如何通过SVG让图文成为爆款新媒体产品。这些一手案例中包含了不少特殊的设计方法，它们是我们实际设计、开发、交付中的经验和总结。
答题卡样式
案例展示
请在JZCreative公众号中回复“svg0201”查看小米案例（如图3-44所示），回复“svg0202”查看奔驰案例，回复“svg0203”查看vivo案例。
图3-44 小米案例展示
代码逻辑
采用同位偏移的原理，将所有需要共同移动的内容绑定，利用微信svg动画单次点动的特点，让绑定内容在点击后进行相同位移。相同位移指位移动效不仅限于位置位移，泛指任何可以共同产生的效果。其目的在于增强控制，优化代码。
此定制将题目中的选项与答题卡上的填涂答案进行编组。从优化代码的角度出发，避免多次增添动效代码，全编组采用一个效果；从增强控制的角度出发，点击一次即可引发后续效果，避免多次重复增添互动指令块而产生的数次点击，更加方便、符合逻辑。
在效果方面，采用编组整体位移（type="tran-slate"）或整体不透（attributename="opacity"）变化。同位偏移的原理使读者点击选项组做出选择的同时，答案组在答题卡上生成答案。此处强调一下“虚设”这个概念，即利用复制刷新、删除新造、遮盖掩挡等方法，制作出想要的效果，而非真实操作。采用虚设的原理，在下方的答题卡上遮盖白块，在读者点击白块的同时，形成数据存储后生成答题卡的效果。