Claude3.7的SVG代码图像生成能力真的挺不错

Posted by wildgun on 2025年3月2日
Posted in: AI绘图. Tagged: , , , . Leave a Comment

在 Reddit 上看到有人提到 Claude 3.7 在生成 SVG 代码图像方面很出色，我便试了试。

第一是要求画它自己的自画像，得到如下代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <!-- 背景 -->
  <rect width="400" height="400" fill="#f5f5f7" />
  
  <!-- 头部形状 -->
  <circle cx="200" cy="180" r="120" fill="#8c52ff" />
  
  <!-- 脸部 -->
  <circle cx="200" cy="180" r="100" fill="#ffffff" />
  
  <!-- 眼睛 -->
  <circle cx="160" cy="160" r="15" fill="#333333" />
  <circle cx="240" cy="160" r="15" fill="#333333" />
  
  <!-- 眼睛高光 -->
  <circle cx="165" cy="155" r="5" fill="#ffffff" />
  <circle cx="245" cy="155" r="5" fill="#ffffff" />
  
  <!-- 微笑 -->
  <path d="M150 210 Q200 260 250 210" stroke="#333333" stroke-width="5" fill="none" />
  
  <!-- Anthropic标志 -->
  <text x="200" y="320" font-family="Arial" font-size="24" text-anchor="middle" fill="#8c52ff">Claude</text>
  
  <!-- 简单的领结 -->
  <rect x="185" y="280" width="30" height="10" fill="#8c52ff" />
  <path d="M185 285 L175 295 L175 275 Z" fill="#8c52ff" />
  <path d="M215 285 L225 275 L225 295 Z" fill="#8c52ff" />
</svg>

然后是要求它画了个 SVG 的长颈鹿。

对了，为什么要画长颈鹿呢？因为我当时忽然想起《记录的地平线》里有一位画长颈鹿的大画家（实莉）。


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 500">
  <!-- 背景 -->
  <rect width="400" height="500" fill="#87CEEB" />
  
  <!-- 草地 -->
  <rect x="0" y="400" width="400" height="100" fill="#7CFC00" />
  
  <!-- 长颈鹿身体 -->
  <ellipse cx="220" cy="370" rx="60" ry="40" fill="#F5DEB3" />
  
  <!-- 长颈鹿腿 -->
  <rect x="180" y="390" width="15" height="80" fill="#F5DEB3" />
  <rect x="250" y="390" width="15" height="80" fill="#F5DEB3" />
  <rect x="200" y="390" width="15" height="70" fill="#F5DEB3" />
  <rect x="230" y="390" width="15" height="70" fill="#F5DEB3" />
  
  <!-- 长颈鹿脖子 -->
  <path d="M200 150 C180 210, 180 270, 190 330 L220 350 C240 300, 230 250, 220 150 Z" fill="#F5DEB3" />
  
  <!-- 长颈鹿斑点 -->
  <circle cx="205" cy="170" r="10" fill="#8B4513" />
  <circle cx="212" cy="210" r="8" fill="#8B4513" />
  <circle cx="195" cy="250" r="9" fill="#8B4513" />
  <circle cx="208" cy="280" r="7" fill="#8B4513" />
  <circle cx="200" cy="310" r="8" fill="#8B4513" />
  <circle cx="190" cy="340" r="6" fill="#8B4513" />
  <circle cx="210" cy="350" r="7" fill="#8B4513" />
  <circle cx="230" cy="360" r="9" fill="#8B4513" />
  <circle cx="250" cy="375" r="8" fill="#8B4513" />
  <circle cx="190" cy="375" r="8" fill="#8B4513" />
  
  <!-- 长颈鹿头部 -->
  <ellipse cx="210" cy="150" rx="18" ry="25" fill="#F5DEB3" />
  
  <!-- 长颈鹿耳朵 -->
  <circle cx="200" cy="135" r="8" fill="#F5DEB3" />
  <circle cx="220" cy="135" r="8" fill="#F5DEB3" />
  
  <!-- 长颈鹿角 -->
  <rect x="198" y="125" width="5" height="10" fill="#8B4513" rx="2" />
  <rect x="217" y="125" width="5" height="10" fill="#8B4513" rx="2" />
  
  <!-- 长颈鹿眼睛 -->
  <circle cx="202" cy="145" r="3" fill="black" />
  <circle cx="218" cy="145" r="3" fill="black" />
  
  <!-- 长颈鹿鼻子和嘴 -->
  <ellipse cx="210" cy="160" rx="8" ry="5" fill="#F5DEB3" />
  <path d="M210 155 Q210 165 210 165" stroke="black" stroke-width="1" fill="none" />
  
  <!-- 太阳 -->
  <circle cx="50" cy="60" r="30" fill="#FFD700" />
  <path d="M50 15 L50 0 M50 105 L50 120 M5 60 L0 60 M95 60 L110 60 M19 29 L9 19 M81 91 L91 101 M19 91 L9 101 M81 29 L91 19" stroke="#FFD700" stroke-width="4" />
  
  <!-- 树 -->
  <rect x="350" y="300" width="20" height="100" fill="#8B4513" />
  <circle cx="360" cy="280" r="40" fill="#228B22" />
</svg>

生成出来的效果和大画家实莉的手笔难分仲伯了！

最后，我要求它生成一张尽可能细节丰富、造型和颜色具有现代感的智能手机（看上去是3D的）图像。结果如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 600">
  <!-- 定义渐变 -->
  <defs>
    <!-- 手机主体渐变 -->
    <linearGradient id="phoneGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#2c3e50" />
      <stop offset="100%" stop-color="#1a2530" />
    </linearGradient>
    
    <!-- 屏幕渐变 -->
    <linearGradient id="screenGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#141e30" />
      <stop offset="100%" stop-color="#243b55" />
    </linearGradient>
    
    <!-- 反光效果 -->
    <linearGradient id="reflectionGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="rgba(255,255,255,0.2)" />
      <stop offset="50%" stop-color="rgba(255,255,255,0)" />
      <stop offset="100%" stop-color="rgba(255,255,255,0.1)" />
    </linearGradient>
    
    <!-- 侧面渐变 -->
    <linearGradient id="sideGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#34495e" />
      <stop offset="100%" stop-color="#2c3e50" />
    </linearGradient>
    
    <!-- 相机镜头渐变 -->
    <radialGradient id="lensGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#5D6D7E" />
      <stop offset="70%" stop-color="#212F3D" />
      <stop offset="100%" stop-color="#1C2833" />
    </radialGradient>
    
    <!-- 闪光灯渐变 -->
    <radialGradient id="flashGradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#FFF9C4" />
      <stop offset="100%" stop-color="#FFF176" />
    </radialGradient>
    
    <!-- 按钮渐变 -->
    <linearGradient id="buttonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#34495e" />
      <stop offset="100%" stop-color="#2c3e50" />
    </linearGradient>
    
    <!-- 阴影滤镜 -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.3 0" result="shadow" />
      <feOffset in="shadow" dx="5" dy="10" result="offsetBlur" />
      <feMerge>
        <feMergeNode in="offsetBlur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  
  <!-- 手机侧面边缘 -->
  <rect x="230" y="120" width="15" height="400" rx="2" ry="2" fill="url(#sideGradient)" />
  
  <!-- 手机主体 -->
  <rect x="100" y="100" width="130" height="400" rx="15" ry="15" fill="url(#phoneGradient)" filter="url(#shadow)" />
  
  <!-- 屏幕 -->
  <rect x="110" y="120" width="110" height="350" rx="5" ry="5" fill="url(#screenGradient)" />
  
  <!-- 屏幕上的反光效果 -->
  <rect x="110" y="120" width="110" height="350" rx="5" ry="5" fill="url(#reflectionGradient)" opacity="0.4" />
  
  <!-- 前置摄像头 -->
  <circle cx="165" cy="135" r="4" fill="#000" />
  <circle cx="165" cy="135" r="2" fill="#333" />
  <circle cx="165" cy="135" r="1" fill="#666" />
  
  <!-- 听筒 -->
  <rect x="150" y="135" width="30" height="2" rx="1" ry="1" fill="#333" />
  
  <!-- 屏幕内容 - 模拟应用图标 -->
  <!-- 第一行应用 -->
  <rect x="120" y="180" width="20" height="20" rx="5" ry="5" fill="#3498db" />
  <rect x="150" y="180" width="20" height="20" rx="5" ry="5" fill="#e74c3c" />
  <rect x="180" y="180" width="20" height="20" rx="5" ry="5" fill="#2ecc71" />
  
  <!-- 第二行应用 -->
  <rect x="120" y="210" width="20" height="20" rx="5" ry="5" fill="#f39c12" />
  <rect x="150" y="210" width="20" height="20" rx="5" ry="5" fill="#9b59b6" />
  <rect x="180" y="210" width="20" height="20" rx="5" ry="5" fill="#1abc9c" />
  
  <!-- 第三行应用 -->
  <rect x="120" y="240" width="20" height="20" rx="5" ry="5" fill="#e67e22" />
  <rect x="150" y="240" width="20" height="20" rx="5" ry="5" fill="#34495e" />
  <rect x="180" y="240" width="20" height="20" rx="5" ry="5" fill="#16a085" />
  
  <!-- 底部应用栏 -->
  <rect x="120" y="400" width="20" height="20" rx="5" ry="5" fill="#27ae60" />
  <rect x="150" y="400" width="20" height="20" rx="5" ry="5" fill="#c0392b" />
  <rect x="180" y="400" width="20" height="20" rx="5" ry="5" fill="#8e44ad" />
  <rect x="120" y="430" width="80" height="5" rx="2" ry="2" fill="#7f8c8d" />
  
  <!-- 手机后部 - 摄像头模块 -->
  <g transform="translate(300, 150)">
    <!-- 摄像头模块背景 -->
    <rect x="0" y="0" width="60" height="80" rx="10" ry="10" fill="#1a2530" filter="url(#shadow)" />
    
    <!-- 主摄像头 -->
    <circle cx="30" cy="25" r="15" fill="url(#lensGradient)" />
    <circle cx="30" cy="25" r="12" fill="#000" />
    <circle cx="30" cy="25" r="10" fill="url(#lensGradient)" />
    <circle cx="30" cy="25" r="5" fill="#000" />
    <circle cx="27" cy="22" r="2" fill="#fff" opacity="0.3" />
    
    <!-- 副摄像头 -->
    <circle cx="30" cy="55" r="10" fill="url(#lensGradient)" />
    <circle cx="30" cy="55" r="8" fill="#000" />
    <circle cx="30" cy="55" r="7" fill="url(#lensGradient)" />
    <circle cx="30" cy="55" r="3" fill="#000" />
    <circle cx="28" cy="53" r="1" fill="#fff" opacity="0.3" />
    
    <!-- 闪光灯 -->
    <circle cx="10" cy="25" r="5" fill="url(#flashGradient)" />
    
    <!-- 传感器 -->
    <circle cx="50" cy="25" r="3" fill="#333" />
  </g>
  
  <!-- 手机侧面按钮 -->
  <rect x="230" y="180" width="5" height="30" rx="2" ry="2" fill="url(#buttonGradient)" />
  <rect x="230" y="230" width="5" height="20" rx="2" ry="2" fill="url(#buttonGradient)" />
  
  <!-- 手机边框细节 -->
  <path d="M100 115 Q100 100 115 100 L215 100 Q230 100 230 115 L230 485 Q230 500 215 500 L115 500 Q100 500 100 485 Z" fill="none" stroke="#34495e" stroke-width="1" />
  
  <!-- Type-C充电口 -->
  <rect x="155" y="499" width="20" height="2" rx="1" ry="1" fill="#7f8c8d" />
  
  <!-- 品牌Logo -->
  <circle cx="165" cy="470" r="5" fill="none" stroke="#7f8c8d" stroke-width="1" />
</svg>

怎么样？虽然有点错误（多了个莫名其妙的侧边），但确实有那么些 3D 的感觉了。甚至它还做出了 USB-C 口的缺口细节。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注