Creating an Advanced SVG Maker

About the Editor

General

Why

I'm trying to make a SVG editor with advanced functionality using PixiJs. I haven't found a SVG editor that I find simple, that allows users to animate components, and that exports simple SVGs - if you look at other SVG editors, they mostly export svgs by only utilizing paths. References:

Requirements:

  • Users should be able to create <svg> elements that contain all of the most commonly used <svg> elements: <circle>, <rect>, <ellipse>, <path>, <polyline>, <polygon>, <text>
  • Users should be able to edit the background color, border, width, height and viewBox of the <svg> element that is created with this editor. The positions should be put into the proper scale when the user submits the form.
  • Users should be able to utilize <radialGradient> and <linearGradient> elements for the background and border colors of the shapes.
  • Users should be able to add animation to the SVG editor by adding frames and editing the appearance of the SVG editor at those frames. The <animate> component should be utilized for this. If an element exists in one frame, but not others, then the element should be assigned an opacity of 0 for those other frames instead of being removed.
  • User should be able to add images eventually.
  • Add the ability to select and manipulate multiple elements at once.

Line Smoothing

Below are some options for smoothing the 'lines' (paths) drawn on the canvas ( Reference):

I ended up going with the Schneider Algorithm because it was easy to implement and the results looked pretty good. I still need to figure out a way to determine when a line vs when a bezier curve should be drawn, given that lines and bezier curves can be drawn in the <path> element. Note that we are drawing cubic, not quadratic bezier curves. Arcs can only be drawn using the path element, but I have decided to not to include that for now due to the fact that you would have to determine, for a path, when to draw a line vs bezier curve vs an arc and I haven't figured out a way to do that yet.

TO DO

  • Add the ability to edit the lines and fills of elements, delete elements, and move / resize / rotate / transform rotate. When the user selects an element, the element should appear selected
  • Add the ability to add different frames
  • There should be a number input for each frame that dictates when the frame should appear in seconds. The first frame should always appear at 0. Each number input should have a max value = 180 sec (the max length of the SVG animation at the current time).
  • Figure out when to draw straight lines vs when to draw bezier curves vs when to draw arcs when a user creates a path element.
  • Add the ability to add images.
  • Add undo and redo functionality.

Create the Scalable Vector Graphic

Frames:

10sec
Customize SVG Editor