ImageEn for Delphi and C++ Builder ImageEn for Delphi and C++ Builder

 

ImageEn Forum
Profile    Join    Active Topics    Forum FAQ    Search this forumSearch
Forum membership is Free!  Click Join to sign-up
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 ImageEn Library for Delphi, C++ and .Net
 ImageEn and IEvolution Support Forum
 Export to SVG
 New Topic  Reply to Topic
Next Page
Author Previous Topic Topic Next Topic
Page: of 2

Ken Randall

33 Posts

Posted - Mar 19 2022 :  07:53:48  Show Profile  Reply
Hi,

How can I do this so that it is not a base64 image?

Thanks,

Ken

Ken R

xequte

38610 Posts

Posted - Mar 20 2022 :  18:55:16  Show Profile  Reply
Hi Ken

Is there a reason you don't you want it base64 encoded?

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 21 2022 :  06:10:43  Show Profile  Reply
Hi Nigel,

Sorry, what I meant is a rescalable SVG rather than one that just includes the image as a bitmap.

Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 21 2022 :  15:36:39  Show Profile  Reply
Hi Ken

If you build the SVG using vectorial layers, i.e. text, shapes, lines, etc:

https://www.imageen.com/help/TIELayer.html

Then it will be scalable. If you use a bitmap, then naturally it will only stretch.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 22 2022 :  05:28:10  Show Profile  Reply
Hi Nigel,

Is this a possible enhancement to ImageEn? There are lots of online sites that attempt to create an SVG from a PNG file including ImageMagick.

Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 23 2022 :  02:27:09  Show Profile  Reply
Hi Ken

I don't believe that could be done very well. Can you link to an example of what you mean.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 23 2022 :  05:40:24  Show Profile  Reply
Hi Nigel,

This is one of them: https://convertio.co/png-svg

The result is only in black and white but it is a start.

Regards,


Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 23 2022 :  17:29:52  Show Profile  Reply
Huh, that is not actually terrible.

I suppose if I needed to do it, the process would be something like:

- reduce the colors in the image
- find all the color regions and output them to paths

Of course, it would need a lot of optimizing to get it to perform agreeably.

Have you tried using Potrace and/or AutoTrace via ImageMagick to see what that give you? Your app could always do it that way in the background.


ImageMagick used to just convert the image to a series of pixel circles. But that creates huge slow files:

const
  SVG_Opening_Tag   = '<svg width="%dpx" height="%dpx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">';
  SVG_Closing_Tag   = '</svg>';
  SVG_Circle_Tag    = '<circle cx="%d" cy="%d" r="1" fill="rgb(%d,%d,%d)"/>';
var
  ss : TStringList;
  x, y: Integer;
  pPix: PRGB;
begin
  ss := TStringList.create();
  try
    ss.Add( format( SVG_Opening_Tag, [ bmp.Width, bmp.Height ]));

    for y := 0 to bmp.Height - 1 do
    begin
      pPix := bmp.ScanLine[ y ];
      for x := 0 to bmp.Width - 1 do
      begin
        ss.Add( format( SVG_Circle_Tag, [ x, y, pPix^.R, pPix^.G, pPix^.B ]));
        inc( pPix );
      end;
    end;
    ss.Add( SVG_Closing_Tag );
    ss.SaveToFile( DestFilename );
  finally
    ss.Free;
  end;
end;


Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 24 2022 :  10:01:45  Show Profile  Reply
Hi Nigel,

Re: Have you tried using Potrace and/or AutoTrace via ImageMagick to see what that give you? Your app could always do it that way in the background.

Is there an existing demo that I can add this to?

Regards,


Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 24 2022 :  16:49:28  Show Profile  Reply
Hi Ken

Not that I know of, but there is plenty of example code on the internet showing how to call ImageMagick from the command line.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 25 2022 :  00:37:23  Show Profile  Reply
Hi Nigel,

I tried the code you gave. The original png is 106 KB and the resultant svg is 14 MB. On the good side it looks perfect!

Regards

Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 25 2022 :  20:16:42  Show Profile  Reply
Hi Ken

Unfortunately it is a very inefficient way to do it and not truly vector (although it does "scale"). You should not use that method.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 26 2022 :  06:29:32  Show Profile  Reply
Hi Nigel,

Any ideas on how this can be improved?

Regards,


Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 27 2022 :  05:28:13  Show Profile  Reply
Hi Ken

Only to try using Potrace and/or AutoTrace via ImageMagick, or something similar.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 27 2022 :  12:39:59  Show Profile  Reply
Hi Nigel,

Potrace, with the default settings, creates a comparable svg to the one produced by convertio.co but slightly larger.

Regards,

Ken R
Go to Top of Page

Ken Randall

33 Posts

Posted - Mar 29 2022 :  05:58:18  Show Profile  Reply
Works even better if I use mkbitmap first. Now for the next bit. How do I do this for each color in my png combining them into one svg the same as Inkscape does?

Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Mar 29 2022 :  15:49:14  Show Profile  Reply
Hi Ken

You could:

1. Reduce the number of colors in the image to something manageable (use a solid dithering type):

https://www.imageen.com/help/TImageEnProc.ConvertTo.html


2. Get the array of colors:

https://www.imageen.com/help/TImageEnProc.CalcImagePalette.html


3. Create a copy of the image containing only each color (e.g. by making a copy of the bitmap, iterating the bitmap scanlines and excluding each pixel that does not match the current color):

https://www.imageen.com/help/TIEBitmap.ScanLine.html


4. Concatenate the content of all the SVG files (using text methods)


It would be slow, though, of course.

Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Apr 02 2022 :  08:55:24  Show Profile  Reply
Hi Nigel,

I'm struggling with how to do 3. Create a copy of the image containing only each color (e.g. by making a copy of the bitmap, iterating the bitmap scanlines and excluding each pixel that does not match the current color).

Could you please give me an example of how I would use it in conjunction with step 2.

Thanks,

Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Apr 02 2022 :  21:19:11  Show Profile  Reply
Hi Ken

// Make all pixels white that don't match a color
var
  x, y: Integer;
  pPix: PRGB;
begin
  for y := 0 to ImageEnView1.IEBitmap.Height - 1 do
  begin
    pPix := ImageEnView1.IEBitmap.ScanLine[ y ];
    for x := 0 to ImageEnView1.IEBitmap.Width - 1 do
    begin
      if ( pPix^.R <> MyColor.R ) or ( pPix^.G <> MyColor.R ) or ( pPix^.B <> MyColor.R ) then
      begin
        pPix^.R := 255;
        pPix^.G := 255;
        pPix^.B := 255;
     end; 

      inc( pPix );
    end;
  end;
  ImageEnView1.Update();
end;



Nigel
Xequte Software
www.imageen.com
Go to Top of Page

Ken Randall

33 Posts

Posted - Apr 03 2022 :  09:51:24  Show Profile  Reply
Hi Nigel,

This ends up with very big files more-or-less the equivalent of doing ss.Add( format( SVG_Circle_Tag, [ x, y, pPix^.R, pPix^.G, pPix^.B ])) for each pixel.

Is there any way you can think of improving it?

Thanks,

Ken R
Go to Top of Page

xequte

38610 Posts

Posted - Apr 03 2022 :  18:57:30  Show Profile  Reply
Hi Ken

The more colors you include, the closer it will come to the pixel-as-ellipse result. You want very few colors, e.g. less than 64, and ideally something like 16. Other than that, I have no other suggestions,

Nigel
Xequte Software
www.imageen.com
Go to Top of Page
Page: of 2 Previous Topic Topic Next Topic  
Next Page
 New Topic  Reply to Topic
Jump To: