TAdvSVGImageCollection visual editor

Any chance we can discuss integrating this as design-time editor?

Of course, Bruno, but I'm using ImageEn components to handle the preview and the image list, so I'm not sure how that influences the possibilities...

Edit: Just thought of a possible way: If I make a .DLL that accepts a TList<TAdvSVGBitMap> and then I manipulate that (instead of the .DFM file directly), then I can deliver the .DLL file to you (so you don't need to purchase and license ImageEn) and you can call me at an appropriate time. Then it'll be your responsibility to stream the list in and out of the .DFM file.

Only caveat at this is that a TList<> across a .DLL boundary would require that your code and mine are compiled with the same Delphi version, as the internal structure of TList<> may possibly change in a future version.

What specific ImageEn component(s) is/are used? There are no replacements for these in VCL UI Pack?

TImageEnView (preview) & TImageEnMView (image collection list).

I'm not aware of any replacements in VCL UI Pack (but haven't looked, as I'm used to working with ImageEn components)

TImageEnView could probably easily be replaced with a more-or-less standard TImage, but I'm also using the image processing capabilities (such as transparency in TBitMap to enable transparency in the rendered SVG files) so it's not only the visual components that I'm using.

To give you an idea, here's the SVG-2-BMP Renderer I'm using (it also uses a bunch of my own CLASS/RECORD HELPERs so it doesn't compile as-is, but shows what I have to do in order to get a transparency from the rendered SVG files):

PROCEDURE RenderSVG2BMP(SVG : TAdvSVGBitmap ; BMP : TIEBitMap ; Background : TColor = clNone);
  VAR
    SZ  : TSize;
    R   : TRect;
    F   : TColor;

  BEGIN
    SZ:=TSize.Create(SVG.Width,SVG.Height);
    SZ:=SZ.ReSize(BMP.Width,BMP.Height);
    R:=Rect((BMP.Width-SZ.Width) DIV 2,(BMP.Height-SZ.Height) DIV 2,SZ.Width,SZ.Height);
    BMP.PixelFormat:=TIEPixelFormat.ie32RGB;
    IF Background=clNone THEN F:=RGB(1,2,3) ELSE F:=Background;
    BMP.Canvas.Brush.Style:=TBrushStyle.bsSolid;
    BMP.Canvas.Brush.Color:=F;
    BMP.Canvas.FillRect(R);
    SVG.Draw(BMP.Canvas,R);
    IF Background=clNone THEN BEGIN
      BMP.SetTransparentColors(F,F,0);
      PROC.SetBMP(BMP).CastColorRange(F,F,clBlack)
    END
  END;

v1.2 now available, which handles the upcoming properties, as discussed here:

image

To use the new properties (which are updated on-the-fly in the preview if you change them), you must check the "TMS v10.6.8 or later" checkbox to specify that you have a version that supports these properties. If you don't check it, it'll default back to pre-v10.6.8 behaviour:

image

Hi, thank you for this update. I noticed that the images are drawing with some kind of anti-aliasing, are you converting SVGs to images before rendering them? Because it should be possible to render the SVGs using GDI+ without quality loss as pure vector graphics.

Yes, I am. In order to get transparency to work properly, I had to jump through a few hoops (may be because I don't know how to do it otherwise, but unless I did it as shown in the code sample above, the transparency didn't work properly the way I did it - it would either remain 100% transparent for the entire image if I started with a fully transparent image, or would leave the transparent area non-transparent - usually black - if I started without a transparent image).

The reason I render to BMP first is that the Image List and Image View components (from ImageEn) works with bitmaps. I don't know how to make it work with TGraphic, so I have to convert it to T(IE)Bitmap in order to "squeeze" them into these components. If you know of a (free or TMS) multi-image viewer that supports TGraphic descendants and have support for drag-and-drop movement and text at the bottom of thumbnails, as well as a TGraphic-capable TImage (I think standard TImage may do here), then I'll be happy to experiment with that one instead...

TImage should just be able to handle SVG as we register SVG as a TGraphic. Alternatively, drawing SVG on a TPaintBox with TAdvGraphics is also possible. We currently don't have a component that combines the above, but with some customization you should be able to mimic the same behavior.

Nice, but how do I save the changes? The "Save" button is always grayed.

The "Save" button should be active once you have added an .SVG file to the collection. When you save, it'll be disabled until you add a new one (so you can see the "Edited" status by the active state of the Save button).

Pieter: I don't want to code an entire thumbnail viewer manually - it's too much hassle, when I have one already that works :slight_smile: albeit with anti-aliasing. If I can't have a finished TGraphic-capable multiple-image thumbnail viewer with built-in support for name label and drag'n'drop, I'll stay with TImageEnMView :slight_smile:

v1.25 now online with a few bug-fixes, better rendering to (hopefully) eliminate/minimize anti-aliasing, and a "Check All"/"Uncheck All"/"Toggle All" option in the .ZIP loader. You can now also adjust the relative size of the preview window/collection window (there's a Splitter between them).

GREAT!

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:
http://riversoftavg.com/order.php
(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)