【Inkscape】SVG矢量图形编辑器

最新推荐文章于 2024-08-08 08:31:06 发布
最新推荐文章于 2024-08-08 08:31:06 发布
阅读量6.1k 收藏 70
点赞数 8
分类专栏： IDE 文章标签： 图像处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuetaope/article/details/120390522
版权

Inkscape目录

一、Inkscape简介

1.1 Inkscape简介

Inkscape是一个功能强大的开源桌面应用程序，用于创建二维可缩放矢量图形。 尽管Inkscape主要是一种插图工具，但它可用于各种计算机图形任务。
Inkscape可以完成的操作种类繁多，有时令人惊讶。 它用于制作图表，徽标，程序营销材料，网络图形，甚至用于剪贴簿。 人们还绘制游戏精灵，制作横幅，海报和小册子。 其他人则使用Inkscape来草拟Web设计模型，印刷电路板的详细布局或生成轮廓文件以发送到激光切割设备。

1.2 矢量图形的优点

Inkscape的本机文件格式可缩放矢量图形（SVG）是W3C的开放标准 。 矢量图形由点和点之间的线组成。 在Inkscape中，这些称为节点和路径。 大多数矢量图形工具使用户能够创建称为“基本体”或形状的路径。 形状实际上只是一条封闭的路径。 诸如圆形，正方形，三角形和其他多边形之类的形状都广泛用于创建矢量图形。 计算机图像的另一种主要类型是光栅图形。 光栅图形不是由路径组成，而是由像素网格构成。 矢量图形可以轻松转换为栅格图形，但是将栅格图形转换为矢量要困难得多。
栅格图形的常见文件格式包括JPG，PNG，BMP和TIF。 数码照片通常是作为光栅图像而生的，因此最好在光栅图形工具（例如GIMP或darktable）中对其进行编辑 。 但是，可以将光栅图形导入到Inkscape中，以便在较大的矢量图形项目中使用，方法是将其链接或直接将其嵌入到文件中。
使用矢量而不是光栅图形的主要优点归结为可伸缩性和文件大小，但是矢量方法并不适合所有用例。
几乎任何其他矢量图形工具都可以打开Inkscape用作本机文件格式的SVG格式，并且所有现代Web浏览器都可以查看SVG格式，这意味着SVG越来越多地用于Web和其他类型的数字设计中。

3.3 参与开源

Inkscape可通过GPL开源许可证获得，并且该项目是Software Freedom Conservancy的成员。
自2003年以来，一小撮不断变化的核心开发人员团队一直在构建Inkscape，当时其代码库是从SodiPodi派生的，而SodiPodi本身就是GILL（由Raph Levien创建的GNOME插图应用程序）的一个分支。 Inkscape网站邀请人们参与其中，并概述了人们可以参与的多种不同方式，例如编写代码本身，帮助网站，编写文档，生成示例图形，创建教程，以及通常有助于推广Inkscape无论何时何地。

二、Inkscape下载与安装

2.1 Inkscape下载

  1. 官网下载：https://inkscape.org/release/1.1/windows/
    在这里插入图片描述
    下载 exe/msi/7z文件均可，我就下载exe了，可以直接安装。
    在这里插入图片描述
    在这里插入图片描述

2.2 安装

  1. 双击 inkscape-1.1-x64.exe
    在这里插入图片描述
  2. 开源项目，还是中文的，比较意外，我还准备着研究英文呢，没戏了。
    在这里插入图片描述
  3. 添加环境变量，创建桌面快捷方式，其后一路 next 就 ok 了
    在这里插入图片描述

三、Inkscape使用

3.1 首次启动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 官方教程 - 基础

在这里插入图片描述

3.3 官方教程 - 形状

在这里插入图片描述

3.4 官方教程 - 高级

在这里插入图片描述

3.5 官方教程 - 临摹

在这里插入图片描述

3.6 官方教程 - 临摹像素图

在这里插入图片描述

3.7 官方教程 - 书法

在这里插入图片描述

3.8 官方教程 - 插值

在这里插入图片描述

3.9 官方教程 - 设计元素

在这里插入图片描述

3.10 官方教程 - 提示与技巧

在这里插入图片描述

四、快捷键

4.1 界面操作

操作快捷键
打开关闭右侧属性面板F12

4.2 元素方向移动

操作快捷键
方向移动2px上下左右键
方向倍速移动Shift + 方向键

4.3 元素层叠顺序移动

操作快捷键
上移一层PgUp
下移一层PgDown
移至顶层Home
移至底层End

4.4 元素选择

操作快捷键
选择下层元素Alt + 点击
移动下层元素Alt + 鼠标拖动 / 方向键
全选元素Ctrl + A
选择相同类型元素Ctrl + Shitf + A

4.5 画布操作

操作快捷键
平移画布Ctrl + 箭头 或 鼠标中键（点击滚轮） 或 空格+鼠标移动
画布缩放+ - 或 Ctrl+滑动滚轮 或 Ctrl+右键 Shift+右键

4.6 文件创建和管理

操作快捷键
新建文件Ctrl+N
从模板新建文件Ctrl+Alt+N
打开文件Ctrl+O
保存文件Ctrl+S
文件另存为Shift+Ctrl+S
多文件窗口切换Ctrl+Tab

4.7 形状创建

操作快捷键
矩形R 或 F4
3D盒子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 或 F3

4.8 限制键

执行操作时，加上Ctrl 键，可以锁定纵横比，旋转的角度

4.9 对象变换

|选择对象后：

  • < 和 > 可以控制缩放，默认缩放变化是 2px
  • [ 和 ] 可以控制旋转，默认旋转 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 路径偏移，放大或缩小

  1. 向内偏移 Ctrl + ( ，操作步骤：
    ①对象转换为路径；
    在这里插入图片描述

②Ctrl+D复制路径，填充另外的颜色；
在这里插入图片描述
③连续按Ctrl+(，向内偏移，上层路径向内收缩，露出下层路径。
在这里插入图片描述

  1. 向外偏移 Ctrl + ) ，操作步骤同向内偏移，只是快捷键不同

  2. 动态偏移 Ctrl + J ， 操作步骤：
    ①②同前
    ③按Ctrl+J，上层路径顶部出现一个节点，拉动节点可以放大/缩小路径，相当于向内偏移和向外偏移的合体
    在这里插入图片描述
    在这里插入图片描述

  3. 链接偏移 Ctrl + Alt + J ， 含义：源路径发生变动，链接路径同步变动。操作步骤：
    ①对象转换为路径，此时，蓝色为源路径；
    在这里插入图片描述

②不用复制路径，直接 Ctrl+Alt+J，会在蓝色源路径底层产生一个新的链接路径，填充橙色。注意，此时橙色为下层链接路径；
在这里插入图片描述

③移出链接路径，利用节点工具查看，源路径有若干节点，链接路径只有顶部一个节点
在这里插入图片描述
④调整源路径节点，链接路径会同步变动
在这里插入图片描述
链接路径调整尺寸后，依然可以和源路径同步变化
在这里插入图片描述
源路径调整尺寸，链接路径同步变化尺寸
在这里插入图片描述
链接路径顶部的一个节点为动态偏移节点，可以放大或收缩路径
在这里插入图片描述
如果想解除链接路径和源路径的同步关系，可以执行 对象转化为路径 命令，它就会转化为普通路径，出现若干节点。
在这里插入图片描述

5.5.6 路径简化，Ctrl + L ，减少路径上的节点数量

  1. 原图72个节点
    在这里插入图片描述
  2. Ctlr + L , 第一次简化,剩余25个节点
    在这里插入图片描述
  3. Ctlr + L , 第二次简化,剩余21个节点在这里插入图片描述
  4. Ctlr + L , 第三次简化,剩余19个节点
    在这里插入图片描述
  5. Ctlr + L , 第n次简化,剩余4个节点
    在这里插入图片描述
  6. 按住Ctlr + L 不松手, 直至不再简化，剩余2个节点
    在这里插入图片描述
  7. 放大看看简化到最后是个啥
    在这里插入图片描述

5.5.7 描边转路径应用实例

  1. 最终效果图
    在这里插入图片描述

  2. 操作步骤
    ①绘制矩形/正方形，填充蓝色
    在这里插入图片描述

②对象转路径，依次选中下方两个节点，按Shift键，向内侧移动4次，形成等腰梯形
在这里插入图片描述

③给等腰梯形添加一个较粗的描边，使描边四角形成圆弧
在这里插入图片描述

④描边转路径，在描边的内外侧各生成一个子路径
在这里插入图片描述

⑤分离子路径，解除群组，删除内部路径，只保留外部路径，填充蓝色，Ctrl+D复制一个，内部圆角梯形就做好了。
在这里插入图片描述
在这里插入图片描述

⑥利用上面复制的圆角梯形做箭头。给其中的一个添加一个较粗的描边，使其内外拐角处均为圆弧
在这里插入图片描述

⑦利用节点选择工具将不需要的节点删除，选中末端的两个节点，移除两个非端点节点间的线段，截断描边
在这里插入图片描述

⑧再次描边转路径，最右侧中间添加一个节点，向外拉出箭头的头部端点，然后在箭头的末端上下各增加一个节点
在这里插入图片描述
⑨拉出箭头的两翼
在这里插入图片描述
⑩拼合图形，完工。
在这里插入图片描述

5.5.8 路径反向

  1. 路径显示方向：首选项+显示轮廓
    在这里插入图片描述
  2. Ctrl+D 复制路径，执行路径 - 反向
    在这里插入图片描述
  3. 应用：绘制箭头
    在这里插入图片描述

5.5.9 路径扩展 - 插值

  1. 基本操作
    在这里插入图片描述

①绘制圆形和五角星，顶端对齐，设置填充，描边。注意，它们的起始节点都在右侧。
在这里插入图片描述

②是否勾选再制一份终点路径
在这里插入图片描述

③插值指数，上1，下-1
在这里插入图片描述

④插值步数，上5，下3
在这里插入图片描述

⑤插值方式，上1，下2
在这里插入图片描述

⑥是否勾选插值样式
在这里插入图片描述

⑦勾选实时预览
在这里插入图片描述

  1. 插值应用 - 渐变墙
    ①直线绘制一段折线，Ctrl+D复制，居中对齐，描边改成不同颜色
    在这里插入图片描述

②选中两条路径，扩展 - 从路径生成 - 插值， 步数改为200，勾选插值样式
在这里插入图片描述
复制拼接效果
在这里插入图片描述

  1. 插值应用 - 花瓶
    ①绘制一条曲线，Ctrl+D复制，对象-水平翻转，上下居中对齐
    在这里插入图片描述
    ②选中两条路径，扩展 - 从路径生成 - 插值， 步数改为220
    在这里插入图片描述

  2. 插值应用 - 彩色花瓶
    在这里插入图片描述

在这里插入图片描述
5. 插值应用 - 衍射
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.6 文字

5.6.1 文字输入/编辑

在这里插入图片描述

5.6.2 文字沿路径排列

在这里插入图片描述
在这里插入图片描述

5.6.3 文字填充到形状

在这里插入图片描述

六、典型案例

6.1 普通图片转SVG

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

岳涛@心馨电脑
关注
  • 8
    点赞
  • 踩
  • 70
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Editor SVG:SVG文件编辑器-开源
05-10
**软件要求**-安装了Java Runtime Environment 1.7，如果没有安装，则可以在下面找到：http://www.oracle.com/technetwork/java/javase/downloads/java-se-jre-7- download- 432155.html **关于SVG编辑器**该软件是用Java语言创建的，并允许以SVG格式编辑文件。 使用与Dreamweaver相似的布局，SVG编辑器使您可以在面板上自由绘制，也可以根据需要进行编码。 它具有自动完成功能和常规文本编辑功能。
矢量符号SVG开源编辑器inkscape操作手册英文版
02-24
Inkscape是一款开源、免费的矢量图形编辑器，主要用于处理SVG格式的文件。该软件功能强大，能够与Adobe Illustrator等商业软件相媲美，并支持跨平台运行。用户可以利用Inkscape进行精确绘图、对象操作、渐变填充、...
Inkscape教程
weixin_42332001的博客
06-08 429
按【Shift+S】，这样可以保证节点两侧的曲线相切，看起来比较平滑，此时节点为正方形（平滑点）“顶端弯曲路径”>点击“在画布上编辑”即可按【Ctrl】键拖动，松开【Ctrl】键可以调整手柄。工具栏选择“节点工具”，在想要增加节点的位置【双击】或【Ctrl+Alt+单击】可以增加节点。选中多条路径，菜单栏“路径”>"合并"，则多条路径成为合并后路径的【子路径】右侧的“路径效果”窗口中，点击“+”号按钮来添加新的路径效果。选中要断开位置的节点，按【Shift+B】，路径即可断开。【Ctrl+ )】路径变粗。
SVGEdit 开源项目教程
最新发布
gitblog_01072的博客
08-08 365
SVGEdit 开源项目教程 svgeditPowerful SVG-Editor for your browser项目地址:https://gitcode.com/gh_mirrors/sv/svgedit 项目介绍 SVGEdit 是一个基于 Web 的快速 JavaScript 驱动的 SVG 绘图编辑器，适用于任何现代浏览器。它基于强大的 SVG 画布 @svgedit/svgcanva...
Inkscape软件工具绘制SVG矢量图，并在VUE项目中引用.
xuboyuan11的博客
04-20 1799
Inkscape软件工具绘制SVG矢量图，并在VUE项目中引用.
SVG工具inkscape0.91
技术大杂烩
02-05 1510
SVG工具inkscape inkscape 开源的SVG绘制工具，也是一个很好的SVG转换工具，可以生成PNG，PDF等文件格式。 inkscape网站： www.inkscape.org 2015年1月30日发表最新版本 0.91 https://inkscape.org/en/news/2015/01/30/inkscape-version-091-is-released/
推荐开源设计工具：Inkscape - 强大的SVG编辑器
gitblog_00017的博客
05-16 1039
推荐开源设计工具：Inkscape - 强大的SVG编辑器 项目地址:https://gitcode.com/MBMIT/MBM-Artwork 1、项目介绍 Inkscape是一个开源的、跨平台的矢量图形编辑工具，它以SVG（Scalable Vector Graphics）文件格式为核心，提供了专业级的设计和绘图功能。这个项目旨在为全世界的艺术家、设计师和爱好者提供一个免费但功能强大的替代品，...
推荐开源项目：SVG-Editor - 纯前端SVG编辑器
gitblog_00015的博客
04-21 1413
推荐开源项目：SVG-Editor - 纯前端SVG编辑器 项目地址:https://gitcode.com/F-star/svg-editor 项目简介 SVG-Editor 是一个轻量级且功能强大的纯前端SVG图形编辑工具。它允许用户直接在浏览器中创建、编辑和保存SVG（可缩放矢量图形）文件，无需安装任何桌面应用。该项目基于Web技术，如HTML5 Canvas与SVG，实现了图形绘制、修改和...
一个完整的2维矢量图形软件源代码
12-05
二维矢量图形软件是一种能够创建、编辑和渲染基于数学方程定义的图形的应用程序。这种类型的设计工具在图形设计、工程制图、动画制作等...同时，这个项目也可以作为一个起点，进一步扩展为功能更全面的矢量图形编辑器。
Inkscape 编辑器绘制和图形-crx插件
04-07
Inkscape 编辑器的绘制和图形是一个网络扩展，创建或编辑矢量图形，如插图，图表，线条艺术，图表，标志和复杂的绘画。它是与Linux桌面应用程序Inkscape的集成，它是一个类似于Adobe Illustrator，Corel Draw，...
svg2dxf:将SVG从Inkscape转换为DXF文件以进行OpenSCAD
05-01
svg2dxf是从SVG到DXF文件格式的又一个转换器。 尽管该脚本应该相当通用，但它是在考虑Inkscape和OpenSCAD的情况下创建的。 用法 svg2dxf脚本使用2个参数（输入文件和输出文件）进行调用： svg2dxf input.svg ...
svg编辑器源码
12-24
/Method-Draw-master/method-draw/index.html启用查看；
矢量绘图软件(Inkscape)
09-24
好论文更需好配图。今天为大家例解一款简单粗暴却能绘出高端大气上档次的科研示意图软件——Inkscape。 
SVG画图工具，整套源码
04-23
SVG画图工具是一个基于网络的免费和开源矢量图形编辑器。 它可用于从Web浏览器内创建和编辑可缩放矢量图形（SVG）图像，而不需要额外的软件安装。
Inkscape教程.
11-21
本教程主要内容包括：画布浏览、文档管理、形状工具基础，图形选取、变形，群组、填充与轮廓、对齐和叠放。
拓展HTML：嵌入SVG矢量图形
## 1.1 什么是SVG矢量图形 在Web开发和图形设计领域，SVG代表可缩放矢量图形（Scalable Vector Graphics）。它是一种基于XML语法的图像格式，使用矢量表示图形，而不是像素。 与位图图像（如JPEG和PNG）不同，SVG...
老牌开源 SVG 编辑器 SVGEdit 是如何架构的？
fe_watermelon的博客
11-25 2849
大家好，我是前端西瓜哥。这次简单看看 SVGEdit 的架构。SVGEdit 的版本为 7.2.0。SVGEdit 一款非常老牌的 SVG 图形编辑器，用于编辑处理 SVG，start 数目前是 5.8k。。缺点是，提交很少，大概一个月一提交，最新版 7.2.0 也是 22 年 8 月的时候了。，很简单就能看到一些 UI bug。，这个 UI 好看很多。它 fork 了 SVG-Edit 并做了一些改造。Method-Draw 标榜简单易用，所以有意去掉了 SVGEdit 的一些高级功能，比如图层。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岳涛@心馨电脑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值