I made an SVG editor over the weekend because I could.

0 favourites
  • 6 posts
From the Asset Store
Make your own platformer for both the web and mobile easy with this Santas Platformer Template, FULLY DOCUMENTED
  • https://whscience.org/whsvg/

    I sort of had a reason. I'm a teacher and in my state, students cannot use any service that requires giving any personal information including name or email address unless the district has a contract with the service. That means most free online tools are out. They are also on chromebooks so mot open-source software is out. I wanted my students to make SVG diagrams but the only option I found is svg-edit which they didn't like.

    So... I decided to make a very simple SVG editor for my students.

    It's done 100% in events. It doesn't use the SVG or XML plug-ins at all. Objects are invisible sprites with DrawingCanvas on top so that the stroke renders correctly. I probably should have used XML to read the SVG files, but I kept making progress using tokenat type expressions.

    After about 16 hours, here are the features:

    • Rectangle, Ovals, and Lines
    • Fill and Stroke Color
    • One style of dashed stroke and One style of marker-end arrow
    • Export SVG files compliant enough to open in browser or Inkscape
    • Open SVG files (100% working if made here. A little working if made elsewhere
    • Export png
    • Duplicating objects with Ctrl-C, Ctrl-V
    • Moving objects using drag and drop
    • Editing all supported properties e.g. rx and ry for ellipses using TextInput
    • Autosave current project EDIT: Actually working now
    • One line text objects

    On my to-do list:

    • Text Objects EDIT: 1 line text working
    • Undo/Redo
    • Select Multiple/Drag Select
    • Paths with multiple segments
    • Scale and rotate with touch
    • More png export options
    • zoom
    • More advanced color picker
    • Import of svg files that are structured a little differently

    Features I probably will never support include all other object types, embedded images, curved paths, gradients, import of anything that can't be made with this software.

    I recognize this is probably a waste of time and will never be better than existing solutions, but it was fun enough to make and I was surprised at how quickly and consistently I made progress.

    Not sure if anyone is interested in this type of thing. I am considering opening the source code. I have no idea if I do things the same way others do.

    Edit: 2022-11-21 text objects now support outline (sort of). The line object is working again. The last setting for fill and stroke are preserved. The object list has scroll buttons.

    Tagged:

  • Impressive! I didn't know Construct could build things like this too!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Imagine if Drawing Canvas could do splines.

  • Updated so that save and load are structured better. Naming of objects works much better. Changing the z order also works now.

  • Hello WildHairedScience,

    iam very interested in your tool.

    i played around with it. The Objects List on the right side is not scrollinng down the items, if i have to much obejcts created. iam not able to adjust Line thickness via mouse input on the sliderbar, via keyboard its working.

    Keep up the good work!

  • totoe Thanks for looking into it. I made some updates based on your feedback (along with a bunch of other bugfixes and improvements to the text function)

    The Objects List on the right side is not scrollinng down the items, if i have to much obejcts created.

    I added buttons to scroll up and down if the list gets too long. Ideally it would support touch scroll and/or scroll wheel but this was easier for now.

    iam not able to adjust Line thickness via mouse input on the sliderbar, via keyboard its working.

    I'm not entirely sure I understand. The sliderbar is for the line opacity. The line thickness field now updates when you click the scrolling buttons, so it is more responsive.

    Let me know if you find any other problems.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)