SVGEdit

SVGEdit 是一个快速、基于网络、由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启动本地服务器
并使用支持的浏览器访问http://localhost:8000/src/editor/index.html
运行npm run build构建一个可以从您自己的Web服务器提供服务的包

我想为SVGEdit做贡献

谢谢！

SVGEdit由两个主要组件组成：

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

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

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

npm run lint检查您是否遵循standardjs规则（https://standardjs.com/rules）
npm run test运行一套Cypress测试（https://www.cypress.io/）

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

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

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

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

<head>
   <!-- 您需要在应用程序中的某个地方包含SVGEdit的CSS -->
  <link href="./svgedit.css" rel="stylesheet" media="all"></link>
</head>

<body>
  <!-- svgedit容器可以放置在DOM中的任何位置
       但它必须有宽度和高度 -->
  <div id="container" style="width:100%;height:100vh"></div>
</body>
<script type="module">
  /* 您需要调用Editor并将其加载到<div>中 */
  import Editor from './Editor.js'
  /* 有关可用选项，请参见文件`docs/tutorials/ConfigOptions.md` */
  const svgEditor = new Editor(document.getElementById('container'))
  /* 初始化Editor */
  svgEditor.init()
  /* 设置配置 */
  svgEditor.setConfig({
          allowInitialUserOverride: true,
          extensions: [],
          noDefaultExtensions: false,
          userExtensions: []
  })
</script>
</html>

我想构建自己的svg编辑器

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

安装画布：

npm i -s '@svgedit/svgcanvas'

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

import svgCanvas from '@svgedit/svgcanvas'

支持的浏览器

开发和持续集成是在 Chrome 环境中完成的。支持Chrome、FireFox和Safari的最新版本（意味着我们会尝试修复这些浏览器的错误）。

要支持旧浏览器，您可能需要使用较旧版本的软件包。但是，如果您需要支持特定版本的浏览器，请开启一个问题，以便项目团队可以决定是否应在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版本部署到：

⇈ 返回顶部