Akira icon indicating copy to clipboard operation
Akira copied to clipboard

Import SVG

Open Alecaddd opened this issue 5 years ago • 4 comments

Expected Behavior

When importing an SVG file, the software should automatically convert the image into an SVG string and create a new Goo.CanvasPath in order to keep that element editable and scalable.

Current Behavior

SVGs are getting imported as regular raster images.

Possible Solution

Goo.CanvasPath and Goo.CanvasPathModel allow loading SVG data as string, so we need a parser to convert an imported SVG into a string, and generate a path we can edit.

Most likely this will happen once we can handle groups, as most SVGs come with multiple shapes inside, so for each shape a Path should be created, and the entire SVG should be converted into a folder group.

Do we need to use any particular library like librsvg, gsvg, or similar?

Alecaddd avatar Jan 17 '20 01:01 Alecaddd

What kind of a string does the parser need to emit?

ryanprior avatar Jan 17 '20 04:01 ryanprior

Standard SVG path data like M20,100 C20,50 100,50 100,100 S180,150 180,100. Check this for reference: https://www.w3schools.com/graphics/svg_path.asp

Alecaddd avatar Jan 17 '20 06:01 Alecaddd

GSVG makes you parse your SVG files to a GObject based model easy! https://gitlab.com/pwmc/gsvg

Seeking on valadoc.org see Goo namespace have a 1 to 1 relation to SVG shapes, so this could be the way:

  1. Create a new set of objects keeping a reference to a Goo and a GSvg ones, providing the Goo interface and keep both Goo and GSvg in sync, at the end you can use this object in your UI, by using the Goo object, and have a clean export to SVG, using the GSvg shape.

  2. Derive from Goo objects and add a reference to a GSvg object, you should keep it in sync in order to make export works.

  3. Create an Exporter object, that will take your Goo object and translate its properties to GSvg objects created on the fly and the result can be used to export to SVG, this provides less memory but more time on export.

Keep librsvg out here. It is a raster library to produce images from SVG and there is no API to create the shapes. GSvg has been created with the W3C recomendation's API in mind https://www.w3.org/TR/SVG11/

esodan avatar Jan 17 '20 15:01 esodan

@esodan we already play with it in https://github.com/akiraux/libgtkcanvas/pull/27, so I think we can do the mapping now we have our own derived Akira Objects from goocanvas.

@Alecaddd time to import our motorcycle!

albfan avatar Jan 17 '20 17:01 albfan