README

SVGEdit

SVGEdit 是一个快速、基于 Web、由 JavaScript 驱动的 SVG 绘图编辑器，适用于任何现代浏览器。 SVGEdit 基于强大的 SVG 画布 @svgedit/svgcanvas

贡献

SVGEdit 是最受欢迎的开源 SVG 编辑器。它是由一支出色的开发者团队在 13 年前开始的。不幸的是，该产品相当长一段时间没有维护。我们决定通过刷新许多方面来给这个工具带来新的生命。

如果您想贡献，请通过创建问题或讨论来告诉我们。

我想使用 SVGEdit

感谢 Netlify，您可以通过您喜欢的浏览器访问以下构建

在 V7 之前

我们建议使用 V7 版本，但对于旧浏览器或一些已弃用的功能，您可能需要访问 SVGEdit 的旧版本。

额外提示：您可以使用 unpkg 尝试 NPM 上发布的版本，例如，使用版本 3.2.0

https://unpkg.com/svgedit@3.2.0/editor/svg-editor.html

我想在我的环境中托管 SVGEdit

如果您想托管 SVGEdit 的本地版本，请按照以下说明操作

从 github 克隆或复制存储库内容
运行 npm i 以安装依赖项
运行 npm run build --workspace @svgedit/svgcanvas 以本地构建 svgcanvas 依赖项
要测试，您可以运行 npm run start 以启动本地服务器
然后使用支持浏览器访问 https://:8000/src/editor/index.html
运行 npm run build 以构建您可以从自己的 Web 服务器提供的捆绑包

我想为 SVGEdit 贡献

谢谢！

SVGEdit 由两个主要组件组成

"svgcanvas"，负责底层 SVG 编辑器。它可以用来构建自己的编辑器
"editor"，负责编辑器 UI（菜单、按钮等）

您应该在 github 环境中分叉 SVGEdit，并按上述说明在本地安装 SVGEdit。

在您提交 PR 之前，请确保您在本地运行

npm run lint 以检查您是否遵循标准js规则 (https://standardjs.com/rules) 的 linter
npm run test 以运行一系列 Cypress 测试 (https://www.cypress.io/)

如果您打算定期贡献，请告诉我们，我们可以将您添加到维护者团队。

我想将 SVGEdit 集成到我的 Web 应用程序中

V7正在显著改变集成和自定义SVGEdit的方式。您可以通过查看index.html来了解如何将一个div元素插入到您的HTML代码中，并将编辑器注入到div中。

警告：此div可以定位在DOM的任何位置，但它必须有数值宽度和高度（即不是'auto'，这是当div被隐藏时发生的情况）

<head>
   <!-- You need to include the CSS for SVGEdit somewhere in your application -->
  <link href="./svgedit.css" rel="stylesheet" media="all"></link>
</head>

<body>
  <!-- svgedit container can be positioned anywhere in the DOM
       but it must have a width and a height -->
  <div id="container" style="width:100%;height:100vh"></div>
</body>
<script type="module">
  /* You need to call the Editor and load it in the <div> */
  import Editor from './Editor.js'
  /* for available options see the file `docs/tutorials/ConfigOptions.md` */
  const svgEditor = new Editor(document.getElementById('container'))
  /* initialize the Editor */
  svgEditor.init()
  /* set the configuration */
  svgEditor.setConfig({
          allowInitialUserOverride: true,
          extensions: [],
          noDefaultExtensions: false,
          userExtensions: []
  })
</script>
</html>

我想构建自己的svg编辑器

您可以直接使用底层的canvas，并在您的应用程序中使用它，使用您最喜欢的框架。请参阅demos文件夹中的示例或svg-edit-react存储库。

要安装canvas

npm i -s '@svgedit/svgcanvas'

然后您可以在应用程序中导入它

import svgCanvas from '@svgedit/svgcanvas'

支持的浏览器

开发和持续集成是在一个Chrome环境中完成的。支持Chrome、Firefox和Safari的最新版本（即我们将尝试修复这些浏览器的bug）。

要支持旧浏览器，您可能需要使用该包的较旧版本。但是，如果您需要支持您浏览器的特定版本，请打开一个问题，以便项目团队决定是否在SVGEdit的最新版本中支持它。

基于React的示例扩展

使用一个React组件来构建SVGEdit扩展。

要激活

从扩展文件夹"src/editor/react-extensions/react-test"中的"npm run build"开始，以创建扩展的捆绑包。
修改"index.html"以将扩展作为userExtensions激活

svgEditor.setConfig({
          allowInitialUserOverride: true,
          extensions: [],
          noDefaultExtensions: false,
          userExtensions: ['./react-extensions/react-test/dist/react-test.js']
        })

进一步阅读和更多信息

参与讨论
查看AUTHORS文件以了解作者。
StackOverflow小组。

托管

SVGEdit版本部署到

⇈ 返回顶部

svg-edit / svgedit

维护者

详情