文字转 SVG 工具

免上传的本地文字转 SVG 工具。输入文字,选一款看得见的字体,实时预览并下载带矢量描边路径的 SVG。适合做网页标题、React 组件、Logo 小样和社交配图。

文字转 SVG 工具加载中
文字转 SVG

文字转 SVG 的常见用途

使用文字转 SVG 工具制作网页 Hero 标题、可以直接复制到 React 的 SVG 组件、品牌字标、社交媒体配图。导出的 SVG 把字形直接转成 <path> 矢量路径,到哪都能精确还原,不依赖系统字体。

选字体前就能看清效果

每张字体卡都用真实样张展示字形和风格,不用对着字体名猜。

一键复制到 React

JSX、TSX 导出直接粘进组件;SVG、PNG、PDF 全都有。

字形已转矢量路径,不依赖字体

导出的 SVG 把字形转成 <path> 矢量路径,目标设备没装这款字体也能 100% 还原。

流程

三步完成文字转 SVG

从空白到能直接用的 SVG,通常一分钟内搞定。

1

输入文字

敲一行准备做文字转 SVG 的标题、品牌名或一句话。多行也支持。

2

选择字体卡片

内置 4 款拉丁字体(Inter、Playfair Display、JetBrains Mono、Dancing Script),也可以上传你自己的 .ttf / .otf / .woff 用任意语言。

3

导出你的文字转 SVG

调字号、字重、间距、颜色和画布,然后复制文字转 SVG 代码或下载 SVG / JSX / TSX / PNG / PDF。

网页字体

自带任意字体,渲染任意字符

内置 4 款拉丁字体覆盖无衬线、衬线、等宽和手写。需要中文、日文、阿拉伯文或天城文,就上传你自己的字体文件——本地解析,永不离开你的设备。

支持 TTF、OTF、WOFF 上传

拖入自定义字体后会出现在字体卡里。导出用你上传的字形路径,目标设备不装字体也能用。

十六进制色值选色器

任选颜色——预览实时更新,导出 SVG 里的每个 <path> 也都会着色。

代码里看着也舒服

导出的是纯 SVG 代码,可读、能 diff、方便提交到 Git。

文字转 SVG 常见问题

关于格式、字体、导出和使用场景的快速回答。

做出来的 SVG 能直接用在 React / Vue 项目里吗?

可以。点 JSX 或 TSX 导出,直接粘到 React 组件里——根 <svg> 会接收你传入的 props,可以加 className、调尺寸、绑事件,再用 CSS 加动画。普通 SVG 也能用在 Vue、Svelte 或 HTML 模板里。

Cricut、刻字机、激光切割机能直接用吗?

可以。导出已经把所有字形转成 <path> 矢量路径,正是刻字机想要的格式,不用再去 Illustrator / Inkscape 里手动 Outline。

这个文字转 SVG 工具免费吗?需要注册吗?

免费、不限次数、不用注册。所有处理都在您的设备本地完成,文字绝不上传服务器。

文字转 SVG 支持输入中文、日文或阿拉伯文吗?

内置的 4 款字体只覆盖拉丁字符(Inter、Playfair Display、JetBrains Mono、Dancing Script)。需要中文、日文、阿拉伯文、天城文或其他语言,请上传一份覆盖该语言的字体文件——工具在本地解析并使用其字形路径。

怎么改成我品牌的颜色?

把你的 hex 色值粘进文字颜色选择器,预览实时更新。

下载下来的 SVG 跟预览一样吗?

完全一样。导出文件用的就是预览那里显示的 width、height、viewBox 和字形轮廓。

可以多行文字吗?

可以。直接按回车换行,富文本编辑器会把段落保留到导出文件里。

下载后还能继续编辑吗?

能。导出的是普通 SVG 代码,VS Code、Illustrator、Inkscape、Figma 都能打开。文字以 <path> 矢量路径形式导出,不再是可选中的文本——你可以编辑路径形状,或者直接回到本工具重新导出。

做 Logo 应该用多大画布?

SVG 可以无限缩放,按设计意图选画布就行。常见起点:字标 Logo 512×128、社交配图 1080×1080、网页 Hero 1920×1080。

能导出 PNG 或 PDF 吗?

能。五种格式:SVG、JSX、TSX、PNG、PDF。PNG 和 PDF 都从同一份 SVG 渲染,按你设的画布尺寸保持清晰。