SVGEdit——SVG在线编辑器

最新推荐文章于 2025-05-22 13:55:15 发布

生财

最新推荐文章于 2025-05-22 13:55:15 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：编辑器 javascript 前端

本文链接：https://blog.csdn.net/daonidedie/article/details/130871193

SVGEdit是一个基于Web的JavaScriptSVG编辑器，支持在任何现代浏览器中运行。用户可以通过NPM安装和构建项目，本地启动后通过浏览器访问。文章提供了集成到Web应用的示例代码，包括引入CSS、创建编辑器容器以及初始化和配置编辑器的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资料

git地址：

GitHub - frangoteam/svgedit: Powerful SVG-Editor for your browser

视频搬运：

Introduction to SVG-edit（2.2）_哔哩哔哩_bilibili

demo示例：

SVG-edit

简介

SVGEdit 是一个快速的，基于Web的，JS实现的，SVG画图编辑器，可工作于任何现代浏览器。SVGEdit基于强大的SVG画布库@svgedit/svgcanvas。

当前版本为V7.

本地安装步骤：

从GitHub下载或克隆
npm i安装
npm run build --workspace @svgedit/svgcanvas，构建svgcanvas依赖
npm run start ，执行测试
浏览器访问http://localhost:8000/src/editor/index.html
npm run build ，构建项目，然后部署web服务（Nginx）

集成到web应用

<html><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 positionned 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>