Softonic

SVG 形状生成器

步 1 / 2

大多数设计系统仅需少量形状词汇：圆形用于角色头像，方形用于状态图标，三角形用于游戏标识，星形用于评分标记，六边形用于徽章。该生成器可精确呈现所有七种标准形状（圆形、方形、三角形、星形、六边形、五边形、心形），其几何参数均经过精准校准，星形的内半径准确无误，六边形和五边形均为顶点朝上排列，心形居中于画布中心，生成的<svg>文件即可直接粘贴使用。

如何生成形状

  1. 1

    选择形状

    圆形、方形、三角形、星形、五边形、六边形或心形。

  2. 2

    设置大小和笔画

    画布尺寸（以像素为单位）。笔宽控制轮廓粗细；0表示取消轮廓。

  3. 3

    选择填充和描边颜色

    任意六边形颜色。对于空心形状，请将填充色设置为 `none`。

  4. 4

    对于星标，请设置点位

    星形图元可接受3至12个点。5个点为经典配置；7个点则呈现警长徽章的样式。

  5. 5

    复制 SVG

    Markup使用匹配的 SVG 基元（`<circle>`、`<rect>`、`<polygon>`、`<path>`）来表示最小字节数。

一目了然的形状几何结构

形状 SVG 原始类型 关键参数
圆 <circle> 半径、填充方式、线条粗细
方形 <rect> 宽度、高度、笔画宽度（此处无rx参数）
三角形 <polygon>（3个点） 等边三角形，朝上
星标 <polygon>（N × 2） 点数（3–12），内半径与外半径之比
五角形 <polygon>（5分） 方向朝上
六边形 <polygon>（6个点） 点朝上排列（平放时旋转30°）
心形图案 <path>（采用贝塞尔曲线设计） 位于画布中央，呈对称分布

示例输出：五角星

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

内半径固定为外半径的40%，这一比例与旗帜星和奖杯星的经典设计比例一致。

使用场景

  • 头像与面具，圆形可作为个人资料照片的剪切路径。
  • 状态芯片，方形（通过CSS的border-radius或更高版本的rx函数进行圆角处理），作为简单的状态指示标志。
  • 评分界面：采用0至5分的评分量表，分别以实心星形、半实心星形及轮廓星形表示。
  • 徽章与纹章，六边形，内含文字或图标。
  • 点赞按钮：心形图标用于表示“喜欢”、添加到愿望清单或保存内容。

为何在通用路径上使用 SVG 原语

使用<circle>或<polygon>替代等效产品<path>：

  • 对于简单形状，其字节数更小（10–30字节）。
  • 更易于动画化，r、cx、cy、points等属性可直接通过CSS或 GSAP 进行曲线动画处理。
  • 在检查项和差异项中显示更加清晰。

对于复杂形状（圆形、图标、徽标），路径更为适用，因其可在单一元素中描述曲线及混合线段。

可访问性

所有生成的SVG文件默认均为装饰性设计。若形状具有特定含义（红色圆圈表示错误，绿色勾选表示成功），则将其置于包含role="img"和aria-label属性的父元素中，或在 SVG 内部添加一个带有<title>属性的子元素。

常见问题

内半径决定了每个臂的“粗细”程度。该生成器默认设置为内半径为外半径的40%，以呈现均衡效果；若需获得更锐利的星形，可在输出 SVG 中降低该比例（例如25%）；若需要更圆润、类似乐高积木的星形，则可将其提升至60%。

该生成器输出纯<rect>样式。若需圆角处理，请在矩形中添加rx="8" ry="8"；若需要包裹 SVG ，则可使用CSS属性border-radius。

是的，将 SVG 包裹在带有transform: rotate(30deg)标识的父图中，或修改路径：将起始角度调整30°。生成器默认设置为向上方向，因为该角度与大多数徽章设计相符。

是的。该 SVG 采用标准版式框架、整像素坐标及最小长度标记规范，可直接移植至React、Vue、Astro、电子邮件或纯HTML环境而无需修改。

不。形状参数用于渲染当前请求的 SVG ，使用后会被丢弃。

相关工具

材质设计颜色选择器

浏览Material Design色板，单击即可将任意色号（50至A700）以HEX、RGB或 HSL 格式复制。

PNG 转 SVG 矢量化工具

在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。

ARW 转 JPG 转换器

将索尼 ARW RAW 照片转换为 JPG。无需打开 Lightroom，即可从相机 RAW 文件得到一张便于分享、通用兼容的 JPEG。

报纸制作工具

使用你自己的标题和文章制作报纸风格的头版，然后复制、下载纯文本，或打开浏览器打印对话框。

半色调生成器

将照片转换为可调节的 AM 式半色调，可选单色、取样色和 CMYK 风格模式，并下载 PNG 或矢量网点 SVG。

在线白板

在浏览器中的私人白板上绘制想法，排列形状、便签和本地图片。支持撤销操作，并导出 PNG、JPEG、SVG 或可编辑的 JSON。

此工具还提供其他语言版本