我是个SVG矢量文件的爱好者。
如果你是EarlETF的读者，应该对那些蓝色系的插图有点印象，看着像PPT，但其实是AI生成的SVG矢量文件。
用AI生成SVG，应该是两年前看李继刚老师用lisp风格的提示词画SVG来表达各种内容，惊为天人，也沉迷于此了。
不过，大模型的SVG能力，参差不齐，Claude是最顶尖的，尤其是Claude 4.6 Opus，更强。当然Gemini 3.1 Pro出来后，在美感上也强了许多，甚至在提示词约束下，能做出许多好的图片。我现在EarlETF的SVG配图，都是用Claude 4.6 Opus写的提示词，在Gemini 3.1 Pro上输出的。
但SVG，即使强如上面两个模型，出来的内容往往也会有文字重叠等小偏差，以至于我还自己写了一个SVG小工具，既可以对代码进行可视化微调，也能快速导出PNG等使用。
但最近给娃做一个小教具后，突然发现把自己困在“SVG”中，也许是个糟糕的主意。
事情是这样的，我家娃小学二年级，要开始学习钟面识别了。
虽然有一些练习题给她做，但显然量不够，就想着批量生成给她刷题。以前，我买过一个叫“速创字帖”的小程序，手机上能输出很多题目，中文、英文、数学都有很好使。可惜她家的钟面题，只有5、10这种刻度，不符合老师要求60分钟任意一分钟的要求。
于是，就想着用大模型自己写一个，顺便也是考验下模型的能力。
打开近期热火的Deepseek TUI，调用Deepseek V4 Flash，给了要求，很快就生成了一个网页，会生成5行×4列的钟面，下面有时和分的横线等待填空。看了下代码，是在HTML下用Canvas实现的。
顺便，我又生成了一个反向的，只有钟面，下面给出随机时间，让娃画钟面的。
做到这，突然想起在教娃钟面时，我还用Gemini 3.1 Pro生成过一个SVG的钟面，内外两圈刻度，方便她了解1和5，2和10的对应关系。
当时还发了一条即刻，感慨Gemini 3.1 Pro的强大。
但在用HTML+Canvas做了上面两个页面后，我很好奇的是，类似这样的，让Deepseek V4 Flash写HTML会是怎样的效果？
给了下面的提示词：
请再用一个html，帮我生成一个没有指针的圆形钟面，大体撑满一张A4纸，这个钟面上要有1和5为单位的刻度，同时有双圈刻度值，外圈是5、10、15这样的小字，内圈是1-12的大字传统刻度。在钟面外部空余的地方，在生成红色分针和蓝色时针各一根，我可以用于手工。
结果如下，非常完美。这让我意识到，困在“SVG”，或许是犯傻了。
为了印证我的猜测，我在CherryStudio下，依然用Deepseek V4 Flash，用上面的提示词，只是改要求用SVG来生成。结果就得到下面这个东西，分针时针都和钟面重叠了，完全不可用。这个毛病，似乎是非常多大模型直接画SVG常遇到的问题。
所以就召唤出Gemini和他交流，讨论用SVG和用Canvas画钟面的差别，他说的几个差异的确有道理：
- SVG相对还是小众，大模型掌握的代码远不如Canvas多；
- SVG本质上是一个描述怎么画线画框，对于钟面这样有60个刻度，就要画60个线段，再加上其他的，空间想象力要求太高。而Canvas本质上是代码，可以循环运行，60个刻度的位置都能算出来，不容易出错。
- SVG是全局坐标，要考虑几个物品之间的距离难度高许多。Canvas可以移动原点，计算量小。
反正不管具体原因，实践出真知就是，用哪怕便宜如Deepseek V4 Flash，搭配HTML+Canvas，都能有不错的制图，这比SVG只有少数模型掌握的好，普适性太强了。
无怪乎今年看李继刚分享的skill，在可视化上也是用了HTML，或许也是追求这种稳定性。
未来也多摸索下，用HTML做更多可视化的表达。