微信公众号高级编辑排版 —— 第二节 SVG的作图原理&如何使用AI作画

Author Avatar
Rui 01月 14,2021
  • 在其它设备中阅读本文章

SVG标签属性介绍

svg标签属性

<svg viewBox="0 0 1125 2436" style="background-image: url(…图片链接…);background-size: 100%;background-repeat: no-repeat;"  xmlns="http://www.w3.org/2000/svg"></svg>

viewBox

定义画布大小

viewBox="0 0 1125 2436"

image.png

style

通过style定义背景图等

style="background-image: url(…图片链接…);background-size: 100%;background-repeat: no-repeat;"

svg绘图原理

以左上角为坐标原点,横向为x轴,纵向为y轴,通过x、y属性定义绘图初始位置,下面介绍部分图形的绘制。

<rect x="…" y="…" height="…" width="…" fill="?" />
<circle x="…" y="…" r="…" fill="…"  />

Ai绘图与导出

导出参数设置

1、文字直接保存

image.png

2、文字保存为图形

image.png

绘图注意事项:

  1. 不可使用剪切路径
  2. 不可使用渐变
  3. 不可使用网格工具
  4. 不可使用 SVG 滤镜
    以上四着图文内 SVG 代码不可读取,已被官方屏蔽

添加一点点动效

微信公众号平台——图文范畴内 SVG AttributeName 白名单规范介绍