Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import SVG #266

Open
Alecaddd opened this issue Jan 17, 2020 · 4 comments
Open

Import SVG #266

Alecaddd opened this issue Jan 17, 2020 · 4 comments

Comments

@Alecaddd
Copy link
Member

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 Alecaddd added this to the v1.1 milestone Jan 17, 2020
@Alecaddd Alecaddd added this to To do in Canvas Library via automation Jan 17, 2020
@ryanprior
Copy link

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

@Alecaddd
Copy link
Member Author

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

@esodan
Copy link

esodan commented Jan 17, 2020

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/

@albfan
Copy link
Collaborator

albfan commented Jan 17, 2020

@esodan we already play with it in akiraux/libgtkcanvas#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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Canvas Library
  
To do
Development

No branches or pull requests

4 participants