There are two issues:
Consider for example the following transform from the lion.svg:

<g transform="rotate(10) scale (1) translate (100,10)">

The first issue is that due to the space after translate, the translate function is not applied.
The second and more serious issue is that the 3 transformations are applied in the wrong order.

Svgs paint radialGradient colors from the inside to the outside. However the TGPPathGradientBrush used by SVG to paint radiantGradient fill paints colors from the outside to the center. The colors need to be reversed in TSVGRadialGradient.GetBrush.

I will submit a PR to fix this and the other errors.

Test with the attached svgs

Gradient.zip

In SvgParse.pas there is the following code:

function GetFactor(const SVGUnit: TSVGUnit): TFloat;
begin
  case SVGUnit of
    suPX: Result := 1;
    suPT: Result := 1.25;
    suPC: Result := 15;
    suMM: Result := 10;
    suCM: Result := 100;
    suIN: Result := 25.4;
    suEM: Result := 1;
    suEX: Result := 1;
    suPercent: Result := 1;
    else
      Result := 1;
  end;
end;

The conversion from pt to px should be 1.3333 = 4/3 (96/72) instead of 1.25. I have not checked the other conversions.

On the demo after changing to any theme memory leak. D10.2.3

I've notice that the ImageList don't render properly the antialias effect to the target surface, as you can see into the image.
The difference is that SVGIconImage calls SVG.PaintTo(HDC...) instead of imagelist calls PaintTo(Graphics: TGPGraphics.
both uses Graphics.SetSmoothingMode(SmoothingModeAntiAlias) but it seems to render in different way.
Do you know why?

Hi guys,
in the last commit (August 18 - 22:44) I made some changes to TSVGIconImageCollection: now it inherits from TCustomImageCollection instead of TComponent and implements all required method (only from D10.3).
With this change it is now possible to use a native VirtualImageList connected to the collection, without breaking the use with SVGIconVirtualImageList.
To implement TSVGIconImageCollection.GetBitmap, I have moved bitmap creation from SVGIconImageListBase to SVGIconItems (maybe not the best place ...).
I have some doubts if this modification can be useful, because the use of a native VirtualImageList does not bring particular advantages compared to the use of the SVGIconVirtualImageList (indeed it is not able to use Grayscale, Opacity, FixedColor ...).
What do you think @pyscripter and @vincentparrett ?
I also deleted SVGToIcon24 too ... do we need it?

Test with:

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example quad01 - quadratic Bézier commands in path data</title>
  <desc>Picture showing a "Q" a "T" command,
        along with annotations showing the control points
        and end points</desc>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <!-- End points -->
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <!-- Control points and lines from end points to control points -->
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300
           L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>

An Exception is raised in TSVGTSpan.ReadTextNodes if the text element has no text.

Solution:
Add exception handling in TSVGTSpan.ReadTextNodes:

procedure TSVGTSpan.ReadTextNodes(const Node: IXMLNode);
begin
  // empty text nodes would raise exception
  try
    FText := Node.Text;
  except
  end;

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule.

Test with:

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Default value for fill-rule -->
  <polygon fill-rule="nonzero" stroke="red"
   points="50,0 21,90 98,35 2,35 79,90"/>

  <!--
  The center of the shape has two
  path segments (shown by the red stroke)
  between it and infinity. It is therefore
  considered outside the shape, and not filled.
  -->
  <polygon fill-rule="evenodd" stroke="red"
   points="150,0 121,90 198,35 102,35 179,90"/>
</svg>

Excellent work!

An ImageList is typically shared by more than one forms. In a per-monitor DPI scaled appliation, every form should have its own imagelist so that icons are scaled according to the monitor the form resides. As it stands that would lead to icon duplication.

Delphi has solved this issue by having a separate TImageCollection that handles the storage of the icons and a VirtualImageList that draws icons from an ImageCollection appropriately scaled.

I suggest something similar. a TSvgIconCollection that stores the svg icons and a TVirtualImageList that transforms a subset of icons from a TSvgIconCollection into a scaled ImageList.

Neither FixedColor property nor icon fixed color does work in the latest version 1.8.0. Also if you change the icon fixed color there is a memory leak: "An unexpected memory leak has occured. The unexpected small block leaks are: 21-28 bytes: AnsiString x 1".

The color was working in previous version. The memory leak was already there.

When you apply multiple transformations you pre-multiply the new one with the old one. See for example CalcRootMatrix where it is done correctly. However in TSVGMatrix.CalcMatrix it is done the wrong way (post-multiply the new matrix).

You need to change:

CompleteMatrix := CompleteMatrix * NewMatrix;
to
CompleteMatrix := NewMatrix * CompleteMatrix;

and
LMatrix := LMatrix * NewMatrix;
to
LMatrix := NewMatrix * LMatrix;

Also the "fix"

          //Fix for transform:translate with rescaling
          NewMatrix.m31 := NewMatrix.m31 * ADX;
          NewMatrix.m32 := NewMatrix.m32 * ADY;

is just wrong. Please remove.

Finally CalculateMatrices and CalcMatrix do not need any arguments. AX, AY, ADX, AD are taken care of by the transformations in CalcRootMatrix.

You can test the above with the attached sgv.
Back3.zip

With 10.1 I have an error at line 73 in SVGCommon: "Invalid typecast"

Result := WinApi.GDIPAPI.MakeRect(Single(Left), Top, Width, Height);

@vincentparrett defined the property with the name "Collection".
The native VirtualImageList has a property called "ImageCollection".
I propose to rename our property to ImageCollection before releaseing 2.0.

What do you think?

TSVGIconImageList has a compatibility issue with TImageList - the same one that TVirtualImageList does

https://quality.embarcadero.com/browse/RSP-28348

The simple fix is to change the base class to TDragImageList - that is the base class for TImageList.

SVG Image paths can contain floating point values notated as exponential, but TSVGPath.SeparateValues in SVG.pas does not account for such data. Example: this is a valid path:
<path fill="#004C75" d="M23.8,34 L3.4,34 C1.53,34 -5.32907052e-15,32.47 -5.32907052e-15,30.6 L-5.32907052e-15,3.4 C-5.32907052e-15,1.53 1.53,0 3.4,0 L23.8,0 C25.67,0 27.2,1.53 27.2,3.4 L27.2,30.6 C27.2,32.47 25.67,34 23.8,34 Z M3.4,3.4 L3.4,3.4 L3.4,30.6 L23.8,30.6 L23.8,3.4 L3.4,3.4 Z"/>

Suggested change to handle exponential:

function TSVGPath.SeparateValues(const ACommand: Char; const S: string): TStrings;
var
  NumberStr: string;
  C: Char;
  HasDot: Boolean;
  HasExp: Boolean;
begin
  NumberStr := '';
  HasDot := False;
  HasExp := False;

  Result := TStringList.Create;

  for C in S do
  begin
    case C of
      '.':
        begin
          if HasDot then
          begin
            HasDot := C = '.';
            Result.Add(NumberStr);
            NumberStr := C;
          end
          else
          begin
            NumberStr := NumberStr + C;
            HasDot := True;
          end;
        end;
      '0'..'9':
        begin
          NumberStr := NumberStr + C;
        end;
      '+', '-':
        begin
          if NumberStr <> '' then
          begin
            if not HasExp then begin
              Result.Add(NumberStr);
              HasDot := False;
            end else
              NumberStr := NumberStr + C;
          end;
          if not HasExp then
            NumberStr := C;
        end;
      'E', 'e':
        begin
          HasExp := True;
          NumberStr := NumberStr + C;
        end;
      ' ', #9, #$A, #$D:
        begin
          if NumberStr <> '' then
          begin
            Result.Add(NumberStr);
            NumberStr := '';
            HasDot := False;
          end;
        end;
    end;
  end;
  if NumberStr <> '' then
  begin
    Result.Add(NumberStr);
  end;

  Result.Insert(0, ACommand);

  if Result.Count > 0 then
  begin
    if ACommand.IsInArray(['M', 'm', 'L', 'l', 'H', 'h', 'V', 'v',
      'C', 'c', 'S', 's', 'Q', 'q', 'T', 't', 'A', 'a']) then
    begin
      PrepareMoveLineCurveArc(ACommand, Result);
    end
    else if (ACommand = 'Z') or (ACommand = 'z') then
    begin
      while Result.Count > 1 do
      begin
        Result.Delete(1);
      end;
    end;
  end;
end;

Sample SVG image to validate the correction:

<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
  <g fill="none" transform="translate(4 1)">
    <path fill="#D1DBCA" d="M3.4,1.7 L23.8,1.7 C24.82,1.7 25.5,2.38 25.5,3.4 L25.5,30.6 C25.5,31.62 24.82,32.3 23.8,32.3 L3.4,32.3 C2.38,32.3 1.7,31.62 1.7,30.6 L1.7,3.4 C1.7,2.38 2.38,1.7 3.4,1.7 Z"/>
    <path fill="#004C75" d="M23.8,34 L3.4,34 C1.53,34 -5.32907052e-15,32.47 -5.32907052e-15,30.6 L-5.32907052e-15,3.4 C-5.32907052e-15,1.53 1.53,0 3.4,0 L23.8,0 C25.67,0 27.2,1.53 27.2,3.4 L27.2,30.6 C27.2,32.47 25.67,34 23.8,34 Z M3.4,3.4 L3.4,3.4 L3.4,30.6 L23.8,30.6 L23.8,3.4 L3.4,3.4 Z"/>
    <path fill="#004C75" d="M13.6,8.5 L20.4,8.5 L20.4,11.9 L13.6,11.9 L13.6,8.5 Z M6.8,8.5 L10.2,8.5 L10.2,11.9 L6.8,11.9 L6.8,8.5 Z M13.6,15.3 L20.4,15.3 L20.4,18.7 L13.6,18.7 L13.6,15.3 Z M6.8,15.3 L10.2,15.3 L10.2,18.7 L6.8,18.7 L6.8,15.3 Z M13.6,22.1 L20.4,22.1 L20.4,25.5 L13.6,25.5 L13.6,22.1 Z M6.8,22.1 L10.2,22.1 L10.2,25.5 L6.8,25.5 L6.8,22.1 Z"/>
  </g>
</svg>

Specifying x, y r etc. as percentages is not handed at all except for the top level where is not used in stand-alone svgs.

For example:

<svg viewBox="0 0 64 64" height="64" width="64" 
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="25%" cy="25%" r="25%" style="fill:red;stroke:#000000;stroke-width:0.1"/>
  <circle cx="75%" cy="75%" r="25%" style="fill:blue;stroke:#000000;stroke-width:0.1" />
</svg>

is not properly rendered. The percentages are interpreter as pixels.

Fixing this requires some substantial changes. I can submit a PR for this but could you please first review and commit #32 , since it is not a good idea to have a massive PR.

See this link about how percentages should be handled

It would be nice if TSVGIconItem contained a Category field (possibly empty) and the property editors allowed for filtering by Category. (Like Actions or the Delphi ImageCollection)

Hi.
Do you have plans for a support another system in FMX version?
Or used SVG library work only on Windows?

while changing Theme

FixedColor does not work. Images are always black. Even if you set both FixedColors to white.

Also the editor is not showing the color.

In svgs you have the viewport and the viewbox (See https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844).

The ViewPort is specified by the width and height attributes. This is the actual width and height of the produced output. When you are printing to a Rectangular area, you are effectively changing the ViewPort.

The ViewBox on the other hand is a trasformation of the svg content into the ViewPort. In most cases the ViewBox width and height will be equal to the svg's width and height. But this is not always the case. In SVG.ReadIn, the ViewBox width and height are initialized to the svg's ones before they are read from the file.

The scaling factors calculated in TSVG.SetBounds should be based on the ViewBox width and height and not the svg's width and height as in the code below:

procedure TSVG.SetBounds(const Bounds: TGPRectF);
begin
  FRootBounds := Bounds;

  if FWidth = 0 then
    FWidth := FRootBounds.Width;

  if FHeight = 0 then
    FHeight := FRootBounds.Height;

  if (FViewBox.Width > 0) and (FRootBounds.Width > 0) then
    FDX := FRootBounds.Width / FViewBox.Width;

  if (FViewBox.Height > 0) and (FRootBounds.Height > 0) then
    FDY := FRootBounds.Height / FViewBox.Height;

  CalculateMatrices(FViewBox.Top, FViewBox.Left, FDX, FDY);
end;

Test with
Back.zip

Jim McKeeth asks us to publish this library on GetIt.

We can use today to do the latest tests and verify the stability, then we can release the official 2.0 version.

I'm closing the issue #42, the discussion continues here...

@pyscripter can you write a little documentation to integrate wiki documentation on the use of SetGlobalSVGHandler?

thanks to all!

Currently it's tied to GDI+ which is not working too well with lots of svg images. Literally the first image I tried did not render correctly.

Ideally there would an interface that can be implemented to wrapper different svg engines.

I really wanted to use this library, as working with png's at multiple sizes is just too much work, but it fails on too many of my images (mostly from axialis so I cannot share them for testing with).

The TSvg LoadFromStream, SaveToStream convert text to a TStringList and then load./save that. This is inefficient. Replace with the following:

procedure TSVG.LoadFromStream(Stream: TStream);
var
  Size: Integer;
  Buffer: TBytes;
begin
  Stream.Position := 0;
  Size := Stream.Size;
  SetLength(Buffer, Size);
  Stream.Read(Buffer, 0, Size);
  LoadFromText(TEncoding.UTF8.GetString(Buffer));
end;

procedure TSVG.SaveToStream(Stream: TStream);
var
  Buffer: TBytes;
begin
  Buffer := TEncoding.UTF8.GetBytes(FSource);
  Stream.WriteBuffer(Buffer, Length(Buffer));
end;

The above deals with #18

TSVGLinearGradient.ReadIn reads the gradientTransform matrix but TSVGRadialGradient.Readln does not.

Move:

var
  Matrix: TMatrix;

  FillChar(Matrix, SizeOf(Matrix), 0);
  LoadTransform(Node, 'gradientTransform', Matrix);
  PureMatrix := Matrix;

from TSVGLinearGradient.ReadIn to the common ancestor TSVGGradient.ReadIn

Test with the attached
Back4.zip

Hi,

there might be a scaling Problem with specific SVG's.
In my example theres some pixels missing at the bottom of the SVG.
Inside the button theres also 1px of cropping on the right side.
I attached a screenshot and the SVG file i used to reproduce this behavior.
I'm using Delphi 10.4 Sydney 32bit Windows VCL Application without HighRes Support.

phone.svg.zip

After building and installing the SVGIconImageList, I added the two components to a project. Then I tried to Add a new Icon. I browsed to the file and it looked like it added, as I saw the preview and could adjust the size. Clicking OK closed the window. And I tried to set a SVGIconImage component to that index "0". But nothing showed. And when I re-opened the editor, the image is gone.

I also tried opening the SVGIconItems and manually adding it. But I could add the new item, I was unable to paste the text in the SVGText box. It appears to only allow a very minimal amount of text and the was no way to bring up a larger window to enter or edit the text.

I even tried to add several of the sample Icons and was unsuccessful.

For example the following fails

    <svg width="120" height="120"  
        viewPort="0 0 120 120" version="1.1" 
        xmlns="http://www.w3.org/2000/svg">

            <style type="text/css" >
                <![CDATA[
                    rect.rectClass {
                        stroke: #000066;
                        fill:   #00cc00;
                    }
                    circle.circleClass {
                        stroke: #006600;
                        fill:   #cc0000;
                    }
                ]]>
            </style>

        <rect class="rectClass" x="10" y="10" width="100" height="100"/>
        <circle  class="circleClass"   cx="40" cy="50" r="26"/>
    </svg>

#40 fixes that

Test with:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>

In past, all the icons present into folder "D:\ETHEA\GitHub_EtheaDev\SVGIconImageList\Demo\NewSydneyVectors" where rendered correctly.
Now RAD_SERVER_Product icon.svg and C++Builder project icon.svg is not rendered correctly.
I remember that I've fixed a problem of initialitazion of svg color from black to inherit... but I'm not sure...
@pyscripter , can you check this problem?

The attached svg is parsed but not rendered properly.
Back2.zip

In all drawing libraries GDI, GDI+, DirectX size and coordinates are either Integer (GDI) or Single (GDI+, DirectX). The use of Double in the PaintTo methods is unnecessary and inefficient (due to the conversions).

Please replace all Double with Single.

Tested with the Demo: some color are "similar", some color are not rendered properly: eg.
clMaroon (r=128,g=0,b=0) is rendered as Red
clRed (r=255,g=0,b=0) is rendered as Red
I don't know why... ;-)
The problem is present only in some colors...

I really need this feature to be able to use this library, so I made a start on it. This will allow the handling of DPI changes on different forms that share the same list of images (as is common). Obviously the highdpi stuff is only in 10.3+ but it would still be useful, as we could do things like have multiple image lists, with different sizes using the same collection of svg's.

I'm mostly coding this in XE7 as that's the earliest I have installed, but of course when I get to it I'll test with 10.3 and 10.4 - I have a 2 monitor setup with different dpi's so easy to test.

I will open a draft pull request soon with the code for this.

So far I have done the following :

• Extracted TSVGIconItem and TSVGIconItems to a separate unit.
• Created a TSVGIconImageCollection class which will contain the TSVGIconItems
• Created a TSVGIconVirtualImageList class which uses the TSVGIconImageCollection for the list of images, and does the drawing etc.

For the moment I'm just copying and pasting parts of TSVGIconImageList as needed, but I can see a lot of duplication, so might look to introduce a new base class for both TSVGIconImageList and TSVGIconVirtualImageList as there is a lot of code duplication - I'll do that once I have confirmed my code is going to work.

The four files added in my last PR are missing from the SVGIconImageList.dpk.

SVGInterfaces in '..\..\Source\SVGInterfaces.pas',
 D2DSVGHandler in '..\..\Source\D2DSVGHandler.pas',
 PasSVGHandler in '..\..\Source\PasSVGHandler.pas',
 Winapi.D2DMissing in '..\..\Source\Winapi.D2DMissing.pas';

Hello.
When switching icons quickly, they overlap each other.

===

But this is not all, the same overlay occurs immediately upon application initialization (in my FMX application) on some icons.

(compiled app)

(app in IDE)

This icons from: https://icons8.com/line-awesome (tasks, users, list, cog)

D10.3. Windows 10

Any plan?

Thanks.

Thank you for writing this component; it looks like an interesting and useful component!

There's a problem, though...the Demo application doesn't scale properly. The TListView and TTreeView loses all its images when moved to a screen that uses a higher DPI (in my case, this high DPI monitor is 192 DPI).

I'm using it with Delphi 10.3 and HiDPISupport is defined.

I found that after a DPI change, it was necessary to call TSVGIconImageList.RecreateBitmaps( ) otherwise the images would be blank. I'd expect TSVGIconImageList.DPIChangedMessageHandler( ) should probably call the RecreateBitmaps( ) method after the size change has been completed.

TSVG.LoadFromStream:

   SL.LoadFromStream(Stream, TEncoding.UTF8);

TSVG.SaveToStream

   SL.SaveToStream(Stream);

SaveToStream will use the default encoding which is ANSI on Windows. So sgv text is written as ansi and read as utf8.
To make consistent save as utf8 as well.

Fix:

In TSVGBasic.Clear change

FFontSize := UndefinedInt;
to
FFontSize := UndefinedFloat;

For example:

raises an exception when parsed.

Solution:
In SVGProperties change LoadString to:

procedure LoadString(const Node: IXMLNode; const S: string;
  var X: string);
var
  Attribute: IXMLNode;
  V: Variant;
begin
  Attribute := Node.AttributeNodes.FindNode(S);
  if Assigned(Attribute) then
  begin
    V := Attribute.nodeValue;
    if VarType(V) = varNull then
      X := ''
    else
      X := V;
  end;
end;

When I add a couple of images through the image editor by clicking on the Add button the Apply button remains greyed out. If I click on the Ok button the new images are not saved. As a work-around, if I replace one on the images or drag and drop it to different place in the list of images the Apply button becomes clickable and changes are saved when I click on the Apply and Ok buttons

UDataModule.dfm saved as text
StoreAsText False: UDataModule.dfm size 512 Kb Loading Time: 256ms
StoreAsText True: UDataModule.dfm size 314 Kb Loading Time: 125ms

UDataModule.dfm saved as binary
StoreAsText False: UDataModule.dfm size 228Kb Loading Time: 253ms
StoreAsText True: UDataModule.dfm size 230Kb Loading Time: 127ms

StoreAsText True loads much faster. When the form is saved as Text there is an extra conversion HexToBin.

So I am not sure what the benefit of StoreAsText is (extra complexity - could be removed as well as the associated code) and it appears to me that in any case True should be the default value of StoreAsText.

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href.

Code like

LoadString(Node, 'xlink:href', FPathRef);

should be replace by

  LoadString(Node, 'xlink:href', FPathRef);
  if FPathRef = '' then
    LoadString(Node, 'href', FPathRef);

Four changes required.

See ekot1/DelphiSVG#16

90% of my SVG icons are rendering correctly, but that last 10% is holding me back from being able to use the library. I've tried hard to debug the reason, but have been unsuccessful so far. I have examples attached and show rendering by DevExpress and SVGIconImageList. Correcting the anomalies will make this library a must have in today's high res world.
SVGExamples.zip

In SVGParse.pas GetMatrix is defined as follows:

function GetMatrix(const S: string): TMatrix;
var
  SL: TStrings;
begin
  Result := TMatrix.Identity;
  SL := GetValues(S, ',');
  try
    if SL.Count = 6 then
    begin
      Result.m11 := StrToTFloat(SL[0]);
      Result.m12 := StrToTFloat(SL[1]);
      Result.m21 := StrToTFloat(SL[2]);
      Result.m22 := StrToTFloat(SL[3]);
      Result.m31 := StrToTFloat(SL[4]);
      Result.m32 := StrToTFloat(SL[5]);
    end;
  finally
    SL.Free;
  end;
end;

This is wrong. The i, j indices shoud be reversed:

function GetMatrix(const S: string): TMatrix;
var
  SL: TStrings;
begin
  Result := TMatrix.Identity;
  SL := GetValues(S, ',');
  try
    if SL.Count = 6 then
    begin
      Result.m11 := StrToTFloat(SL[0]);
      Result.m21 := StrToTFloat(SL[1]);
      Result.m12 := StrToTFloat(SL[2]);
      Result.m22 := StrToTFloat(SL[3]);
      Result.m13 := StrToTFloat(SL[4]);
      Result.m23 := StrToTFloat(SL[5]);
    end;
  finally
    SL.Free;
  end;
end;

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform and test with

Back3.zip

The TImageCollectionChangedMessage defined in Vcl.BaseImageCollection is currently not triggered.

D10.2.3
In the editor, the chosen icon property is shown but for example, $F0217 is square in the editor.
Last download