TAdvSVGImageCollection visual editor

Maybe I misunderstood the usage, so I'm asking.. :slight_smile:

Is possible to change the color of the images and save them to the Delphi project?

I would like to recolor some of the Material Design Icons in the list, is this possible?

You cannot edit the .SVG file in this program, other than (when you get v10.6.8) the FillColor/StrokeColor/TintColor/GrayScale/Opacity properties. Most of the time these don't do anything useful (at least not in my case), as they either do too much (paint the entire .SVG image in that colour) or too little (ie. nothing at all). You'd need an external .SVG editor to do proper modification of colours.

If TMS would implement a "ChangeColorFrom" and "ChangeColorTo" array/list property of their TAdvSVGBitmap then it would be possible to re-map colours on an exiting .SVG file one-to-one (but would not work if shading was involved), but so far this option is not possible in their implementation, so the only option is to edit the .SVG file externally and save as a new file.

There's an editor over here:
(as a demo program) that seems fully functional. I might try to incorporate that library into my collection editor in a future version, but until then, you can play with the editor you can download over there...

v1.26 (now available) offers Export option of .SVG file(s) from the collection (Alt+X / PopupMenu on image list), and a Splitter (to resize the preview window) on the .ZIP import dialog.

v1.27 now includes exporting (saving) one or more .SVG files into a single .ZIP file (new one or add to existing one) using Alt+Z / PopupMenu on image list.

v1.28 now available with the following enhancements:

  1. ESC now exits the program (prompts if edited)
  2. F10 now exits the program (saves if edited)
  3. Thumbnails can be increased (Ctrl+NumPlus) or decreased (Ctrl+NumMinus) in size within 50% and 250% of default size (100x100 with 66x66 for thumbnail image itself)

v1.30 now available. You can now edit the colours of a loaded .SVG image using Alt+E or PopupMenu on Image List:

Once you press Alt+E the currently selected .SVG image is loaded into the new Colour Editor:


Here you can see the various colours used in the .SVG file. When you click on one in the left side, it'll flash for a few seconds on the right side to show you what that colour is used for. You can then update the colour at the bottom, updating the preview. If you change the colour, you need to "Commit" the changes with the checkmark icon next to the colour selection.

If you then click the "OK" button (or press F10), the changes you have made will be committed back to the collection, overwriting the previous colour setup. There is an implicit "Commit" action on the current colour edit included in the "OK" button.


v1.31 now released, with the following additions:

  1. Copy/Paste now implemented on the images in the collection.
  2. "Reset" button to reset the extra properties to their default (non-active) values.

v1.32 now released with a few bugfixes in the Edit Color functionality.

If you encounter an .SVG file that doesn't work with Edit Color, let me have a look at it.

I was trying to implement rotate support in my editor, but it seems like your SVG Renderer library doesn't support this. Could this be implemented? Preferably as a property to be set, but at least to be able to render an .SVG file that contains a "transform: rotate(xxxdeg);"

We will investigate

You cannot edit the .SVG file in this program

Note: See latest version for a color remapper function...

It seems like there's a problem in your .SVG renderer - to the extent that it "dies" when trying to load the file (via LoadFromStream).

BlendingModes.zip (9.9 KB)

I acknowledge that there may be some .SVG files that aren't rendered correctly, but it shouldn't "die" when attempting to load it...

I have come up with this (temporary) solution in my editor - load the file in a separate thread and kill it if it takes more than 2 seconds to do so...

  ESVGLoadError = CLASS(EInOutError);

    T   : TThread;
    OK  : BOOLEAN;
    TT  : LongWord;

    OK:=FALSE; TT:=GetTickCount;
    WHILE GetTickCount-TT<2000 DO IF OK THEN EXIT ELSE Sleep(100);
    RAISE ESVGLoadError.Create('Unable to load SVG file!')

We have investigated and fixed this issue. Next version will address this.

1 Like

We have added a RotationAngle property (at the same level as the TintColor and the other properties). You can set the degrees in which the SVG needs to be rotated. This will be available in the next version.

v1.33 now available. New features:

Implements support for "RotationAngle" (if configured for version 10.6.8 or later).

Please beware that if you configure the editor to allow this, you can't load the .DFM file in a pre-v10.6.8 library without errors.

Raw editor now available (Alt+R).

Allows you to edit the raw .svg XML file and see live-update as you change it (if the preview disappears, it means that the library can't interpret your corrections).

1 Like


Is this (Fantastic) editor available for download somewhere? I have 115 SVG toolbar icons I want to import into an ImageCollection and really don't fancy doing it image-by-image!
Or is there a better, built-in way of doing that now?


Updated links:


Alternate link:


Thank you!!!

Arhhh! Windows Defender insists there is a virus in the program, won't let me even download it :face_with_symbols_over_mouth: