SVG to PNG: Now handles negative viewbox values & Opaque param Thx Tomxe

[Boleeman]

Version 1.2 now handles negative viewbox values & Opaque param Thx Tomxe

Also found another Win32 Converter using TBgrabmp  (please read the later reply)


Hi All.

I tried Tomxe's Svg2Png from https://github.com/Xelitan/svg2png

It uses TBgrabmp from the command-line.

The command-line takes 3 arguements like: SvgToPng penrose-tiling.svg tester.png 600

I get a saved png, but the converted png is only part of the original svg.

Not sure why?

Attached below is a Lazarus 32bit test project.

[lainz]

SVG files has a canvas rectangle, like a paper, check with Inkscape if the drawing is inside that rectangle.

[Tomxe]

Viewbox is not typical:
viewBox="-80 -80 160 160"
Perhaps BGRABitmap does not handle negative values.

[Boleeman]

Looks like you were both correct.

I tried a few other svg files and they worked OK. Attached is the output from another test svg called "couch.svg"

Wonder if there is a way using Lazarus to change the svg Viewbox and the coordinates in the svg canvas rectangle programmatically to correct the non-typical Viewbox svgs?





I ended up doing this using the web page svgedit app:

I went to https://svgedit.netlify.app/editor/index.html   and opened the "penrose-tiling.svg"
Then I dragged the svg picture into the canvas rectangle and saved
Lastly I converted the penrose svg to png using the Tomxe svg to png converter.

[Boleeman]

Found another Win32 Converter using TBgrabmp by Jan-Erich Schirrmacher on GitHub

https://github.com/Atomek61/svgtopng


You just set the sizes and then drag and drop the svg file.

from the github page:
This tool lets me just drag some .svg-images from the Windows explorer onto the apps main window. It automatically saves them in a subfolder called img32, when I entered 32 as a size. You can enter multiple sizes, i.e. 20,32,48 to let SVGToPNG-Converter create multiple files.

[Tomxe]

Does this program show uncut image penrose-tiling.svg?

[Boleeman]

Tomxe, I did a test with that with that version viewBox="-80 -80 160 160"

I set the png size to 200 pixels. It seemed to shift the picture on the canvas a bit, but not correctly.

Setting the size of the png to 160 pixels (which is the veiwbox upper limit) produced a perfect svg to png conversion.

Attached are the results below.

Also noticed a cumulative error on Windows10:
The form gets bigger and the controls keep on moving to the left and getting smaller with each use of the program.

I fixed the resize problem by adding:

Code: Pascal  [Select][+][-]

1. procedure TMainDialog.FormCreate(Sender: TObject);
2. begin
3.  
4.   Constraints.MinWidth := Width;
5.   Constraints.MinHeight := Height;
6.   Constraints.MaxWidth := Width;
7.   Constraints.MaxHeight := Height;
8.  
9.   Scaled := False;
10.  
11.   if Application.HasOption('f', '') then begin
12.     OpenDialog.InitialDir := Application.getOptionValue('f');
13.   end;
14. end;

I just mentioned that source to others Lazarus forum members, just in case they wanted to try it out.

[Boleeman]

Also added TCheckbox to select a transparent or Opaque background.

I sent Jan-Erich Schirrmacheran an email ( from https://github.com/Atomek61/svgtopng) with the update.

[Tomxe]

New version of https://github.com/Xelitan/svg2png
1) handles negative viewbox values
2) added Opaque param

svg2png input.svg output.png 96 0 <--- transparent background
svg2png input.svg output.png 96 1 <--- white background
svg2png input.svg output.png 96 #FF0000 <--- red background

96 means dpi

[Boleeman]

Thanks Tomxe for that latest update to handle negative viewbox values and added Opaque param.

Did a test of all 3 but:

svg2png input.svg output.png 96 #FF0000 <--- gives blue background and not red background

I was also not aware of svgz and svg.gz formats.

Lastly might be nice to possibly add svg to icon conversion to the Supported: bmp,jpg,png,ppm'

Always impressed with your skills. Appreciate the update.