Icon rendered incorrectly

[luebbe]

Hi Folks,

the following icon is rendered incorrectly using the Delphi SVG Engine: icon-Cut.zip

Result (ignore the colors):

[Rik69]

Same problem for me. I developped my app with v2.1 and every icons rendered correctly. With version 2.2, there is extra lines. I had to switch to D2D. Cairo does a great job, but too many dlls to ship with the application.

[Rik69]

Hi,

In my case, icons does not render correctly using components in my app. I changed the source to go with Direct2D.

I attached 2 icons that renders incorrectly with GDI+.

large.zip

[luebbe]

I found out that the icon is rendered correctly when I use an older version. In my case I had run svgcleaner on my icon set which has brought it into the state above. Since the other engines render it correctly, it surely is a bug in the Pascal SVG Engine, but fo now I have reverted to the older version.

[luebbe]

I attached 2 icons that renders incorrectly with GDI+.

I don't see any obvious problem with the "help" icon, but "back" looks wrong using the Pascal SVG Engine

[Rik69]

Sorry,

I should send you the cloud icon. Effectively. Help is ok.

Erik

De : Lübbe Onken notifications@github.com Envoyé : 9 novembre 2020 09:55 À : EtheaDev/SVGIconImageList SVGIconImageList@noreply.github.com Cc : Rik69 erik.paquet@videotron.ca; Comment comment@noreply.github.com Objet : Re: [EtheaDev/SVGIconImageList] Icon rendered incorrectly (#138)

I found out that the icon is rendered correctly when I use an older version. In my case I had run svgcleaner https://github.com/RazrFalcon/svgcleaner/issues on my icon set which has brought it into the state above. Since the other engines render it correctly, it surely is a bug in the Pascal SVG Engine, but fo now I have reverted to the older version.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/EtheaDev/SVGIconImageList/issues/138#issuecomment-724063 875 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA6WQOF5TEXPWPCWVVYNITSO 77FXANCNFSM4THFGTAA . https://github.com/notifications/beacon/AAA6WQOFSMP4UC53HFI6VHDSO77FXA5CNFS M4THFGTAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOFMUFNAY .gif

[carloBarazzetta]

I reverted the latest changes @pyscripter made to SVG.pas and SVGPath.pas causing this problem. I don't have time now to see where the problem is.

[Rik69]

Reverted version still have the problem.

[luebbe]

Looking at the drawing results could it be a sign error?

[Rik69]

Not sure, but problems occur mostly with triangles.

De : Lübbe Onken notifications@github.com Envoyé : 11 novembre 2020 13:38 À : EtheaDev/SVGIconImageList SVGIconImageList@noreply.github.com Cc : Rik69 erik.paquet@videotron.ca; Comment comment@noreply.github.com Objet : Re: [EtheaDev/SVGIconImageList] Icon rendered incorrectly (#138)

Looking at the drawing results could it be a sign error?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/EtheaDev/SVGIconImageList/issues/138#issuecomment-725591 667 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA6WQNKRNFYXOHWZ2PVJC3SP LKZFANCNFSM4THFGTAA . https://github.com/notifications/beacon/AAA6WQK6YRU6Y3JYG6JF4PTSPLKZFA5CNFS M4THFGTAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOFM72M4Y .gif

[pyscripter]

@carloBarazzetta Too quick to reverse changes. Please reinstate the previous version.

The issue relates to the handling of S and s path commands. The documentation states that

S produces the same type of curve as earlier—but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the Q command would have produced with the same parameters.

The bold part was missing

Fix for icon-cut. In procedure TSVGPathCurve.Read of SvgPath.pas replace the handling of commands S and s with

  else if (Command = 'S') or (Command = 's') then
  begin
    FControl2X := ValueList[Position];
    FControl2Y := ValueList[Position + 1];
    FStopX := ValueList[Position + 2];
    FStopY := ValueList[Position + 3];
    Inc(Position, 4);

    if Previous is TSVGPathCurve then
    begin
      FControl1X := FStartX + (FStartX - TSVGPathCurve(Previous).FControl2X);
      FControl1Y := FStartY + (FStartY - TSVGPathCurve(Previous).FControl2Y);
    end
    else
    begin
      FControl1X := FStartX;
      FControl1Y := FStartY;
    end;

    if Command = 's' then
    begin
      FControl2X := FStartX + FControl2X;
      FControl2Y := FStartY + FControl2Y;
      FStopX := FStartX + FStopX;
      FStopY := FStartY + FStopY;
    end;
  end

[pyscripter]

And a fix for the history-circle-back-blue.svg

Replace TSVGPathMove.AddToPath with

procedure TSVGPathMove.AddToPath(Path: TGPGraphicsPath);
begin
  //Path.CloseFigure; <- remove
  Path.StartFigure;
end;

Now this is a bit puzzling.
I may have added the CloseFigure to fix something else and I do not recall what. @carloBarazzetta Could you please check when this was added? So this needs a bit of testing to check it does not break other Svgs. The move command is very common and I am surprised this issue has not appeared in other svgs.

[pyscripter]

Update on last fix. CloseFigure is needed when fill <> "none"

Please change TSVGPathMove.AddToPath to

procedure TSVGPathMove.AddToPath(Path: TGPGraphicsPath);
begin
  if Assigned(Parent) and (Parent is TSvgPath) and
    (TSvgPath(Parent).FillColor <> SVG_NONE_COLOR)
  then
    Path.CloseFigure;
  Path.StartFigure;
end;

which I think works well on all cases.

[carloBarazzetta]

Thanks @pyscripter, in those weeks I have some problems working ... https://github.com/EtheaDev/SVGIconImageList/issues/142 Can you make a pull request with these changes? Thanks!

[luebbe]

I was wondering if we could create a set of unit tests that draw svgs using the different engines and compare the resulting bitmaps afterwards. Would that work? Can we assume that two svg engines produce an identical bitmap? This could help to discover if changes to one engine break things.

[pyscripter]

@luebbe Good idea. But how do you unit test how an svg should look? There is a set of svgs used for checking confomance: https://github.com/w3c/svgwg/tree/master/master

[pyscripter]

@luebbe I don't have an active fork and overly busy right now. Would you be able to reverse the reversing commit and make the above changes? Do they resolve the issue you had?

[luebbe]

@pyscripter I'll give it a go, but no promises for today.

[luebbe]

@pyscripter Nice work! "icon-cut" is rendered correctly as well as @Rik69 's "back" icon. PR created