《SVG 不挨踢》第 1 集：SVG 是啥？能吃吗？

本期目标：用记事本写 6 行代码，画一颗红心，发到群里收割 50 个「哇塞」。

1. 开场白

先给你打个预防针：
如果你以为 SVG 是「什么鬼技术」，那一定是你打开的方式不对。
说白了，SVG 就是「用打字代替画笔」，而且放大 800 倍都不带糊的，文件小到流量党都感动哭。

2. 准备工作——只用记事本

对，你没看错：

1. 电脑按 Win + R → 输入 notepad → 回车。
2. 把下面这段 无脑复制 进去：

<svg viewBox="0 0 100 100">
  <path d="M50,30
           C50,20 40,10 25,20
           C10,30 25,50 50,75
           C75,50 90,30 75,20
           C60,10 50,20 50,30 Z"
        fill="crimson"/>
</svg>

3. 保存 → 文件名 love.svg → 保存类型选 所有文件。
4. 双击打开，看到一颗红心？恭喜，你刚刚写了人生中第一个矢量图！

3. 代码逐行翻译（人话版）

看完发现：
“原来我只是在给笔下达导航指令！”

4. 放大试试——矢量图的骚操作

把 love.svg 拖进浏览器 → Ctrl + 滚轮 狂放大。
你会看到边缘依旧丝滑，没有锯齿，没有马赛克。
这就是矢量图打家劫舍……啊不，纵横江湖 的核心技能。

5. 文件体积对比——伤害性不大，侮辱性极强

结论：同样的爱心，SVG 省流量、省存储、还省女朋友（不是）。

6. 立刻装×——3 种发圈姿势

1. 直接发文件：
   「刚写的爱心，矢量，放大不发虚～」
2. 改色再发：
   把 crimson 换成 gold，叫「暴富之心」。
3. 加文字：
   在 <svg> 里再写一行 <text x="25" y="95" font-size="8">给你</text>，瞬间土味情话。

7. 课后作业（就 1 题）

把爱心颜色改成 hotpink，文件名 gay.svg，发给闺蜜，配文：
「今天只做粉色的梦」。
截图回帖，我随机抽 3 人送「第 2 集更新提醒」+「电子彩虹票」。

8. 下集预告

第 2 集《路径狂魔：d 属性到底在嘀咕啥？》
带你画笑脸、画星星、画公司 LOGO，然后老板给你加薪（后半句可能骗你）。
想继续？评论区敲 1，我连夜肝稿！