Html Svg Editor Online
It was brought up at the SVG Summit the other day, wouldn’t it be nice when working with SVG to be able to work with it both ways at once?
- See and edit the code, and see the results visually
- See and edit the visual shapes, and see the code change
There might not be the perfect one true tool, but there are certainly some ideas getting there!
Anthony Dugois’s SVG Path Builder
Web Svg Editor
The powerful drawing tools allow you to create and edit vector graphics with simple and precise procedures. You can create basic geometric shapes: circle, ellipse, rectangle, text and, with pen and pencil, create any complex shape.
I’d embed the Pen here, but you really need a bit more space to play with it. Here’s a video of how it works:
- Vecteezy Editor Try our new FREE SVG editor! Designed to allow anyone to customize Vecteezy content before they download it, or create beautiful vector designs from scratch directly in your browser.
- SVG file viewer & editor online. Enter file name: Code.
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.
Yann Armelin’s SvgPathEditor
I’m adding this in May 2020, and I think it’s the closest one to perfect!
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.
Sten Hougaard’s SVG manipulate paths
A Pen by Mr. Hougaard has some pre-set curves that you can drag around and play with.
It doesn’t just give you the data, but also gives you a complete element. It’s also one-directional, no changing the code by hand.
Varun Vachhar’s XVG
This Chrome extension 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.
It’s really cool how you can invoke this anywhere. It would be great to see it evolve with interactive manipulation capabilities and show the output of those changes.
Bennett Feely’s Clippy
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.
Ana Tudor’s Cubic Bézier curve with SVG
This one I can embed right here:
No editing of the code directly, but it’s very clear from the interactions what parts of the code you are changing when you manipulate the SVG curve control points.
Brent Jackson’s Paths
Adding this one! I’m so glad it was pointed out because it seems like the closest thing to being able to edit on both sides: code and visually.
Html Svg Editor online, free
Graphics Software: Visual Only
Remember the point here is searching for UI that connects the idea of visual editing and code editing. Vector editing software like Adobe Illustrator is visual only in that there are tools to manipulate graphics visually, but you don’t know how that is affecting the code.
Svg Online Editor Free
You can export the code and look at it, but that’s not the realtime connection we’re exploring here.
Code Editors: Code Only
Code editors like CodePen help tie together code and visual output:
But it’s still a one-way street. You can’t do anything with that visual side other than look at it.
Awaiting the Perfect Tool
Lots of choices; nothing perfect! Nothing that I’ve seen, yet, ties together perfectly code editing and visual editing as equal first-class UI citizens.