LaTeX | 矢量绘图导出 TikZ
注部分图片显示异常得空修正。可导出 TikZ 代码的绘图工具一、Inkscape矢量绘图 插件导出 TikZ官网https://inkscape.org/简介开源免费矢量图编辑器擅长插画、流程图、技术图原生不支持 TikZ需安装SVG2TikZ扩展。安装 SVG2TikZ方式 1pippip install svg2tikz方式 2扩展下载插件 → 放入%APPDATA%/Inkscape/extensionsWindows或~/.config/inkscape/extensionsLinux/macOS→ 重启 Inkscape导出 TikZ 步骤绘制/打开 SVG 图形菜单Extensions → Export → Export As TikZ path设置范围画布/选中、缩放、单位、坐标精度、路径简化导出保存为.tex得到可直接嵌入 LaTeX 的 TikZ 代码导出格式仅 TikZ.tex可另存为PNG/SVG/PDF原生优缺点优点矢量编辑强、免费、插件成熟、复杂图形适配好缺点需装插件、渐变/滤镜转换有限、代码偏冗长二、Mathcha.io数学/科学绘图 原生多格式导出官网https://www.mathcha.io/简介在线数学编辑器专为公式、几何、函数图、交换图设计原生支持导出 TikZ/PGF、PNG、SVG、PDF。导出 TikZ / 图片步骤打开编辑器 → 绘制图形点、线、圆、函数、框图等右上角Export→ 选LaTeX → Pgfplots/TikZ Graphs完整 .tex 模板或直接Copy Tikz to Clipboard纯代码图片导出Export → PNG/SVG/PDF自定义分辨率/DPI导出格式TikZ.tex / 剪贴板、PNG、SVG、JPG、PDF、MathML优缺点优点免安装、数学符号强、一键多格式、标签自动兼容 LaTeX、适合学术缺点复杂矢量插画弱、云端存储、免费版有水印/导出限制三、其他可导出 TikZ 的工具含在线/桌面/命令行1. GeoGebra几何/代数/微积分官网https://www.geogebra.org/用途教学、几何动画、函数曲线导出文件 → 导出 → PGF/TikZ.tex格式TikZ、PNG、SVG、PDF2. Ipe学术矢量图 / LaTeX 友好官网https://ipe.otfried.org/桌面开源支持 LaTeX 文本、PDF 导出内置TikZ 导出3. Quiver交换图 / 范畴论官网https://q.uiver.app/在线专用一键导出tikz-cd代码适合数学交换图4. Dia流程图 / UML官网https://wiki.gnome.org/Apps/Dia开源桌面支持导出PGF/TikZ适合框图、流程图5. Gnuplot科学绘图 / 数据可视化官网http://www.gnuplot.info/命令行set terminal tikz→ 直接输出.tex6. Matlab2tikz / Octave2tikz官网https://github.com/matlab2tikz/matlab2tikz把 Matlab/Octave 图转为 TikZ兼容 PGFPlots7. R tikzDevice官网https://cran.r-project.org/web/packages/tikzDevice/index.htmlR 语言绘图设备生成.tex嵌入 R 图形8. SVG2TikZ命令行官网https://github.com/xyz2tex/svg2tikz独立工具svg2tikz input.svg -o output.tex9. Mathpix图像识别 → TikZ官网https://mathpix.com/付费截图/上传位图 → 生成近似 TikZ复杂图误差大四、工具对比快速选型工具类型场景官网导出 TikZPNG/SVG免费InkscapeSVG2TikZ桌面矢量复杂插画、技术图https://inkscape.org/✅✅开源免费Mathcha.io在线数学公式、几何、函数图https://www.mathcha.io/✅✅免费版GeoGebra桌面/在线几何、教学、动画https://www.geogebra.org/✅✅免费Quiver在线交换图、范畴论https://q.uiver.app/✅✅免费Ipe桌面学术论文矢量图https://ipe.otfried.org/✅✅开源免费Dia桌面流程图、UMLhttps://wiki.gnome.org/Apps/Dia✅✅开源免费Gnuplot命令行数据、函数曲线http://www.gnuplot.info/✅✅开源免费Matlab2tikz脚本库Matlab/Octave 绘图https://github.com/matlab2tikz/matlab2tikz✅—开源免费tikzDevice ®R 包R 语言绘图https://cran.r-project.org/web/packages/tikzDevice✅—开源免费SVG2TikZ命令行SVG 转 TikZhttps://github.com/xyz2tex/svg2tikz✅—开源免费MathpixOCR 识别图片转 TikZhttps://mathpix.com/✅—付费为主五、使用建议复杂矢量图/插画选InkscapeSVG2TikZ数学/函数/交换图/论文选Mathcha.io几何教学/演示选GeoGebra纯数据绘图选Gnuplot / Matlab2tikz不想装软件选Mathcha / Quiver在线【Inkscape】SVG 矢量图形编辑器岳涛泰山医院 原创于 2021-09-20 14:43:57一、Inkscape 简介1.1 Inkscape 概述Inkscape 是一款开源桌面应用程序可用于创建二维可缩放矢量图形。该程序以矢量绘图为主要功能同时可适配多种计算机图形处理场景。Inkscape 支持的操作类型多样可应用于图表、徽标、程序宣传材料、网络图形及剪贴簿等内容制作。该程序亦可用于游戏精灵绘制、横幅、海报与小册子设计还可用于网页设计原型绘制、印刷电路板布局绘制及激光切割设备轮廓文件生成。1.2 矢量图形的特性Inkscape 的原生文件格式为可缩放矢量图形SVG属于 W3C 制定的开放标准。矢量图形由离散点及点间连线构成在 Inkscape 环境中分别称为节点与路径。多数矢量图形工具支持创建基础几何图形此类图形本质为闭合路径包括圆形、正方形、三角形及其他多边形。计算机图像的另一主要类型为光栅图形其由像素网格构成而非路径集合。矢量图形可转换为光栅图形光栅图形向矢量图形的转换过程复杂度更高。光栅图形常用格式包括 JPG、PNG、BMP 及 TIF。数码照片通常以光栅图像形式生成适宜在 GIMP、darktable 等光栅图形工具中编辑。光栅图形可通过链接或嵌入方式导入 Inkscape用于矢量图形项目制作。矢量图形相较于光栅图形在缩放特性与文件体积方面存在差异该形式并非适用于全部应用场景。SVG 格式可被多数矢量图形工具读取同时兼容现代网页浏览器在网页设计及数字设计领域应用广泛。1.3 开源项目参与方式Inkscape 遵循 GPL 开源许可证发行隶属于 Software Freedom Conservancy 项目体系。该项目代码库于 2003 年从 SodiPodi 派生SodiPodi 则为 GNOME 插图应用程序 GILL 的分支版本由 Raph Levien 开发。Inkscape 官方网站提供参与渠道支持代码编写、网站维护、文档编制、示例图形制作、教程编写及项目推广等多种参与形式。二、Inkscape 下载与安装2.1 Inkscape 下载官方网站下载地址https://inkscape.org/release/1.1/windows/支持 exe、msi、7z 格式安装包下载exe 格式可直接执行安装流程。2.2 程序安装双击运行inkscape-1.1-x64.exe安装程序。2. 安装界面提供中文语言选项可直接完成本地化安装流程。3. 配置环境变量与桌面快捷方式按照引导完成后续安装步骤。三、Inkscape 使用3.1 首次启动3.2 官方教程 - 基础操作3.3 官方教程 - 图形绘制3.4 官方教程 - 高级操作3.5 官方教程 - 图像临摹3.6 官方教程 - 像素图临摹3.7 官方教程 - 书法笔触3.8 官方教程 - 路径插值3.9 官方教程 - 设计元素3.10 官方教程 - 操作技巧四、快捷键4.1 界面操作操作快捷键右侧属性面板显示与隐藏F124.2 元素位移操作操作快捷键单次位移 2 px方向键倍速位移Shift 方向键4.3 元素层叠调整操作快捷键上移一层PgUp下移一层PgDown移至顶层Home移至底层End4.4 元素选择操作操作快捷键下层元素选择Alt 鼠标点击下层元素移动Alt 鼠标拖动 / 方向键全选元素Ctrl A同类元素选择Ctrl Shift A4.5 画布操作操作快捷键画布平移Ctrl 方向键 / 鼠标中键 / 空格 鼠标移动画布缩放 / - / Ctrl 鼠标滚轮 / Ctrl 右键 / Shift 右键4.6 文件管理操作操作快捷键新建文件Ctrl N从模板新建文件Ctrl Alt N打开文件Ctrl O保存文件Ctrl S文件另存为Shift Ctrl S多文件窗口切换Ctrl Tab4.7 图形创建工具操作快捷键矩形R / F43D 盒子X / Shift F4圆形、椭圆、圆弧E / F5星形、多边形*螺旋线I / F9手绘线条P / F6贝塞尔曲线、直线B / Shift F6贝塞尔曲线断开节点Shift B贝塞尔曲线连接节点Shift J书法与笔刷轮廓C / Ctrl F6文字对象T / F8装饰对象A / Shift F3路径擦除Shift E封闭区域填充U / Shift F7渐变填充G / Ctrl F1图像取色D / F7流程图连接器O / Ctrl F2选择工具S / F1 / Esc节点编辑工具N / F2对象扭曲工具W / Shift F2测量工具M缩放工具Z / F34.8 约束按键操作过程中按下 Ctrl 键可锁定图形纵横比与旋转角度。4.9 对象变换选中对象后执行以下操作按下与可控制对象缩放默认步长为 2 px按下[与]可控制对象旋转默认角度为 15°配合 Ctrl 键缩放步长增大旋转角度固定为 90°配合 Alt 键可实现单屏幕像素级微调4.10 面板调用面板快捷键填充与描边Ctrl Shift F变换面板Ctrl Shift M对齐与分布Ctrl Shift A对象属性Ctrl Shift O符号面板Ctrl Shift Y文字与字体Ctrl Shift T五、基础操作5.1 矩形绘制矩形绘制时按下 Shift 键并拖动鼠标以光标位置为中心向四周扩展生成图形。按下 Ctrl 键并拖动鼠标可按照固定比例1:1、1:2、1:3 等生成矩形。5.2 椭圆绘制5.3 星形与多边形5.4 螺旋线绘制5.5 路径操作5.5.1 路径创建与编辑5.5.2 子路径与路径合并5.5.3 图形与文字转路径5.5.4 布尔运算5.5.5 路径偏移向内偏移Ctrl (操作流程① 将对象转换为路径② 按下 Ctrl D 复制路径修改填充颜色③ 多次按下 Ctrl (上层路径向内收缩下层路径显露。向外偏移Ctrl )操作流程与向内偏移一致仅快捷键不同。动态偏移Ctrl J操作流程① ② 步骤同前③ 按下 Ctrl J上层路径出现控制节点拖动节点可实现路径缩放。链接偏移Ctrl Alt J源路径修改时链接路径同步变化。操作流程① 将对象转换为路径设定源路径② 按下 Ctrl Alt J生成链接路径并修改填充颜色③ 移动链接路径查看节点结构④ 调整源路径节点链接路径同步更新。链接路径尺寸调整后仍可与源路径保持同步。源路径尺寸调整时链接路径同步缩放。链接路径节点可控制整体尺寸变化。执行对象转路径操作可解除链接关系转换为普通路径。5.5.6 路径简化Ctrl L该操作可减少路径节点数量。原始路径节点数72 个2. 首次简化Ctrl L剩余节点 25 个3. 二次简化Ctrl L剩余节点 21 个4. 三次简化Ctrl L剩余节点 19 个5. 多次简化后剩余节点 4 个6. 持续按住 Ctrl L最终剩余节点 2 个7. 放大查看最终简化形态5.5.7 描边转路径应用最终效果展示2. 操作流程① 绘制矩形并填充蓝色② 转换为路径调整下方节点形成等腰梯形③ 添加粗描边使边角呈现圆弧形态④ 执行描边转路径生成内外子路径⑤ 分离子路径删除内部路径复制并制作圆角梯形⑥ 为圆角梯形添加粗描边⑦ 删除多余节点截断描边路径⑧ 再次执行描边转路径添加节点并调整箭头形态⑨ 调整节点形成箭头两翼⑩ 组合图形完成制作。5.5.8 路径方向反转路径方向显示通过首选项开启轮廓显示模式2. 复制路径并执行路径反转操作3. 应用场景箭头图形制作5.5.9 路径插值基础操作流程① 绘制圆形与五角星设置对齐方式、填充与描边属性② 配置终点路径复制选项③ 设置插值指数参数④ 设置插值步数参数⑤ 选择插值方式⑥ 开启插值样式选项⑦ 启用实时预览功能。插值应用渐变纹理制作① 绘制折线并复制设置对齐与描边颜色② 选中路径执行插值操作设置步数为 200启用插值样式复制并拼接形成完整纹理。插值应用花瓶造型制作① 绘制曲线并复制执行水平翻转与对齐操作② 选中路径执行插值操作设置步数为 220。插值应用彩色花瓶制作插值应用衍射效果制作5.6 文字操作5.6.1 文字输入与编辑5.6.2 文字沿路径排列5.6.3 文字区域填充六、典型案例6.1 位图转 SVG 格式Inkscape基本操作与常用工具开发游戏的老王 原创于 2020-03-29 20:53:29基本几何体绘制通过快捷键R、E、Shift 8切换矩形、椭圆、星形工具在画布中拖动鼠标完成绘制。填充与描边设置矢量图形由填充区域与轮廓描边构成单个图形单元支持单一填充样式与单一描边样式。填充颜色设置鼠标左键单击调色板描边颜色设置鼠标中键单击调色板描边粗细调整界面左下角数值栏滚动鼠标滚轮常用快捷键视图操作命令快捷键说明视图平移鼠标中键-视图缩放Ctrl 鼠标滚轮可自定义修改为滚轮直接缩放视图旋转Ctrl 鼠标中键旋转角度可在界面右下角重置为 0工具调用命令快捷键说明选择工具S-节点编辑工具N-矩形工具R-椭圆工具E-星形工具*对应 Shift 8贝塞尔曲线工具BEnter 确认绘制ESC 取消Ctrl Z 撤销路径操作命令快捷键说明对象选择S-对象上移PageUp-对象下移PageDown-对象转路径Ctrl Shift C对象可转换为路径路径无法逆向转换为对象布尔运算布尔运算为矢量绘图的常用操作机制具体规则可参考专项说明文档。操作演示选择工具S单击图形可切换缩放与旋转编辑模式。节点编辑工具N参数化对象调整路径节点调整对象需先执行 Ctrl Shift C 转换为路径节点添加鼠标左键双击路径节点删除选中节点后按 Del 键矩形工具R椭圆工具E贝塞尔曲线工具B单击鼠标左键绘制直线段拖动鼠标绘制曲线段绘制完成按 Enter 键闭合路径鼠标返回起点并单击退出绘制按 ESC 键区域填充操作文件导出SVG 格式导出Ctrl S 保存或 Ctrl Shift S 另存为PNG 格式导出Ctrl Shift EInkscape PNG 转 SVG 矢量图流程阿发博客 原创于 2016-02-27 15:27:151. 导入 PNG 图片支持两种导入方式方式 1菜单 → 文件 → 打开方式 2直接将 PNG 文件拖入 Inkscape 窗口推荐不新建窗口导入后效果两种导入方式对比左打开右拖入2. 提取位图轮廓矢量化选中图片 → 按快捷键Shift Alt B或菜单路径 → 跟踪位图在弹出窗口中设置模式颜色Colors勾选栈扫描Stack scans、移除背景Remove background点击更新Update预览 →确定OK3. 矢量化结果与解组生成的矢量图会覆盖在原图上方。右键 →取消组合Ungroup可分离各颜色层。4. 设置 SVG 对象属性便于网页调用右键矢量图形 →对象属性Object Properties可设置ID、标签供 JS 操作交互事件onclick、onload 等5. 打开 XML 编辑器高级快捷键Shift Ctrl X或菜单 → 编辑 → XML 编辑器常见问题与解决问题 1SVG 在浏览器显示不全原因画布范围小于图形。解决方法 1菜单 → 文件 → 文档属性Shift Ctrl D调整页面尺寸/缩放内容方法 2在 XML 编辑器中修改width/height问题 2HTML 嵌入出现边框与滚动条边框HTML 中加border:0iframesrct.svgstylewidth:100%;height:100%;border:0/iframe滚动条SVG 源码中把width/height设为相对值如100%Reference【Inkscape】SVG矢量图形编辑器-CSDN博客https://blog.csdn.net/yuetaope/article/details/120390522inkscape将png图片转换为svg格式的矢量图_inkscape图片转矢量图教程-CSDN博客https://blog.csdn.net/chuanren1991/article/details/50755476【Inkscape】SVG矢量图形编辑器-CSDN博客https://blog.csdn.net/yuetaope/article/details/120390522Markdown / LaTeX 写作的要点与配置 - 知乎https://zhuanlan.zhihu.com/p/652074207