Существуют ли онлайн-инструменты для проверки путей SVG?

Я создаю приложение, которое использует пути SVG, и я хотел бы видеть мои пути. Есть ли сайт, скажем что-то вроде JSFiddle, на которое вы можете вставить путь SVG, проверить его и просмотреть его?

EDIT. Я обнаружил, что 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.

Ответы

Ответ 1

Если вы просто хотите быстро попробовать какой-то SVG в своем браузере и не возиться с сохранением и загрузкой файлов, jsFiddle - отличный вариант.

Просто используйте следующий код в качестве шаблона:

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

Я создал образец для работы здесь.

jsFiddle также поддерживает фреймворки, такие как D3, PaperJs и Raphael, из выпадающего списка с левой стороны.

Ответ 4

Изменить: ваше обновление почему-то не показывалось, прежде чем я разместил это сообщение.

Вставьте свой 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>

и откройте его в браузере (см. Primer). Предполагается, что ваш SVG находится в MySvgTest.svg