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

Author Avatar
ZER0N Studio
发表：2021-01-14 23:13:02
修改：2024-11-04 17:17:11

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 白名单规范介绍

评论