BCGControlBar library provides a very simple and efficient way to use Scalable Vector Graphics (SVG) in toolbar/menu/ribbon and other controls.
Why do you need to use a vector graphics instead of raster?
High-DPI support is one of very important application features today: since more and more customers are using the
high-resolution displays, the program should be DPI-aware. Many years ago we already implemented a "smooth image
resizing": each toolbar/ribbon icon is automatically resized according to current DPI, but the icons render blurry on the
high-DPI displays. The blurring is not critical if DPI value is 125% or 150%, but in case of DPI 175% or greater (e.g.,
MS Surface), the result is not so good - you can see the "blurred" icon edges:
The solution is preparing separate image sets for each DPI, but if your application has a lot of toolbars or ribbon
controls, amount of the resources is huge and it will be very hard to maintain them (even if you need to add a single
icon, you've to prepare at least 4 separate images: 16x16, 24x24, 32x32 and 40x40!).
Therefore, only if you're using a scalable vector graphics, you can be sure that your application looks good under all expected DPIs.
The following screenshot shows the application with vector icons launched in 200% DPI environment - no blurry icons anymore!
SVG ("Scalable Vector Graphics", recommended by
) is an XML file describing two-dimensional graphics
format. BCGSoft libraries have SVG support with the
- Scripts, interactions and external objects are not
implemented due to security reasons.
- Animations, videos, sounds and internal images are
- Since SVG icons should be small and quickly rendered, we disabled the following SVG elements that may significantly affect a drawing performance:
- all effects, blend mode and filters
- Compressed SVG files (SVGz).
We strongly recommend to use a simplified ("optimized") SVG only: all elements such as texts or shapes should be
converted to paths and all paths should be combined. The simplified SVG is small and fast-drawing. In addition, in
this case, it will be very hard to make a "reverse engineering" for your media.
How to create SVG icons:
For your convenience, our designers prepared a set of SVG icons that you may freely use in your applications! Please find them
in Graphics folder - there are 40 16x16 and 20 32x32 basic icons.
The following free tools allow you to create new SVG images:
- Microsoft Expression Design 4: very simple in use. If you're familiar with Microsoft Office products, you may immediately start creating your own SVG files!
Inkscape: very powerful tool, but some time is needed for learning it.
Or, you may use any commercial applications such as CorelDraw or Adobe Illustrator. In addition,
there are a lot of 3-rd party freeware/commercial SVG icon collections.
How to prepare SVG image lists:
When the framework is loading image list resource, first it's looking for SVG resource and trying to parse an SVG.
We assume that SVG image list has the following format:
<?xml version="1.0" encoding="utf-8"?>
The icons are sorted by "x" and "y" attributes of each "2-nd level" SVG. Please use our Toolbar Editor and Ribbon
Designer to generate the lists: if the application has SVG-based toolbars/ribbons, our tools allow to add SVG icons
to existing image lists or create a new list.
How to replace your existing BMP/PNG image lists with new SVG lists:
- Prepare SVG image lists and save them in your project RES folder. For example,
if your application has one toolbar only, create toolbar.svg file and copy it to <My app>\Res folder.
- Import SVG file(s) to your resources: newly added files should be imported to "SVG" resource type.
- Open your .rc file in the text editor and replace your existing BMP or PNG file(s) with SVG:
- Please verify that you've a call to AfxOleInit(); in your application's InitInstance: otherwise, the framework cannot load SVG images.
Back to the Developer Area