有没有在线工具可以测试SVG路径？

Question

有没有在线工具可以测试SVG路径？

50

我正在开发一个使用SVG路径的应用程序，希望能够看到我的路径被呈现出来。是否有类似JSFiddle这样的网站，可以将SVG路径粘贴进去进行验证并查看渲染效果？

编辑：我发现JSFiddle相当适合此项工作，只需选择Raphael.js、svg.js等框架即可。例如：http://jsfiddle.net/DFhUF/1393/

var paper = Raphael(0, 0, 300, 500);

paper.path("M75,75 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0")
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})

paper.path("M75,225 m-40,-50 h80, a10,10 0 0,1 10,10 v80 a10,10 0 0,1 -10,10 h-80 a10,10 0 0,1 -10,-10 v-80 a10,10 0 0,1 10,-10")
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})

这对于我的需求可能已经足够了，但如果有其他工具可以帮助测试和调试SVG路径的编辑，那就太好了。

- ericsoco

5

只需在浏览器中打开您的 .SVG 文件。或者我有什么遗漏吗？ - andy256

2

不要返回 .svg 文件、SVG 路径。这是一种实现方式，但谢谢你提供的建议。 - ericsoco

1

为什么不直接将您的路径放入SVG <path>元素中，并在浏览器或您选择的SVG查看器中查看呢？ - Thomas W

2

请注意，Webkit和Opera 12都会接受在SVG规范中无效的路径。 - Robert Longson

虽然这样做不太好，但我必须说这正是我一直在寻找的。非常感谢！ - Rade_303

4个回答

22

2023年4月更新

近年来，编程领域的工具变得更加丰富，无论是付费还是免费的，都可以用来优化、修改和创建svg。

我最喜欢的工具

https://yqnn.github.io/svg-path-editor/ - 令人难以置信的svg编辑器；免费
https://jakearchibald.github.io/svgomg/ - 令人惊叹的svg优化器；免费
https://figma.com/ - svg编辑器和更多功能；必须注册。

其他选择

- darcher

17

您可以使用我的辅助网页http://naiksoftware.github.io/svg.html

- Nickolay Savchenko

2

请描述一下帮助者网页如何帮助提问者。谢谢。 - Leonid Glanz

1

一个改进：当图标很大时，它无法适应可用空间。你只能看到它的角落。 - user2173353

1

编辑：在我发布这个回复之前，你的更新似乎没有显示出来...

将你的SVG路径粘贴到一个以.svg命名的文本文件中，并在浏览器中打开它。或者，创建一个像这样的小页面

<html>
  <head><title>My SVG test page</title></head>
  <body>
    <h1>My SVG test</h1>
    <object id="SVG" type="image/svg+xml" data="MySvgTest.svg" 
      width="1000" height="1500"/>
  </body>
</html>

并在浏览器中打开它 (请参阅入门指南)。它假设您的SVG文件名为MySvgTest.svg。

- andy256

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drew Noakes · Accepted Answer

如果您只想在浏览器上快速尝试SVG，并且不想麻烦地保存和加载文件，jsFiddle是一个很好的选择。

只需将以下代码用作模板：

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="your path data here"></path>
</svg>

我在这里创建了一个示例供参考。

jsFiddle还支持从左侧的下拉菜单中选择框架，如D3、PaperJs和Raphael。