{"id":251751,"date":"2017-03-01T05:12:07","date_gmt":"2017-03-01T12:12:07","guid":{"rendered":"http:\/\/css-tricks.com\/?p=251751"},"modified":"2020-05-15T09:48:28","modified_gmt":"2020-05-15T16:48:28","slug":"tools-visualize-edit-svg-paths-kinda","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/tools-visualize-edit-svg-paths-kinda\/","title":{"rendered":"Tools to Visualize and Edit SVG Paths (Kinda!)"},"content":{"rendered":"\n

It was brought up at the SVG Summit<\/a> the other day, wouldn’t it be nice when working with SVG to be able to work with it both ways at once?<\/p>\n\n\n\n

  1. See and edit the code, and see the results visually<\/li>
  2. See and edit the visual shapes, and see the code change<\/li><\/ol>\n\n\n\n

    There might not be the perfect one true tool, but there are certainly some ideas getting there!<\/p>\n\n\n\n\n\n\n

    Anthony Dugois’s SVG Path Builder<\/a><\/h3>\n\n\n

    I’d embed the Pen<\/a> here, but you really need a bit more space to play with it. Here’s a video of how it works:<\/p>\n\n\n\n

    It shows you the code output, but you can’t adjust the code to see the changes back in the visual part. It still does an incredible job of showing you the different types of curve commands available in the SVG path syntax<\/a>.<\/p>\n\n\n

    Yann Armelin’s SvgPathEditor<\/a><\/h3>\n\n\n

    I’m adding this in May 2020, and I think it’s the closest one to perfect!<\/p>\n\n\n\n

    Copy and paste some path data in there and it just works. You can play with the visual area, dragging points and curve points around, or edit the path data itself, or, the path data broken out into a form with individual controls.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n

    Sten Hougaard’s SVG manipulate paths<\/a><\/h3>\n\n\n

    A Pen<\/a> by Mr. Hougaard has some pre-set curves that you can drag around and play with.<\/p>\n\n\n\n

    Varun Vachhar’s XVG<\/a><\/h3>\n\n\n

    This Chrome extension<\/a> doesn’t let you see the SVG code or let you manipulate anything, but it does show you the points and curve handles that make up an SVG anywhere you find one on the web, giving you a bit of a behind the scenes look.<\/p>\n\n\n\n

    Bennett Feely’s Clippy<\/a><\/h3>\n\n\n

    Clippy isn’t SVG, it’s for CSS clip-path, but I think you’ll easily see how this kind of UI would be very cool for SVG manipulation and seeing the code as you do things.<\/p>\n\n\n\n